Skip to content
Nix Flake Templates

Developing a web application in TypeScript

In this tutorial, you will learn how to add flake.nix to a TypeScript web application using node-typescript template in the repository.

Initialize a new project

Section titled “Initialize a new project”

You will need one of npm, yarn, pnpm, or bun. Both npm and bun are available directly from Nixpkgs.

If you prefer yarn or pnpm, you will probably need both yarn/pnpm and npm. To make the multiple packages available, you can use the classic nix-shell command, or use a devshell in my personal repository.

Terminal window
nix shell nixpkgs#nodejs

Follow an instruction for the framework of your choice to initialize the project. Below are some links:

Add flake.nix to the project

Section titled “Add flake.nix to the project”

  1. Initialize the template from the root directory of the project:

    Terminal window
    nix flake init -t github:akirak/flake-templates#node-typescript

  2. If the package.json in the repository contains packageManager section, corepack installs the program automatically.

    Here is an example packageManager specification in package.json:

     "packageManager": "pnpm@10.4.0+sha512.6b849d0787d97f8f4e1f03a9b8ff8f038e79e153d6f11ae539ae7c435ff9e796df6a862c991502695c7f9e8fac8aeafc1ac5a8dab47e36148d183832d886dd52",

    The flake.nix should contain corepack package in the development shell:

     {
       devShells = eachSystem (pkgs: {
         default = pkgs.mkShell {
           buildInputs = [
             ...
    

             # Use corepack to install npm/pnpm/yarn as specified in package.json
             pkgs.corepack
    

             ...
           ];
         };
       });
     };

    Alternatively, you can install yarn, pnpm, or bun directly using Nix. Open flake.nix and comment out the corresponding package name in the package field of the default shell, depending on the package manager of your choice.

    devShells = eachSystem (pkgs: {
      default = pkgs.mkShell {
        buildInputs = [
          pkgs.nodejs
          # Comment out one of these
          # pkgs.bun
          # pkgs.nodePackages.pnpm
          # pkgs.yarn
          pkgs.yarn
          ...
        ];
      };
    });

    There are several other options available. See the comments in the generated flake.nix.

  3. Add .envrc:

    Terminal window
    use flake

  4. Allow direnv:

    Terminal window
    direnv allow

Developing

Section titled “Developing”

You can use npm, yarn, pnpm, or bun to develop your application as you would normally do.