blob: 56a32697af0ad72275b81e730b1d4fa86efd6b7d (
plain)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
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.
|
