Node.js project starter

.eslintrc.json

{
  "env": {
    "es2022": true,
    "browser": true,
    "cypress/globals": true
  },
  "extends": ["eslint:recommended", "plugin:cypress/recommended"],
  "parserOptions": {
    "ecmaVersion": 2022,
    "sourceType": "module"
  },
  "plugins": ["cypress"],
  "ignorePatterns": ["coverage/", "data/", "vendor/"]
}

.prettierignore

coverage/
data/
dist/
vendor/

.prettierrc

{
  "proseWrap": "always",
  "singleQuote": true,
  "trailingComma": "all"
}

cypress.config.js

import { defineConfig } from 'cypress';

export default defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000',
    setupNodeEvents(on, config) {
      // implement node event listeners here
    },
  },
});

jest.config.json

{
  "transform": {},
  "verbose": true,
  "watchPathIgnorePatterns": ["<rootDir>/data/"]
}

Makefile

# TODO remove --experimental-vm-modules when Jest supports ESM
export NODE_OPTIONS=--experimental-vm-modules --no-warnings=ExperimentalWarning
export NPM_CONFIG_YES=true

# TODO remove if eslint-plugin-cypress supports ESLint 9.0.0 flat config
export ESLINT_USE_FLAT_CONFIG=false

all: dist check

clean:
	rm -rf coverage public/vendor

distclean: clean
	rm -rf node_modules
	rm -rf dist

dist: build

check: test e2e
	npx prettier . --check
	npx eslint public/js src test

format:
	npx prettier . --write
	npx eslint --fix public/js src test

start: build
	npm start

dev: build
	npx concurrently \
		"npx nodemon src/main.js" \
		"npx browser-sync 'http://localhost:3000' public -w --port 8080 --no-open"

dev-e2e: build
	npx cypress open

test: build
	npm test

unit-tests: build
	npx jest --testPathPattern=".*\/unit\/.*"

integration-tests: build
	npx jest --testPathPattern=".*\/integration\/.*"

e2e-tests: build e2e
	npx jest --testPathPattern=".*\/e2e\/.*"

e2e: build
	node src/main.js &
	npx cypress run
	kill `lsof -t -i:3000`

watch: build
	npx jest --watch

coverage: build
	npx jest --coverage

build: version
	@if [ -n "$(CI)" ] ; then \
		echo "CI detected, run npm ci"; \
		npm ci; \
	else \
		npm install; \
	fi
	npm run build

version:
	@echo "Use Node.js $(shell node --version)"
	@echo "Use NPM $(shell npm --version)"

.PHONY: all clean distclean dist check format start dev dev-e2e \
	test unit-tests integration-tests e2e-tests e2e watch coverage \
	build version

nodemon.json

{
  "ignore": ["data/**", "dist/**", "public/**", "test/**"]
}

package.json

{
  "name": "skill-sharing",
  "version": "0.1.0",
  "author": "Falko Schumann",
  "license": "MIT",
  "engines": {
    "node": ">=20.0.0"
  },
  "type": "module",
  "main": "src/main.js",
  "scripts": {
    "start": "node src/main.js",
    "test": "jest",
    "build": "rollup -c"
  },
  "dependencies": {
    "express": "4.19.2",
    "lit-html": "3.1.3"
  },
  "devDependencies": {
    "@jest/globals": "29.7.0",
    "@rollup/plugin-node-resolve": "15.2.3",
    "@types/express": "4.17.21",
    "@types/supertest": "6.0.2",
    "cypress": "13.7.3",
    "eslint": "9.0.0",
    "eslint-plugin-cypress": "2.15.2",
    "jest": "29.7.0",
    "jest-environment-jsdom": "29.7.0",
    "nodemon": "3.1.0",
    "prettier": "3.2.5",
    "rollup": "4.14.3",
    "supertest": "6.3.4"
  }
}

rollup.config.js

import nodeResolve from '@rollup/plugin-node-resolve';

export default {
  input: ['./node_modules/lit-html/lit-html.js'],
  output: {
    dir: 'public/vendor',
    format: 'esm',
  },
  plugins: [nodeResolve()],
};

style.css

/* Inspired by UWP Type Ramp
 *
 * | Title     | Weight           | Size | Line Height | Ratio |
 * |-----------|------------------|------|-------------|-------|
 * | Header    | light (300)      | 46px | 56px        | 3.286 |
 * | Subheader | light (300)      | 34px | 40px        | 2.429 |
 * | Title     | semi-light (350) | 24px | 28px        | 1.714 |
 * | Subtitle  | regular (400)    | 20px | 24px        | 1.429 |
 * | Base      | semi-bold (600)  | 14px | 20px        | 1.000 |
 * | Body      | regular (400)    | 14px | 20px        | 1.000 |
 * | Caption   | regular (400)    | 12px | 14px        | 0.857 |
 *
 * All sizes should be divisible by 4: font-size, margin, padding, width,
 * height, ...
 *
 * Group style properties by type and order them alphabetically like Chrome.
 */

/* Reset */
* {
  margin: 0;
  padding: 0;
}

/* Body */
body,
button,
input,
select,
textarea {
  font-family: OpenSans, Roboto, Verdana, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 20px;
}

/* Header */
h1 {
  margin: 0.4em 0;

  font-size: 46px;
  font-weight: 300;
  line-height: 56px;
}

/* Subheader */
h2 {
  margin: 0.4em 0;

  font-size: 34px;
  font-weight: 300;
  line-height: 40px;
}

/* Title */
h3 {
  margin: 0.4em 0;

  font-size: 24px;
  font-weight: 350;
  line-height: 28px;
}

/* Subtitle */
h4 {
  margin: 0.4em 0;

  font-size: 20px;
  font-weight: 400;
  line-height: 24px;
}

/* Base */
strong {
  font-size: 14px;
  font-weight: 600;
  line-height: 20px;
}

/* Caption */
.caption {
  font-size: 12px;
  font-weight: 400;
  line-height: 14px;
}