Document workflow for compiled SPAs.

[Akii]

Took me some time to figure this one out. I needed to compile a SPA. Has no bin to execute and I didn't find another way to only generate the compiled HTML / JS / CSS files.

The source code hints it quite well: https://github.com/moretea/yarn2nix/blob/master/default.nix#L259

So here is what I did:

  my-spa = mkYarnPackage {
    name = "my-spa";
    src = ./.;
    packageJson = ./package.json;
    yarnLock = ./yarn.lock;
    yarnNix = ./yarn.nix;
    installPhase = ''
        runHook preInstall

        mkdir -p $out
        yarn build
        mv dist $out

        runHook postInstall
    '';
  };

Yarn (or node) complains a bit about not finding a suitable global folder but other than that, this will result in the derivative containing a dist folder instead of node_modules and an empty bin directory.

In my case I pointed the Nginx root to that dir and it was up running.

[zimbatm]

Yes that's a quite nice pattern isn't it? Now the output can easily be composed with other things and not have a dependency on node.

A few notes:

The yarnNix attribute is not necessary as it it built automatically if missing. We mainly use if for bootstrapping the yarn2nix package. Plus it means that you don't have to keep the yarn.nix and yarn.lock in sync anymore.

I would split the buildPhase = "yarn build"; and installPhase = "mv dist $out"; to make the distinction in the logs. The hooks are not necessary unless it's expected that the package will be overridden later on.

[Akii]

Hi, sorry for the late reply. Applying your suggestions it leaves us with this:

  my-spa = mkYarnPackage {
    name = "my-spa";
    src = ./.;
    packageJson = ./package.json;
    yarnLock = ./yarn.lock;
    yarnNix = ./yarn.nix;
    buildPhase = "yarn build";
    installPhase = "mv dist $out";
  };

I will create a PR to add this information to the readme.

[waxlamp]

This worked out nicely.

I have a follow-up question: if I'm used to running my SPA with a command like yarn run serve or yarn start, how might I fold that into this Nix-based development workflow?