create-express-new 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -6,6 +6,15 @@ 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
@@ -136,7 +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.2.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

@@ -30,7 +30,7 @@ $ pnpm create express-new@latest
 - 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
 
@@ -237,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
@@ -250,6 +251,21 @@ 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)
@@ -273,6 +289,7 @@ support TypeScript 7 yet, these apps use TypeScript 6.
                          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)
@@ -289,11 +306,12 @@ 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
 

package/bin/express-cli.js

@@ -35,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' },
@@ -351,6 +352,13 @@ function main (options, done) {
       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)
+    }
+
     if (options.csrf && !options.session) {
       usage()
       error('option `--csrf\' requires `--session\'')
@@ -527,6 +535,7 @@ function usage () {
   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

@@ -84,6 +84,7 @@ const ALTERNATIVES = [
   'eslint.config.js',
   'eslint.config.mjs',
   'pnpm-workspace.yaml',
+  'public/stylesheets/style.scss',
   ...fs.readdirSync(path.join(TEMPLATE_DIR, 'views')).map((file) => 'views/' + file)
 ]
 
@@ -112,10 +113,12 @@ 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
@@ -137,6 +140,9 @@ export function planApp (name, options) {
   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)
 
@@ -274,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
@@ -421,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 })
   }
@@ -432,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(/^\^/, '')

package/lib/wizard.js

@@ -138,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' }] : [])
         ]
       })
     },
@@ -361,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'),
@@ -397,6 +400,7 @@ export function toCommand (options) {
   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.2.0",
+  "version": "1.3.0",
   "author": "Michael Caines (https://github.com/w0244079)",
   "contributors": [
     "TJ Holowaychuk <tj@vision-media.ca>",

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/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",