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

Note

In this section, we will be using a framework-specific scaffolder to initialize a project. Nowadays, it is also common for web developers to use an AI prototyping tools such as v0, Loveable, replit, bolt.new, and Claude. If you have used one of those tools to initialize your project, you may still be able to use the template to add a Nix-based environment, so proceed to the next section.

Note

If you are adding flake.nix to an existing project, you can skip this section.

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

   npm

   nix shell nixpkgs#nodejs

   yarn

   nix-shell -p yarn -p nodejs

   or

   nix develop github:akirak/flake-pins#yarn

   pnpm

   nix-shell -p pnpm -p nodejs

   or

   nix develop github:akirak/flake-pins#pnpm

   bun

   nix shell nixpkgs#bun

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

   • Install and set up Astro | Docs
   • Getting Started: Installation | Next.js
   • Installation · Get Started with Nuxt
   • Creating a project • Docs • Svelte

Add flake.nix to the project

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

   nix flake init 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:

   use flake

4. Allow direnv:

   direnv allow

Developing

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