create-express-new 1.1.0 → 1.3.0

package/CHANGELOG.md

@@ -6,6 +6,30 @@ All notable changes to this project are documented here. The format is based on
 
 ## [Unreleased]
 
+## [1.3.0] - 2026-10-11
+
+### Added
+
+- `--sass` adds Sass to a web app: a `style.scss` compiled to the CSS the app serves by a `css`
+  script that runs before `start` and `dev`, a `css:watch` script, and a stage in the `--docker`
+  image that compiles the stylesheets. The wizard offers it under Extras
+- Issue templates for bug reports and feature requests
+
+## [1.2.0] - 2026-10-11
+
+### Added
+
+- `--api` with a view engine, such as `--api --view=pug`, generates a web app with a JSON API: a
+  `routes/api.js` router at `/api`, and JSON responses for every error under `/api`. The wizard offers
+  it as "Web app with a JSON API"
+- `--cors-scope` and `--csrf-scope`, for a web app with a JSON API, choose whether other origins can
+  call only the API (default) or the whole app, and whether the API needs the CSRF token (default) or
+  only the pages do; the wizard asks both
+
+### Changed
+
+- `--api` with `--view` is no longer an error, and `--session` and `--csrf` can be used with them
+
 ## [1.1.0] - 2026-10-10
 
 ### Added
@@ -121,6 +145,8 @@ the full list and a table for migrating commands.
 - The `-e/--ejs`, `--hbs`, `--pug` and `-H/--hogan` aliases; use `--view=<engine>`
 - The `debug` package and `DEBUG=...` start instructions
 
-[Unreleased]: https://github.com/w0244079/create-express-new/compare/v1.1.0...HEAD
+[Unreleased]: https://github.com/w0244079/create-express-new/compare/v1.3.0...HEAD
+[1.3.0]: https://github.com/w0244079/create-express-new/compare/v1.2.0...v1.3.0
+[1.2.0]: https://github.com/w0244079/create-express-new/compare/v1.1.0...v1.2.0
 [1.1.0]: https://github.com/w0244079/create-express-new/compare/v1.0.0...v1.1.0
 [1.0.0]: https://github.com/w0244079/create-express-new/releases/tag/v1.0.0

package/README.md

@@ -26,11 +26,11 @@ $ pnpm create express-new@latest
 `npm create express-new@latest` starts the same wizard. It asks for:
 
 - the project directory (`.` for the current directory)
-- a web app or a JSON API, and the view engine
+- a web app, a JSON API or a web app with a JSON API, and the view engine
 - the language: JavaScript, TypeScript or CommonJS
 - optional middleware, and CSRF protection with sessions
 - the request logger
-- extras: a Dockerfile and ESLint
+- extras: a Dockerfile, ESLint and Sass
 - a `.gitignore`
 - the [package manager](#package-manager) the app requires: pnpm, or npm
 
@@ -122,7 +122,40 @@ client errors include their message, server errors only say `Internal Server Err
 and development adds the stack trace. Express runs in development mode unless `NODE_ENV` is set, so
 set `NODE_ENV=production` when you deploy.
 
-`--api` works with `--cjs`, `--ts` and the optional middleware, but not with `--view`.
+`--api` works with `--cjs`, `--ts` and the optional middleware, except `--session`.
+
+### Web apps with a JSON API
+
+`--api` with a view engine, such as `--api --view=pug`, generates a web app that has a JSON API too:
+everything a web app has, and a `routes/api.js` router mounted at `/api`.
+
+```
+my-app
+├── app.js            # the web app, with JSON errors under /api
+├── routes/
+│   ├── api.js        # JSON routes: GET /api and GET /api/users
+│   ├── index.js      # the home page
+│   └── users.js
+├── views/
+└── ...
+```
+
+Every error of a request under `/api` is JSON, in the same shape as a JSON API's: the 404 of an
+unknown route, an error a route throws, and the errors of the middleware before the routes, such as a
+request body that is not valid JSON. Every other error renders the `error` view.
+
+With `--cors` and `--csrf`, you choose which routes they apply to:
+
+- `--cors-scope=api` (default) lets other origins call the API only, not read the pages;
+  `--cors-scope=all` lets them call the whole app.
+- `--csrf-scope=all` (default) requires the CSRF token under `/api` too, for an API your own pages
+  call; `--csrf-scope=pages` leaves the API out, for an API other clients call without the session
+  cookie.
+
+The wizard asks both.
+
+The view engine has to be given, as `--api` alone is a JSON API without views: use `--view=pug` for
+the default one. `--api` does not add an API to a `--no-view` app.
 
 ### Module formats
 
@@ -158,7 +191,8 @@ files with `--api`). Add more with:
 - `--cors`: [cors](https://github.com/expressjs/cors), allowing requests from other origins
 - `--rate-limit`: [express-rate-limit](https://express-rate-limit.mintlify.app/), limiting each client
   to 100 requests every 15 minutes
-- `--session` (web apps only): [express-session](https://github.com/expressjs/session), for `req.session`
+- `--session` (not for JSON APIs without views): [express-session](https://github.com/expressjs/session),
+  for `req.session`
 - `--csrf` (with `--session` and a view engine): [csrf-sync](https://github.com/Psifi-Solutions/csrf-sync)
   CSRF protection for forms
 - `--uploads`: [multer](https://github.com/expressjs/multer) and a `POST /uploads` route that takes one
@@ -203,6 +237,7 @@ The image:
 - is based on `node:22-slim`, the latest release of the minimum supported Node.js version
 - installs only production dependencies, in a build stage of their own, so the package manager is
   not in the final image
+- with `--sass`, compiles the stylesheets in another build stage, so Sass is not in the final image
 - runs the app as the unprivileged `node` user with `NODE_ENV=production`
 - checks `/health` with a `HEALTHCHECK`
 - runs `node` directly, so it receives `SIGTERM` and shuts down gracefully
@@ -216,22 +251,45 @@ The image:
 `--ts` it also adds [typescript-eslint](https://typescript-eslint.io/); as typescript-eslint does not
 support TypeScript 7 yet, these apps use TypeScript 6.
 
+### Sass
+
+`--sass` adds [Sass](https://sass-lang.com/) to a web app: a `public/stylesheets/style.scss` in place
+of `style.css`, compiled to the CSS the app serves.
+
+```bash
+$ pnpm start        # compiles the stylesheets, then starts the app
+$ pnpm dev          # compiles them once, then restarts the app on change
+$ pnpm css:watch    # recompiles them on change, in a second terminal
+```
+
+Sass is a development dependency, so `pnpm start` fails where only production dependencies are
+installed: compile the stylesheets first with `pnpm css`, as the `--docker` image does.
+[Using Sass](docs/sass.md) covers this, the files it ignores and adding Sass to an existing app.
+
 ## Command Line Options
 
     -v, --view <engine>  add view <engine> support (ejs|hbs|pug|twig) (defaults to pug)
         --no-view        use static html instead of view engine
         --api            generate a JSON API, without views or static files
+                         (with --view, a web app with a JSON API at /api)
         --cjs            generate CommonJS modules instead of ES modules
         --ts             generate TypeScript, run directly by Node.js
         --helmet         add helmet middleware for security headers
         --compression    add compression middleware for gzip/brotli responses
         --cookies        add cookie-parser middleware
         --cors           add cors middleware for cross-origin requests
+        --cors-scope <scope>
+                         with --api and --view, the routes other origins can
+                         call (api|all) (defaults to api)
         --rate-limit     add express-rate-limit to limit requests per client
-        --session        add express-session for sessions (not with --api)
+        --session        add express-session for sessions (not with --api alone)
         --csrf           add CSRF protection for forms (needs --session)
+        --csrf-scope <scope>
+                         with --api and --view, the routes that need a CSRF
+                         token (all|pages) (defaults to all)
         --uploads        add multer and an upload route at /uploads
         --logger <name>  request logger (morgan|pino) (defaults to morgan)
+        --sass           add Sass, compiling .scss stylesheets (not with --api alone)
         --docker         add a Dockerfile for a production image
         --lint           add ESLint and a lint script
         --pm <name>      package manager the app requires (pnpm|npm) (defaults to pnpm)
@@ -248,22 +306,24 @@ support TypeScript 7 yet, these apps use TypeScript 6.
 
 This fork started from `express-generator` 4.16.1. It generates Express 5 apps as ES modules, with
 pug in place of jade, for Node.js 22.9 or newer. `--view=<engine>` replaces the `--ejs`, `--hbs` and
-`--pug` aliases, and apps use plain CSS instead of a CSS preprocessor.
+`--pug` aliases, and apps use plain CSS unless you add Sass with `--sass`; the other CSS preprocessors
+are gone.
 
 - [Changes from express-generator](docs/changes-from-express-generator.md): everything added,
   changed and removed, and a table for migrating commands
-- [Using Sass](docs/sass.md): adding Sass to a generated app
+- [Using Sass](docs/sass.md): what `--sass` adds, and adding Sass to an existing app
 
 ## Contributing
 
 ```bash
-$ npm install
-$ npm test       # generates, installs and runs apps for each option
-$ npm run lint
+$ pnpm install
+$ pnpm test      # generates, installs and runs apps for each option
+$ pnpm lint
 ```
 
-The tests install the generated apps with pnpm, so [install pnpm](https://pnpm.io/installation)
-first. The tests that install an npm app are skipped unless your npm is version 12 or newer.
+This repository requires pnpm 11 or newer, as generated apps do by default, so
+[install pnpm](https://pnpm.io/installation) first; npm refuses to install it or run its scripts.
+The tests that install an npm app are skipped unless your npm is version 12 or newer.
 
 See [Maintaining](docs/maintaining.md) for keeping the dependency versions of generated apps current,
 and for releasing.

package/bin/express-cli.js

@@ -5,7 +5,7 @@ import fs from 'node:fs'
 import path from 'node:path'
 import readline from 'node:readline'
 import util from 'node:util'
-import { DEFAULT_PACKAGE_MANAGER, LOGGERS, PACKAGE_MANAGERS, VIEW_ENGINES, checkDestination, createAppName, mergeLines, planApp, scriptCommand } from '../lib/app.js'
+import { CORS_SCOPES, CSRF_SCOPES, DEFAULT_PACKAGE_MANAGER, LOGGERS, PACKAGE_MANAGERS, VIEW_ENGINES, checkDestination, createAppName, mergeLines, planApp, scriptCommand } from '../lib/app.js'
 import { CancelError } from '../lib/prompts.js'
 import { wizard } from '../lib/wizard.js'
 
@@ -19,7 +19,9 @@ const OPTIONS = {
   compression: { type: 'boolean' },
   cookies: { type: 'boolean' },
   cors: { type: 'boolean' },
+  'cors-scope': { type: 'string' },
   csrf: { type: 'boolean' },
+  'csrf-scope': { type: 'string' },
   docker: { type: 'boolean' },
   force: { type: 'boolean', short: 'f' },
   git: { type: 'boolean' },
@@ -33,6 +35,7 @@ const OPTIONS = {
   'no-view': { type: 'boolean' },
   pm: { type: 'string' },
   'rate-limit': { type: 'boolean' },
+  sass: { type: 'boolean' },
   session: { type: 'boolean' },
   ts: { type: 'boolean' },
   uploads: { type: 'boolean' },
@@ -283,6 +286,14 @@ function main (options, done) {
     usage()
     error('option `--pm <name>\' argument missing')
     done(1)
+  } else if (options.corsScope === '') {
+    usage()
+    error('option `--cors-scope <scope>\' argument missing')
+    done(1)
+  } else if (options.csrfScope === '') {
+    usage()
+    error('option `--csrf-scope <scope>\' argument missing')
+    done(1)
   } else {
     // Path
     const destinationPath = options._[0] || '.'
@@ -290,14 +301,9 @@ function main (options, done) {
     // App name
     const appName = createAppName(path.resolve(destinationPath)) || 'hello-world'
 
-    // A JSON API has no view engine
-    if (options.api) {
-      if (typeof options.view === 'string') {
-        usage()
-        error('option `--api\' cannot be used with `--view\'')
-        return done(1)
-      }
-
+    // A JSON API has no view engine, unless one is given with `--view`,
+    // for a web app with a JSON API
+    if (options.api && typeof options.view !== 'string') {
       options.view = false
     }
 
@@ -340,9 +346,16 @@ function main (options, done) {
     }
 
     // Sessions are for web apps, and CSRF protection needs them and views
-    if (options.session && options.api) {
+    if (options.session && options.api && !options.view) {
       usage()
-      error('option `--session\' cannot be used with `--api\'')
+      error('option `--session\' cannot be used with `--api\', unless `--view\' is given too')
+      return done(1)
+    }
+
+    // Sass is for the stylesheets of web apps
+    if (options.sass && options.api && !options.view) {
+      usage()
+      error('option `--sass\' cannot be used with `--api\', unless `--view\' is given too')
       return done(1)
     }
 
@@ -358,6 +371,38 @@ function main (options, done) {
       return done(1)
     }
 
+    // Where CORS and CSRF protection apply is a choice only for a web app
+    // with a JSON API
+    const webApi = Boolean(options.api && options.view)
+
+    if (options.corsScope !== undefined) {
+      if (!CORS_SCOPES.includes(options.corsScope)) {
+        usage()
+        error('unsupported CORS scope `' + options.corsScope + "'")
+        return done(1)
+      }
+
+      if (!webApi || !options.cors) {
+        usage()
+        error('option `--cors-scope\' requires `--cors\', `--api\' and `--view\'')
+        return done(1)
+      }
+    }
+
+    if (options.csrfScope !== undefined) {
+      if (!CSRF_SCOPES.includes(options.csrfScope)) {
+        usage()
+        error('unsupported CSRF scope `' + options.csrfScope + "'")
+        return done(1)
+      }
+
+      if (!webApi || !options.csrf) {
+        usage()
+        error('option `--csrf-scope\' requires `--csrf\', `--api\' and `--view\'')
+        return done(1)
+      }
+    }
+
     // Check the destination before writing anything
     const entries = planApp(appName, options)
     const { blockers, conflicts, leftovers } = checkDestination(destinationPath, entries)
@@ -446,6 +491,8 @@ function parseOptions (argv) {
   options.git = !options['no-git']
   options.keepConfig = Boolean(options['keep-config'])
   options.rateLimit = Boolean(options['rate-limit'])
+  options.corsScope = options['cors-scope']
+  options.csrfScope = options['csrf-scope']
   options.logger ??= 'morgan'
   options.pm ??= DEFAULT_PACKAGE_MANAGER
 
@@ -470,17 +517,25 @@ function usage () {
   console.log('    -v, --view <engine>  add view <engine> support (ejs|hbs|pug|twig) (defaults to pug)')
   console.log('        --no-view        use static html instead of view engine')
   console.log('        --api            generate a JSON API, without views or static files')
+  console.log('                         (with --view, a web app with a JSON API at /api)')
   console.log('        --cjs            generate CommonJS modules instead of ES modules')
   console.log('        --ts             generate TypeScript, run directly by Node.js')
   console.log('        --helmet         add helmet middleware for security headers')
   console.log('        --compression    add compression middleware for gzip/brotli responses')
   console.log('        --cookies        add cookie-parser middleware')
   console.log('        --cors           add cors middleware for cross-origin requests')
+  console.log('        --cors-scope <scope>')
+  console.log('                         with --api and --view, the routes other origins can')
+  console.log('                         call (api|all) (defaults to api)')
   console.log('        --rate-limit     add express-rate-limit to limit requests per client')
-  console.log('        --session        add express-session for sessions (not with --api)')
+  console.log('        --session        add express-session for sessions (not with --api alone)')
   console.log('        --csrf           add CSRF protection for forms (needs --session)')
+  console.log('        --csrf-scope <scope>')
+  console.log('                         with --api and --view, the routes that need a CSRF')
+  console.log('                         token (all|pages) (defaults to all)')
   console.log('        --uploads        add multer and an upload route at /uploads')
   console.log('        --logger <name>  request logger (morgan|pino) (defaults to morgan)')
+  console.log('        --sass           add Sass, compiling .scss stylesheets (not with --api alone)')
   console.log('        --docker         add a Dockerfile for a production image')
   console.log('        --lint           add ESLint and a lint script')
   console.log('        --pm <name>      package manager the app requires (pnpm|npm) (defaults to pnpm)')

package/lib/app.js

@@ -35,6 +35,11 @@ export const PACKAGE_MANAGERS = {
 
 export const DEFAULT_PACKAGE_MANAGER = 'pnpm'
 
+// where the CORS headers and the CSRF protection of a web app with a JSON
+// API apply, with the default first
+export const CORS_SCOPES = ['api', 'all']
+export const CSRF_SCOPES = ['all', 'pages']
+
 // views generated only with some options
 const OPTIONAL_VIEWS = { 'new-user': 'csrf', uploads: 'uploads' }
 
@@ -75,10 +80,11 @@ const TSCONFIG = {
 // not use: code in the other language, the other ESLint config, the pnpm
 // settings and the templates of other view engines
 const ALTERNATIVES = [
-  ...['app', 'bin/www', 'csrf', 'routes/index', 'routes/uploads', 'routes/users', 'test/app.test'].flatMap((file) => [file + '.js', file + '.ts']),
+  ...['app', 'bin/www', 'csrf', 'routes/api', 'routes/index', 'routes/uploads', 'routes/users', 'test/app.test'].flatMap((file) => [file + '.js', file + '.ts']),
   'eslint.config.js',
   'eslint.config.mjs',
   'pnpm-workspace.yaml',
+  'public/stylesheets/style.scss',
   ...fs.readdirSync(path.join(TEMPLATE_DIR, 'views')).map((file) => 'views/' + file)
 ]
 
@@ -107,23 +113,36 @@ export function planApp (name, options) {
     file(to, fs.readFileSync(path.join(TEMPLATE_DIR, from), 'utf-8'), extra)
   }
 
-  // an ignore file, ignoring uploaded files too
+  // an ignore file, ignoring uploaded files and compiled stylesheets too
   function ignore (from) {
-    const contents = fs.readFileSync(path.join(TEMPLATE_DIR, from), 'utf-8')
-    return options.uploads ? contents + '\n# Uploaded files\nuploads/\n' : contents
+    let contents = fs.readFileSync(path.join(TEMPLATE_DIR, from), 'utf-8')
+    if (options.uploads) contents += '\n# Uploaded files\nuploads/\n'
+    if (sass) contents += '\n# Stylesheets compiled from Sass: write styles in .scss files\npublic/stylesheets/*.css\npublic/stylesheets/*.css.map\n'
+    return contents
   }
 
   // Module format
   const esm = !options.cjs
   const dirname = esm ? 'import.meta.dirname' : '__dirname'
 
-  // App kind: a JSON API has no views or static files
-  const api = Boolean(options.api)
+  // App kind: a JSON API has no views or static files, and a web app with
+  // a view engine can have a JSON API too, under /api
+  const api = Boolean(options.api) && !options.view
+  const webApi = Boolean(options.api) && Boolean(options.view)
 
   // Sessions, and CSRF protection using them, are for web apps with views
   const session = Boolean(options.session) && !api
   const csrf = Boolean(options.csrf) && session && Boolean(options.view)
 
+  // In a web app with a JSON API, other origins can call only the API,
+  // unless the whole app is chosen, and CSRF protection covers the API,
+  // unless only the pages are chosen
+  const corsApi = webApi && options.corsScope !== 'all'
+  const csrfSkipApi = webApi && csrf && options.csrfScope === 'pages'
+
+  // Sass, for the stylesheets of apps with static files
+  const sass = Boolean(options.sass) && !api
+
   // File uploads, with an upload form in apps with views
   const uploads = Boolean(options.uploads)
 
@@ -182,6 +201,7 @@ export function planApp (name, options) {
   }
 
   app.locals.dirname = dirname
+  app.locals.webApi = webApi
   app.locals.httpErrors = Boolean(options.view) || api
   app.locals.trustProxy = trustProxy
   app.locals.session = session
@@ -191,6 +211,8 @@ export function planApp (name, options) {
   test.locals.csrf = csrf
   test.locals.uploads = uploads
   test.locals.view = Boolean(options.view)
+  test.locals.webApi = webApi
+  test.locals.csrfSkipApi = csrfSkipApi
 
   // App modules
   app.locals.localModules = Object.create(null)
@@ -216,7 +238,7 @@ export function planApp (name, options) {
   // Cross-origin requests
   if (options.cors) {
     app.locals.modules.cors = 'cors'
-    app.locals.uses.push("cors({\n  // any origin, or only the comma-separated origins in CORS_ORIGIN\n  origin: process.env.CORS_ORIGIN?.split(',').map((origin) => origin.trim()) ?? '*'\n})")
+    app.locals.uses.push((corsApi ? "'/api', " : '') + "cors({\n  // any origin, or only the comma-separated origins in CORS_ORIGIN\n  origin: process.env.CORS_ORIGIN?.split(',').map((origin) => origin.trim()) ?? '*'\n})")
     pkg.dependencies.cors = VERSIONS.cors
   }
 
@@ -258,7 +280,25 @@ export function planApp (name, options) {
     dir('public/stylesheets')
 
     // Stylesheet
-    copy('public/stylesheets/style.css', 'public/stylesheets/style.css')
+    if (sass) {
+      copy('public/stylesheets/style.scss', 'public/stylesheets/style.scss')
+    } else {
+      copy('public/stylesheets/style.css', 'public/stylesheets/style.css')
+    }
+  }
+
+  // Sass compiles each .scss file to the .css file the app serves, before
+  // the app starts: a development dependency, so the stylesheets of an app
+  // installed without them are compiled first, as in the Dockerfile
+  if (sass) {
+    const styles = 'public/stylesheets:public/stylesheets'
+
+    pkg.scripts.css = 'sass ' + styles
+    // recompile on change, alongside the dev script
+    pkg.scripts['css:watch'] = 'sass --watch ' + styles
+    pkg.scripts.prestart = scriptCommand(pm, 'css')
+    pkg.scripts.predev = scriptCommand(pm, 'css')
+    pkg.devDependencies.sass = VERSIONS.sass
   }
 
   // copy route templates
@@ -304,6 +344,16 @@ export function planApp (name, options) {
     pkg.dependencies['http-errors'] = VERSIONS['http-errors']
   }
 
+  // API router, for the JSON routes of a web app
+  if (webApi) {
+    const router = loadTemplate('app/routes/api.js')
+    router.locals.esm = esm
+    file('routes/api.' + ext, router.render())
+
+    app.locals.localModules.apiRouter = './routes/api.' + ext
+    app.locals.mounts.push({ path: '/api', code: 'apiRouter' })
+  }
+
   // Template support
   if (options.view) {
     const view = VIEW_ENGINES[options.view]
@@ -373,6 +423,7 @@ export function planApp (name, options) {
     const module = loadTemplate('app/csrf.js')
     module.locals.esm = esm
     module.locals.uploads = uploads
+    module.locals.skipApi = csrfSkipApi
     file('csrf.' + ext, module.render())
 
     app.locals.localModules.csrf = './csrf.' + ext
@@ -394,7 +445,15 @@ export function planApp (name, options) {
 
   // Package manager settings, protecting installs from compromised packages
   if (pm === 'pnpm') {
-    copy('app/pnpm-workspace.yaml', 'pnpm-workspace.yaml', { config: true })
+    let settings = fs.readFileSync(path.join(TEMPLATE_DIR, 'app/pnpm-workspace.yaml'), 'utf-8')
+
+    // Sass's optional file watcher has an install script, which would stop
+    // the install, and which it works without
+    if (sass) {
+      settings += '\n# Do not run the install script of the file watcher Sass uses, which works\n# without it.\nallowBuilds:\n  \'@parcel/watcher\': false\n'
+    }
+
+    file('pnpm-workspace.yaml', settings, { config: true })
   } else {
     copy('app/npmrc', '.npmrc', { config: true })
   }
@@ -405,6 +464,8 @@ export function planApp (name, options) {
     dockerfile.locals.name = name
     dockerfile.locals.www = www
     dockerfile.locals.uploads = uploads
+    dockerfile.locals.sass = sass
+    dockerfile.locals.css = scriptCommand(pm, 'css')
     dockerfile.locals.pm = pm
     // the exact package manager version, for repeatable image builds
     dockerfile.locals.pmVersion = VERSIONS[pm].replace(/^\^/, '')
@@ -550,8 +611,7 @@ export function scriptCommand (pm, script) {
 
 export function mergeLines (existing, generated) {
   const have = new Set(existing.split(/\r?\n/).map((line) => line.trim()))
-  const missing = generated.split('\n')
-    .map((line) => line.trim())
+  const missing = [...new Set(generated.split('\n').map((line) => line.trim()))]
     .filter((line) => line && !line.startsWith('#') && !have.has(line))
 
   if (!missing.length) return existing

package/lib/wizard.js

@@ -47,14 +47,20 @@ export async function wizard (io) {
         initial: answers.kind,
         choices: [
           { label: 'Web app', value: 'web', hint: 'server-rendered views' },
-          { label: 'JSON API', value: 'api', hint: 'no views or static files' }
+          { label: 'JSON API', value: 'api', hint: 'no views or static files' },
+          { label: 'Web app with a JSON API', value: 'both', hint: 'under /api' }
         ]
       })
     },
     {
       name: 'view',
-      when: () => answers.kind === 'web',
-      ask: (step) => step.ask(select, { message: 'View engine', initial: answers.view, choices: VIEWS })
+      when: () => answers.kind !== 'api',
+      ask: (step) => step.ask(select, {
+        message: 'View engine',
+        initial: answers.view,
+        // the pages of a web app with a JSON API need a view engine
+        choices: answers.kind === 'both' ? VIEWS.filter((view) => view.value !== false) : VIEWS
+      })
     },
     {
       name: 'language',
@@ -80,16 +86,40 @@ export async function wizard (io) {
           { label: 'cors', value: 'cors', hint: 'cross-origin requests' },
           { label: 'express-rate-limit', value: 'rate-limit', hint: 'limit requests per client' },
           // sessions are for web apps
-          ...(answers.kind === 'web' ? [{ label: 'express-session', value: 'session', hint: 'req.session' }] : []),
+          ...(answers.kind !== 'api' ? [{ label: 'express-session', value: 'session', hint: 'req.session' }] : []),
           { label: 'multer', value: 'uploads', hint: 'file uploads at /uploads' }
         ]
       })
     },
+    {
+      name: 'corsScope',
+      when: () => answers.kind === 'both' && answers.middleware.includes('cors'),
+      ask: (step) => step.ask(select, {
+        message: 'Other origins can call',
+        initial: answers.corsScope,
+        choices: [
+          { label: 'The API only', value: 'api', hint: 'routes under /api' },
+          { label: 'The whole app', value: 'all', hint: 'the pages too' }
+        ]
+      })
+    },
     {
       name: 'csrf',
-      when: () => answers.kind === 'web' && answers.view !== false && answers.middleware.includes('session'),
+      when: () => answers.kind !== 'api' && answers.view !== false && answers.middleware.includes('session'),
       ask: (step) => step.ask(confirm, { message: 'Protect forms with CSRF tokens?', initial: answers.csrf ?? true })
     },
+    {
+      name: 'csrfScope',
+      when: () => answers.kind === 'both' && answers.middleware.includes('session') && answers.csrf === true,
+      ask: (step) => step.ask(select, {
+        message: 'CSRF tokens for the API',
+        initial: answers.csrfScope,
+        choices: [
+          { label: 'Required', value: 'all', hint: 'your pages call the API' },
+          { label: 'Not required', value: 'pages', hint: 'other clients call it, without the session cookie' }
+        ]
+      })
+    },
     {
       name: 'logger',
       ask: (step) => step.ask(select, {
@@ -108,7 +138,9 @@ export async function wizard (io) {
         initial: answers.extras,
         choices: [
           { label: 'Dockerfile', value: 'docker', hint: 'production image with a /health check' },
-          { label: 'ESLint', value: 'lint', hint: 'with a lint script' }
+          { label: 'ESLint', value: 'lint', hint: 'with a lint script' },
+          // stylesheets are for web apps
+          ...(answers.kind !== 'api' ? [{ label: 'Sass', value: 'sass', hint: 'stylesheets compiled from .scss files' }] : [])
         ]
       })
     },
@@ -305,18 +337,22 @@ function eraseText (io, printed) {
 
 function toOptions (answers) {
   const { directory, kind, language, middleware = [], extras = [] } = answers
-  const view = kind === 'web' ? answers.view : false
-  const session = kind === 'web' && middleware.includes('session')
+  const view = kind === 'api' ? false : answers.view
+  const session = kind !== 'api' && middleware.includes('session')
+  const csrf = session && view !== false && answers.csrf === true
 
   return {
     _: [directory.dir],
     '!': [],
-    api: kind === 'api',
+    api: kind !== 'web',
     cjs: language === 'cjs',
     compression: middleware.includes('compression'),
     cookies: middleware.includes('cookies'),
     cors: middleware.includes('cors'),
-    csrf: session && view !== false && answers.csrf === true,
+    // the choices of a web app with a JSON API
+    ...(kind === 'both' && middleware.includes('cors') && { corsScope: answers.corsScope ?? 'api' }),
+    csrf,
+    ...(kind === 'both' && csrf && { csrfScope: answers.csrfScope ?? 'all' }),
     docker: extras.includes('docker'),
     force: directory.force,
     git: answers.git,
@@ -327,6 +363,7 @@ function toOptions (answers) {
     logger: answers.logger ?? 'morgan',
     pm: answers.pm ?? DEFAULT_PACKAGE_MANAGER,
     rateLimit: middleware.includes('rate-limit'),
+    sass: kind !== 'api' && extras.includes('sass'),
     session,
     ts: language === 'ts',
     uploads: middleware.includes('uploads'),
@@ -345,7 +382,8 @@ export function toCommand (options) {
   const args = [pm, 'create', 'express-new@latest', quote(options._[0])]
   const flags = []
 
-  if (options.api) flags.push('--api')
+  // a JSON API has no view engine, unless one is given, the default included
+  if (options.api) flags.push('--api', ...(options.view ? ['--view=' + options.view] : []))
   else if (options.view === false) flags.push('--no-view')
   else if (options.view !== 'pug') flags.push('--view=' + options.view)
 
@@ -355,11 +393,14 @@ export function toCommand (options) {
   if (options.compression) flags.push('--compression')
   if (options.cookies) flags.push('--cookies')
   if (options.cors) flags.push('--cors')
+  if (options.corsScope === 'all') flags.push('--cors-scope=all')
   if (options.rateLimit) flags.push('--rate-limit')
   if (options.session) flags.push('--session')
   if (options.csrf) flags.push('--csrf')
+  if (options.csrfScope === 'pages') flags.push('--csrf-scope=pages')
   if (options.uploads) flags.push('--uploads')
   if (options.logger && options.logger !== 'morgan') flags.push('--logger=' + options.logger)
+  if (options.sass) flags.push('--sass')
   if (options.docker) flags.push('--docker')
   if (options.lint) flags.push('--lint')
   if (pm !== DEFAULT_PACKAGE_MANAGER) flags.push('--pm=' + pm)

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "create-express-new",
   "description": "Express 5 application generator: ESM, TypeScript and CommonJS app templates. A modern successor to express-generator.",
-  "version": "1.1.0",
+  "version": "1.3.0",
   "author": "Michael Caines (https://github.com/w0244079)",
   "contributors": [
     "TJ Holowaychuk <tj@vision-media.ca>",
@@ -27,7 +27,10 @@
     "web",
     "api"
   ],
-  "repository": "github:w0244079/create-express-new",
+  "repository": {
+    "type": "git",
+    "url": "github:w0244079/create-express-new"
+  },
   "homepage": "https://github.com/w0244079/create-express-new#readme",
   "bugs": "https://github.com/w0244079/create-express-new/issues",
   "license": "MIT",
@@ -41,6 +44,7 @@
   },
   "devDependencies": {
     "eslint": "^9.39.5",
+    "fast-check": "^4.10.2",
     "mocha": "^12.0.3",
     "neostandard": "^0.13.0",
     "supertest": "^7.3.0",
@@ -50,6 +54,13 @@
   "engines": {
     "node": ">=22.9"
   },
+  "devEngines": {
+    "packageManager": {
+      "name": "pnpm",
+      "version": ">=11",
+      "onFail": "error"
+    }
+  },
   "files": [
     "CHANGELOG.md",
     "LICENSE",
@@ -61,7 +72,6 @@
     "lint": "eslint .",
     "test": "mocha --reporter spec --bail --check-leaks test/",
     "test-ci": "mocha --reporter spec --check-leaks test/",
-    "versions": "node scripts/versions.js",
-    "prepublishOnly": "npm run lint && npm run test-ci"
+    "versions": "node scripts/versions.js"
   }
-}
+}

package/templates/app/Dockerfile.ejs

@@ -36,6 +36,20 @@ COPY package*.json .npmrc ./
 RUN npm ci --omit=dev
 <% } -%>
 
+<% if (sass) { -%>
+# Stylesheets are compiled in their own stage too, as Sass is a development
+# dependency, which the final image does not have.
+FROM dependencies AS stylesheets
+
+<% if (pm === 'pnpm') { -%>
+RUN pnpm install --frozen-lockfile
+<% } else { -%>
+RUN npm ci
+<% } -%>
+COPY public/stylesheets ./public/stylesheets
+RUN <%- css %>
+
+<% } -%>
 FROM node:22-slim
 
 ENV NODE_ENV=production
@@ -47,6 +61,11 @@ COPY --from=dependencies /app/node_modules ./node_modules
 # copy the app owned by the unprivileged node user, which runs it, so it can
 # read the files whatever their permissions on the build machine
 COPY --chown=node:node . .
+<% if (sass) { -%>
+
+# the stylesheets compiled above
+COPY --chown=node:node --from=stylesheets /app/public/stylesheets ./public/stylesheets
+<% } -%>
 <% if (uploads) { -%>
 
 # a folder for uploaded files that the node user can write to; files saved

package/templates/app/app.js.ejs

@@ -84,7 +84,31 @@ app.use((req, res, next) => {
   next(createError(404));
 });
 
+<% if (webApi) { -%>
+// error handler for the API, responding with JSON to every error of a
+// request under /api, including those of the middleware above
+<% if (ts) { -%>
+app.use('/api', (err: HttpError, req: Request, res: Response, next: NextFunction) => {
+<% } else { -%>
+app.use('/api', (err, req, res, next) => {
+<% } -%>
+  const status = err.status || 500;
+  const development = req.app.get('env') === 'development';
+
+  // log server errors, which are bugs, but not client errors
+  if (status >= 500) console.error(err);
+
+  // only expose client error messages, or every error in development
+  res.status(status).json({
+    error: err.expose || development ? err.message : 'Internal Server Error',
+    ...(development && { stack: err.stack })
+  });
+});
+
+// error handler for the pages
+<% } else { -%>
 // error handler
+<% } -%>
 <% if (ts) { -%>
 app.use((err: HttpError, req: Request, res: Response, next: NextFunction) => {
 <% } else { -%>

package/templates/app/csrf.js.ejs

@@ -7,8 +7,17 @@ const { csrfSync } = require('csrf-sync');
 // CSRF protection for requests that change data, which must send the token
 // in a _csrf form field or an x-csrf-token header (GET is not checked)
 const csrf = csrfSync({
-  getTokenFromRequest: (req) => req.body?._csrf ?? req.get('x-csrf-token')<%- uploads ? ',' : '' %>
-<% if (uploads) { -%>
+  getTokenFromRequest: (req) => req.body?._csrf ?? req.get('x-csrf-token')<%- uploads || skipApi ? ',' : '' %>
+<% if (uploads && skipApi) { -%>
+  // uploads check the token themselves, as multer reads their form, and the
+  // API is not protected, so its routes must not trust the session cookie:
+  // authenticate them another way, such as a token in a header
+  skipCsrfProtection: (req) => req.path === '/uploads' || /^\/api(\/|$)/i.test(req.path)
+<% } else if (skipApi) { -%>
+  // the API is not protected, so its routes must not trust the session
+  // cookie: authenticate them another way, such as a token in a header
+  skipCsrfProtection: (req) => /^\/api(\/|$)/i.test(req.path)
+<% } else if (uploads) { -%>
   // uploads check the token themselves, as multer reads their form
   skipCsrfProtection: (req) => req.path === '/uploads'
 <% } -%>

package/templates/app/routes/api.js.ejs

@@ -0,0 +1,26 @@
+<% if (esm) { -%>
+import express from 'express';
+<% } else { -%>
+const express = require('express');
+<% } -%>
+
+const router = express.Router();
+
+// JSON routes, mounted at /api: errors under /api, such as the 404 of a
+// route that is not here, respond with JSON too (see the app's error handlers)
+
+/* GET the API's welcome message. */
+router.get('/', (req, res) => {
+  res.json({ message: 'Welcome to Express' });
+});
+
+/* GET users listing. */
+router.get('/users', (req, res) => {
+  res.json([]);
+});
+
+<% if (esm) { -%>
+export default router;
+<% } else { -%>
+module.exports = router;
+<% } -%>

package/templates/app/test/app.test.js.ejs

@@ -194,6 +194,54 @@ describe('app', () => {
   it('responds with 404 for unknown routes', async () => {
     const res = await fetch(`${baseUrl}/does-not-exist`);
     assert.strictEqual(res.status, 404);
+<% if (webApi) { -%>
+    assert.match(res.headers.get('content-type') ?? '', /text\/html/);
+<% } -%>
+  });
+<% if (webApi) { -%>
+
+  it('responds to GET /api', async () => {
+    const res = await fetch(`${baseUrl}/api`);
+    assert.strictEqual(res.status, 200);
+    assert.deepStrictEqual(await res.json(), { message: 'Welcome to Express' });
   });
+
+  it('responds to GET /api/users', async () => {
+    const res = await fetch(`${baseUrl}/api/users`);
+    assert.strictEqual(res.status, 200);
+    assert.deepStrictEqual(await res.json(), []);
+  });
+
+  it('responds with a JSON 404 for unknown API routes', async () => {
+    const res = await fetch(`${baseUrl}/api/does-not-exist`);
+    assert.strictEqual(res.status, 404);
+    assert.match(res.headers.get('content-type') ?? '', /application\/json/);
+    assert.strictEqual((await res.json()).error, 'Not Found');
+  });
+
+  it('responds with a JSON error for an invalid API request body', async () => {
+    const res = await fetch(`${baseUrl}/api/users`, {
+      method: 'POST',
+      headers: { 'content-type': 'application/json' },
+      body: '{'
+    });
+    assert.strictEqual(res.status, 400);
+    assert.match(res.headers.get('content-type') ?? '', /application\/json/);
+  });
+<% if (csrf && csrfSkipApi) { -%>
+
+  it('does not ask API posts for a CSRF token', async () => {
+    const res = await fetch(`${baseUrl}/api/does-not-exist`, { method: 'POST' });
+    assert.strictEqual(res.status, 404);
+  });
+<% } else if (csrf) { -%>
+
+  it('rejects API posts without a CSRF token, with a JSON error', async () => {
+    const res = await fetch(`${baseUrl}/api/users`, { method: 'POST' });
+    assert.strictEqual(res.status, 403);
+    assert.match(res.headers.get('content-type') ?? '', /application\/json/);
+  });
+<% } -%>
+<% } -%>
 });
 <% } -%>

package/templates/public/stylesheets/style.scss

@@ -0,0 +1,10 @@
+$link-color: #00B7FF;
+
+body {
+  padding: 50px;
+  font: 14px "Lucida Grande", Helvetica, Arial, sans-serif;
+}
+
+a {
+  color: $link-color;
+}

package/templates/versions.json

@@ -30,6 +30,7 @@
     "pino-pretty": "^13.1.3",
     "pnpm": "^12.9.1",
     "pug": "^3.0.4",
+    "sass": "^1.105.1",
     "twig": "^3.0.0",
     "typescript": "^7.0.2",
     "typescript-eslint": "^8.71.0",