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.

Initialize a new project

We will be using a framework-specific scaffolder to initialize a project. An alternative way is to use an external service such as StackBlitz and Bolt.new. The flake template should work the same way, but I don't provide any specific support for those services.

  1. We 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

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

Add flake.nix to the project

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

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

  2. Open flake.nix and comment out yarn, pnpm, or bun in the buildInputs 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
          ...
        ];
      };
    });

  3. Add .envrc:

    Terminal window
    use flake

  4. Allow direnv:

    Terminal window
    direnv allow

Developing

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