How to use nix to build a create-react-app project?

Help
10

Hi everyone,

I’ve been trying to build my freshly created create-react-app project using nix and this discussion is one of the first threads I hit on Google, but unfortunately, neither the discussion here nor other links I’ve found on Google worked for me out of the box. After some wrestling with nix, nixpkgs and yarn, I’ve finally come up with the following default.nix that works for me when I drop it into my project’s root folder:

let
  nixpkgs = import (builtins.fetchTarball {
    name = "nixpkgs-release-21.11";
    url = "https://github.com/nixos/nixpkgs/archive/cdd6fd92ee2334fe49483bec7b9b64920ba1403a.tar.gz";
    sha256 = "05nb9v77rx0y72zfghi7v1qxb683flx6sgjqlvkk83zb8a8bgn1h";
  }) {};
  inherit (nixpkgs) fetchFromGitHub mkYarnPackage;
  gitignoreSrc = builtins.fetchTarball {
    name = "nixpkgs-release-21.11";
    url = "https://github.com/hercules-ci/gitignore.nix/archive/5b9e0ff9d3b551234b4f3eb3983744fa354b17f1.tar.gz";
    sha256 = "01l4phiqgw9xgaxr6jr456qmww6kzghqrnbc7aiiww3h6db5vw53";
  };
  inherit (import gitignoreSrc { inherit (nixpkgs) lib; }) gitignoreSource;
  spa = (mkYarnPackage {src = gitignoreSource ./.;}).overrideAttrs
    (oldAttrs: let pname = oldAttrs.pname; in {
      doDist = false;
      buildPhase = ''
        runHook preBuild
        shopt -s dotglob

        rm deps/${pname}/node_modules
        mkdir deps/${pname}/node_modules
        pushd deps/${pname}/node_modules
        ln -s ../../../node_modules/* .
        popd
        yarn --offline build
        runHook postBuild
      '';
      installPhase = ''
        runHook preInstall

        mv deps/${pname}/build $out

        runHook postInstall
      '';
    });
in spa