summaryrefslogtreecommitdiff
path: root/modules/templates
diff options
context:
space:
mode:
authorNatasha Moongrave <natasha@256phi.eu>2026-06-28 23:14:35 +0200
committerNatasha Moongrave <natasha@256phi.eu>2026-06-28 23:14:35 +0200
commit7fb9ccc0fa63290118569fd9ca5ce9fb749a5e11 (patch)
treec1e8d3d1cac30aa4e21c1ef17f8f9b6cc6b1beb8 /modules/templates
parent6ecaf8b96d261114929462eb4634f5b61c7e0553 (diff)
Added web dev flake template
Diffstat (limited to 'modules/templates')
-rw-r--r--modules/templates/web/README.md149
-rw-r--r--modules/templates/web/flake.nix47
2 files changed, 196 insertions, 0 deletions
diff --git a/modules/templates/web/README.md b/modules/templates/web/README.md
new file mode 100644
index 0000000..56a3269
--- /dev/null
+++ b/modules/templates/web/README.md
@@ -0,0 +1,149 @@
+# Web Development Environment
+
+A reproducible Nix Flake for modern web development.
+
+This template provides a complete JavaScript and TypeScript development environment suitable for frameworks such as:
+
+* React
+* Next.js
+* Svelte
+* SvelteKit
+* Vue
+* Nuxt
+* SolidJS
+* Astro
+* Express
+* Fastify
+
+## Included Software
+
+### Runtime
+
+* **Node.js 24**
+* **npm**
+* **pnpm**
+* **Bun**
+
+### Development Tools
+
+* **TypeScript**
+* **TypeScript Language Server**
+* **Biome** (formatter and linter)
+* **Prettier**
+
+### Language Servers
+
+* HTML
+* CSS
+* JSON
+* TypeScript
+
+These work automatically in editors supporting the Language Server Protocol (LSP), such as Neovim, Helix, Zed, VS Code, and Emacs.
+
+## Usage
+
+Enter the development environment:
+
+```bash
+nix develop
+```
+
+The shell prints the installed versions of Node.js, npm, pnpm, and Bun when it starts.
+
+## Creating a Project
+
+Examples:
+
+### Vite
+
+```bash
+pnpm create vite
+```
+
+### Next.js
+
+```bash
+pnpm create next-app
+```
+
+### Astro
+
+```bash
+pnpm create astro
+```
+
+### SvelteKit
+
+```bash
+pnpm create svelte@latest
+```
+
+## Installing Dependencies
+
+Using pnpm:
+
+```bash
+pnpm install
+```
+
+Using npm:
+
+```bash
+npm install
+```
+
+Using Bun:
+
+```bash
+bun install
+```
+
+## Formatting
+
+Using Biome:
+
+```bash
+biome check .
+biome format .
+```
+
+Using Prettier:
+
+```bash
+prettier --write .
+```
+
+## Project Layout
+
+A typical project might look like:
+
+```text
+.
+├── flake.nix
+├── package.json
+├── pnpm-lock.yaml
+├── tsconfig.json
+├── src/
+└── public/
+```
+
+## Customization
+
+Depending on your workflow, you may want to add additional tools, such as:
+
+* Playwright
+* Cypress
+* Tailwind CSS
+* Prisma
+* Docker
+* PostgreSQL client
+* Redis client
+
+Because the development environment is defined entirely by the flake, anyone can reproduce the same toolchain by running:
+
+```bash
+nix develop
+```
+
+without installing Node.js or any global packages manually.
+
diff --git a/modules/templates/web/flake.nix b/modules/templates/web/flake.nix
new file mode 100644
index 0000000..bfa8dce
--- /dev/null
+++ b/modules/templates/web/flake.nix
@@ -0,0 +1,47 @@
+{
+ description = "Base development environment for modern web development";
+
+ inputs = {
+ nixpkgs.url = "github:NixOS/nixpkgs/nixos-unstable";
+ flake-utils.url = "github:numtide/flake-utils";
+ };
+
+ outputs = {
+ self,
+ nixpkgs,
+ flake-utils,
+ }:
+ flake-utils.lib.eachDefaultSystem (system: let
+ pkgs = nixpkgs.legacyPackages.${system};
+ in {
+ devShells.default = pkgs.mkShell {
+ packages = with pkgs; [
+ nodejs_24
+ nodePackages.pnpm
+ bun
+ typescript
+ typescript-language-server
+ biome
+ nodePackages.prettier
+ nodePackages.vscode-langservers-extracted
+ ];
+
+ shellHook = ''
+ echo "Node $(node --version)"
+ echo "npm $(npm --version)"
+ echo "pnpm $(pnpm --version)"
+ echo "bun $(bun --version)"
+
+ echo
+ echo "Included tools:"
+ echo " • Node.js"
+ echo " • pnpm"
+ echo " • Bun"
+ echo " • TypeScript"
+ echo " • Biome"
+ echo " • Prettier"
+ echo " • HTML/CSS/JSON Language Server"
+ '';
+ };
+ });
+}