npx create-simmerplate my-project

Simmerplate sets up everything you need to get started with a fullstack web app. Simply run the commands and start coding.

Javascript files in the frontend/src/js directory and CSS files in the frontend/src/css directory are bundled by webpack and served as single javascript and css files respectively in the frontend/dist/js and frontend/dist/css directories.

index.html in the frontend/dist directory is the entry point for the app. It imports the bundled javascript and css files.

The template is intentionally using vanilla javascript and css, so you can expand it with your own libraries and frameworks.

• Node.js server
  • Express
  • Rate limiting
  • Statically serving the frontend/dist directory
  • Error handling middleware
  • Simple hello world GET endpoint
• Browser-sync
  • Proxies the served app on the local network, for easy mobile development (check the IPs in the terminal when running npm run dev)
  • Automatically reloads the browser when files change (aka. hot reloading)
• Webpack
  • Bundling javascript and css files
  • Hot reloading
• Babel
• ESLint
  • Linting for both frontend and backend files
• Prettier

Run both back-end and front-end in two separate terminals.

Front-end:

npm run dev

Back-end:

npm run dev-server

A debug launch config is included for VSCode, start it by pressing F5.

Use chrome devtools to debug the front-end.

npm run build

project-root/
├── frontend/
│ ├── src/
│ │ ├── css/
│ │ │ └── app.css                       # Main stylesheet
│ │ │
│ │ └── app.js                          # Main JavaScript entry
│ │
│ ├── dist/
│ │ ├── css/                            # Bundled CSS output
│ │ ├── js/                             # Bundled JS output
│ │ └── index.html                      # Main HTML entry
│ │
│ └── webpack/
│   ├── webpack.config.js               # Webpack configuration
│   ├── babel.config.js                 # Babel configuration
│   ├── eslint.config.js                # Frontend ESLint configuration
│   ├── clean-dist.js                   # Script to clean the dist directory
│   └── update-index.js                 # Script to update the index.html file with new bundle files
│
├── backend/
│ ├── src/
│ │ └── server.js                       # Express.js server
│ │
│ ├── lint/
│ │ └── eslint.config.js                # Backend ESLint configuration
│ │
│ └── .env
│
├── .vscode/
│ └── launch.json                       # Debug configuration
│
└── package.json

Simmerplate comes with additional templates to customize your setup:

Convert your project to use React with TypeScript:

node simmerplate-templates/react-typescript.js

This template will:

• Install TypeScript and React dependencies
• Configure Babel for TypeScript and React
• Create a tsconfig.json with optimal settings
• Convert the main app to React components
• Set up a sample TestButton component
• Update webpack configuration for TypeScript files

After running the template:

1. Start the dev server: npm run dev-server
2. Start the frontend build: npm run dev

The React + TypeScript template maintains all the core features (hot reloading, bundling, etc.) while providing type safety and modern React development patterns.

Convert your project's back-end to use TypeScript:

node simmerplate-templates/node-ts.js

This template will:

• Install TypeScript and back-end specific dependencies
• Create a tsconfig.json for the back-end
• Update the ESLint configuration for TypeScript
• Convert server.js to server.ts
• Update package.json scripts for development, linting, building, and running the TypeScript server

After running the template, you can use the following scripts:

• npm run dev-server: Start the development server with hot-reloading.
• npm run lint:server: Lint the back-end TypeScript files.
• npm run build:server: Build the back-end for production.
• npm run start:server: Run the production-ready back-end.