mirror of
https://github.com/sajenim/javascript-template.git
synced 2025-12-17 03:50:40 +08:00
Refactor into multi-template monorepo with Next.js support
Restructure project to support multiple templates via Nix flakes and omnix. Users can now choose between vanilla JavaScript or Next.js TypeScript templates during initialization. - Move existing template to templates/vanilla/ - Add templates/nextjs/ with App Router, TypeScript, and React 19 - Update flake.nix for multi-template outputs - Add TypeScript support to shared devshell - Preserve FHS compatibility for both templates - Update README with comprehensive template comparison and usage
This commit is contained in:
parent
506821f638
commit
c497b0fc1d
GPG key ID:
8563E358D4E8040E
23 changed files with 451 additions and 39 deletions
172
README.md
172
README.md
|
|
@ -1,29 +1,82 @@
|
|||
# JavaScript Template
|
||||
# JavaScript Templates
|
||||
|
||||
A minimal JavaScript development template using Nix. Key features:
|
||||
A family of minimal JavaScript development templates using Nix for reproducible
|
||||
environments. Choose the right foundation for your project while maintaining
|
||||
consistent tooling and workflows.
|
||||
|
||||
- Nix + Flakes for reproducible environments
|
||||
- Bun (fast JavaScript runtime & package manager)
|
||||
- Vite (development server & build tool)
|
||||
- Node.js (mature REPL with custom helpers)
|
||||
- ESLint + Prettier (linting & formatting)
|
||||
- Devshell commands via just
|
||||
## Available Templates
|
||||
|
||||
## Prerequisites
|
||||
### Vanilla
|
||||
|
||||
Minimal JavaScript template for interactive sites and applications.
|
||||
|
||||
**Best for:**
|
||||
|
||||
- Interactive tools and utilities
|
||||
- Client-side games
|
||||
- Dashboards and data visualizations
|
||||
- Projects that don't need a framework
|
||||
|
||||
**Tech stack:**
|
||||
|
||||
- Vite (development server & bundler)
|
||||
- Vanilla JavaScript (no framework)
|
||||
- Node.js REPL with custom helpers
|
||||
|
||||
### Next.js
|
||||
|
||||
TypeScript template with App Router for modern web applications.
|
||||
|
||||
**Best for:**
|
||||
|
||||
- Full-stack applications (e-commerce, SaaS)
|
||||
- Static sites with growth potential
|
||||
- Projects needing API routes
|
||||
- Server-side rendering or static generation
|
||||
|
||||
**Tech stack:**
|
||||
|
||||
- Next.js 15 with App Router
|
||||
- React 19
|
||||
- TypeScript
|
||||
- Optimized for Vercel deployment
|
||||
|
||||
## Shared Foundation
|
||||
|
||||
All templates include:
|
||||
|
||||
- **Nix + Flakes** - reproducible development environments
|
||||
- **Bun** - fast JavaScript runtime & package manager
|
||||
- **ESLint + Prettier** - code quality and formatting
|
||||
- **just** - consistent command-line interface
|
||||
- **FHS compatibility** - toggle for NixOS edge cases
|
||||
|
||||
## Getting Started
|
||||
|
||||
### Prerequisites
|
||||
|
||||
- [Nix](https://nixos.org/download.html) with flakes enabled
|
||||
- [direnv](https://direnv.net/) (optional but recommended)
|
||||
|
||||
## Getting Started
|
||||
### Initialize a Project
|
||||
|
||||
Initialize a new project using [omnix](https://omnix.page):
|
||||
Using [omnix](https://omnix.page):
|
||||
|
||||
**Vanilla template:**
|
||||
|
||||
```sh
|
||||
nix run nixpkgs#omnix -- \
|
||||
init github:sajenim/javascript-template -o ./my-project
|
||||
init github:sajenim/javascript-templates -o ./my-project
|
||||
```
|
||||
|
||||
Then enter the development environment:
|
||||
**Next.js template:**
|
||||
|
||||
```sh
|
||||
nix run nixpkgs#omnix -- \
|
||||
init github:sajenim/javascript-templates#nextjs -o ./my-nextjs-app
|
||||
```
|
||||
|
||||
### Enter Development Environment
|
||||
|
||||
```sh
|
||||
cd my-project
|
||||
|
|
@ -31,37 +84,106 @@ direnv allow # Or use: nix develop
|
|||
just dev
|
||||
```
|
||||
|
||||
**NixOS users:** If bun-installed binaries fail to find system libraries, enable FHS compatibility:
|
||||
### NixOS FHS Compatibility
|
||||
|
||||
If bun-installed binaries fail to find system libraries, enable FHS
|
||||
compatibility:
|
||||
|
||||
```nix
|
||||
# nix/modules/devshell.nix
|
||||
fhs = true;
|
||||
```
|
||||
|
||||
## Available Commands
|
||||
## Common Commands
|
||||
|
||||
Run `just` to see all available commands:
|
||||
Both templates share the same command interface:
|
||||
|
||||
```sh
|
||||
just dev # Start dev server
|
||||
just repl # Node.js REPL with helpers
|
||||
just lint # Lint with ESLint
|
||||
just format # Format with Prettier
|
||||
just # List all available commands
|
||||
just dev # Start development server
|
||||
just build # Production build
|
||||
just lint # Lint code
|
||||
just format # Format code
|
||||
just clean # Clean build artifacts
|
||||
just update # Update flake inputs
|
||||
just upgrade # Upgrade bun packages
|
||||
just update # Update Nix flake inputs
|
||||
just upgrade # Upgrade package dependencies
|
||||
```
|
||||
|
||||
### Template-Specific Commands
|
||||
|
||||
**Vanilla:**
|
||||
|
||||
```sh
|
||||
just repl # Node.js REPL with custom helpers
|
||||
just preview # Preview production build
|
||||
```
|
||||
|
||||
**Next.js:**
|
||||
|
||||
```sh
|
||||
just start # Start production server
|
||||
just typecheck # TypeScript type checking
|
||||
just check # Run format-check, lint, and typecheck
|
||||
```
|
||||
|
||||
## Next.js Static Export
|
||||
|
||||
For pure static sites (no server-side features), enable static export:
|
||||
|
||||
```js
|
||||
// templates/nextjs/next.config.js
|
||||
const nextConfig = {
|
||||
output: 'export',
|
||||
// ...
|
||||
};
|
||||
```
|
||||
|
||||
Note: This disables API routes and server-side rendering.
|
||||
|
||||
## Customization
|
||||
|
||||
This template provides minimal, sensible defaults. Customize as needed:
|
||||
All templates provide minimal, sensible defaults. Customize as needed:
|
||||
|
||||
**Vanilla:**
|
||||
|
||||
- Modify linting rules in `eslint.config.js`
|
||||
- Add custom REPL helpers in `.replrc.js`
|
||||
- Extend Vite config if needed
|
||||
|
||||
**Next.js:**
|
||||
|
||||
- Configure Next.js in `next.config.js`
|
||||
- Customize ESLint rules in `.eslintrc.json`
|
||||
- Adjust TypeScript settings in `tsconfig.json`
|
||||
- Extend ESLint config for stricter rules
|
||||
|
||||
**Both templates:**
|
||||
|
||||
- Add Prettier config via `.prettierrc` if needed
|
||||
- Extend `Justfile` with project-specific commands
|
||||
- Add custom REPL helpers in `.replrc.js`
|
||||
- Adjust Nix devshell in `nix/modules/devshell.nix`
|
||||
|
||||
## Template Comparison
|
||||
|
||||
| Feature | Vanilla | Next.js |
|
||||
| ------------------ | ------- | ------- |
|
||||
| Framework | None | Next.js |
|
||||
| Language | JS | TS |
|
||||
| Bundler | Vite | Next.js |
|
||||
| Client-side only | ✓ | ✗ |
|
||||
| Server-side API | ✗ | ✓ |
|
||||
| Static generation | ✓ | ✓ |
|
||||
| Type checking | ✗ | ✓ |
|
||||
| React components | ✗ | ✓ |
|
||||
| File-based routing | ✗ | ✓ |
|
||||
|
||||
## Acknowledgments
|
||||
|
||||
- [srid's haskell-template](https://github.com/srid/haskell-template)
|
||||
- [srid's haskell-template](https://github.com/srid/haskell-template) -
|
||||
inspiration for Nix flakes structure
|
||||
- [Next.js](https://nextjs.org/) - React framework for production
|
||||
- [Bun](https://bun.sh/) - fast JavaScript runtime
|
||||
|
||||
## License
|
||||
|
||||
MIT
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue