Vite React Template (ALT-F4-LLC#57)

* feat(vite): init template from create-vite-app source

* feat(templates): add vite-react template to flake, lib, CI and README

.github/workflows/flake-language.yml

@@ -28,6 +28,7 @@ jobs:
           - rust
           - swiftpm
           - zig
+          - vite-react
     steps:
       - uses: DeterminateSystems/nix-installer-action@main
       - uses: cachix/cachix-action@v12

README.md

@@ -31,6 +31,7 @@ Kickstart your Nix environments.
     - [Rust](#rust)
     - [Swift](#swift)
     - [Zig](#zig)
+    - [Vite (React)](#vite-react)
 
 - Systems
     - Linux
@@ -460,6 +461,25 @@ Used for Zig applications.
 nix flake init -t github:ALT-F4-LLC/kickstart.nix#zig
 ```
 
+#### Vite (React)
+
+Used for React-based frontends built with Vite. The template builds using `npm`.
+
+```bash
+nix flake init -t github:ALT-F4-LLC/kickstart.nix#vite-react
+```
+
+To update your dependencies, install/upgrade them as normal via NPM, then use
+the [`prefetch-npm-deps` package from nixpkgs](https://github.com/NixOS/nixpkgs/blob/master/doc/languages-frameworks/javascript.section.md#prefetch-npm-deps-javascript-buildnpmpackage-prefetch-npm-deps)
+to generate a new `npmDepsHash` value for `packages.default` in the Flake. This
+is included in the development shell provided by the flake.
+
+```bash
+$ prefetch-npm-deps package-lock.json
+...
+sha256-nTTzkQEdnwWEQ/3uy8hUbPsRvzM53xuoJHoQhR3E/zk=
+```
+
 ### Systems
 
 #### Home Manager

flake.nix

@@ -112,6 +112,11 @@
             description = "Kickstart Haskell package flake.";
             path = ./template/haskell;
           };
+
+          vite-react = {
+            description = "Kickstart Vite React package flake.";
+            path = ./template/vite-react;
+          };
         };
       };
 
@@ -156,6 +161,7 @@
           example-dart = lib.flake.dart system;
           example-zig = lib.flake.zig system;
           example-haskell = lib.flake.haskell system;
+          example-vite-react = lib.flake.vite-react system;
         };
       };
     };

lib/default.nix

@@ -291,5 +291,17 @@
         cp --no-preserve=mode -r $src/* $out
         cat $out/flake.nix
       '';
+
+    vite-react = system: let
+      pkgs = inputs.nixpkgs.legacyPackages.${system};
+    in
+      pkgs.runCommand "vite-react"
+      {
+        src = ../template/vite-react;
+      } ''
+        mkdir -p $out
+        cp --no-preserve=mode -r $src/* $out
+        cat $out/flake.nix
+      '';
   };
 }

template/vite-react/.envrc

@@ -0,0 +1 @@
+use flake

template/vite-react/.eslintrc.cjs

@@ -0,0 +1,18 @@
+module.exports = {
+  root: true,
+  env: { browser: true, es2020: true },
+  extends: [
+    'eslint:recommended',
+    'plugin:@typescript-eslint/recommended',
+    'plugin:react-hooks/recommended',
+  ],
+  ignorePatterns: ['dist', '.eslintrc.cjs'],
+  parser: '@typescript-eslint/parser',
+  plugins: ['react-refresh'],
+  rules: {
+    'react-refresh/only-export-components': [
+      'warn',
+      { allowConstantExport: true },
+    ],
+  },
+}

template/vite-react/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

template/vite-react/flake.nix

@@ -0,0 +1,42 @@
+{
+  description = "Example kickstart Node.js backend project.";
+
+  inputs.nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
+
+  outputs = inputs @ {flake-parts, ...}:
+    flake-parts.lib.mkFlake {inherit inputs;} {
+      systems = ["x86_64-linux" "aarch64-linux" "aarch64-darwin" "x86_64-darwin"];
+
+      perSystem = {
+        config,
+        self',
+        inputs',
+        pkgs,
+        system,
+        ...
+      }: let
+        name = "example";
+        version = "0.1.0";
+        nodejs = pkgs.nodejs_21;
+      in {
+        devShells = {
+          default = pkgs.mkShell {
+            buildInputs = [pkgs.prefetch-npm-deps];
+            inputsFrom = [self'.packages.default];
+          };
+        };
+
+        packages = {
+          default = pkgs.buildNpmPackage {
+            inherit version nodejs;
+            pname = name;
+            src = ./.;
+            npmDepsHash = "sha256-KeXRIp4qNywb1sy5lXTagoUsW6EeK1kF5OWJ97w9Vfk=";
+            installPhase = ''
+              cp --no-preserve=mode -r dist $out
+            '';
+          };
+        };
+      };
+    };
+}

template/vite-react/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Vite + React + TS</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>