Build a Node.js MVC web app with Webpack, Babel, TypeScript or ES, critical CSS. SEO & performance friendly

• Express & MVC pattern
• Handlebars view engine & partial views
• Helmet for security
• Babel & webpack to build the client
• Rollup to build the Express app
• TypeScript & ES
• Tailwind
• CSS, SASS with Autoprefixer
• Critical CSS
• HMR & Live reload
• ES modules
• Sitemap

• Getting started
• Project structure
• What's new

Download the code & configure the project in config.js file.

Node.js 16 or higher is required.

npm install

npm run dev

npm run build

• App

  • src/ source code folder
    • src/app.ts Express entry point
    • src/app.controller.ts controllers file
    • src/views/ views folder
    • src/routes/ routes folder
      • index.ts client ts file for views/index.html
      • index.scss client css file for views/index.html
  • config.js app configuration

• Scripts & configuration files

  • build.js building process
    • runs Rollup to build the app
    • runs webpack to generate client bundles
    • runs critical to inline critical CSS
    • runs sitemap to generate sitemap.xml
  • scripts/ scripts used by the building process
  • babel.config.js Babel configuration
  • webpack.config.dev.js webpack configuration for development
  • webpack.config.prod.js webpack configuration for building client bundles
  • rollup.config.js Rollup configuration for building the Express app
  • .browserslistrc target browsers for Autoprefixer
  • postcss.config.cjs PostCSS configuration file to use Autoprefixer & Tailwind
  • tailwind.config.cjs Tailwind configuration
  • tsconfig TypeScript configuration file
  • package.json npm options & scripts

You can find template changes here.

MIT