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
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
- index.ts client ts file for
- config.js app configuration
- src/ source code folder
-
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
- build.js building process
You can find template changes here.
MIT