How do you set up a web development server?

Help
1

I’d like to use nix develop to set up a comfortable environment for working on web projects with native ES modules. I’ve managed to do this in what strikes me as probably a fairly awkward way, and I’m curious about what the right approach might be.

Here’s the trick I’ve been using: include the server in a package.json like this:

{
  "name": "my-package",
  "version": "0.0.0",
  "dependencies": {
    "@web/dev-server": "^0.4.4"
  }
}

And then get a derivation like this:

    devDeps = pkgs.buildNpmPackage {
      name = "web-dev-deps";
      src = ./.;
      npmDepsHash = "sha256-udaEFDcFNy/2UznctM0pGkoA0PU8RoTH8eLEWziZ5CQ=";
      dontNpmBuild = true;
      postInstall = ''
      mkdir $out/bin
      ln -s $out/lib/node_modules/my-package/node_modules/@web/dev-server/dist/bin.js $out/bin/web-dev-server
      '';
    };

This works, but seems wrong. What’s the right way to do it?

Main constraint: “the right way” should actually work at least as well as the above. I’ve tried more direct use of buildNpmPackage and similar nixpkgs tools with quite a few different servers (vite, web-dev-server, wmr…), with src = fetchFromGithub {...}, but they all seem to run into problems somewhere or other.

1 Like
2

Exceptionally minor improvement: You can set postInstall instead to ln -s $(find $out -name .bin) $out/bin, which makes this a little more plug-and-play.

3

Figured it out, I think. This seems reasonably correct: