Static Web App

Build a static web app with Webpack, Babel, TypeScript or ES6, critical CSS, differential loading & Web Components. SEO & performance friendly

Live example

Features

• Babel & webpack
• TypeScript & ES6
• CSS, SASS & Autoprefixer
• ESLint
• Critical CSS
• Differential loading
• One page or Multi page
• Web Components
• Sitemap
• End-to-end testing with Cypress

Contents

• Getting started
• Project structure
• What's new

Getting started

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

Installation

For development, Node.js 12 or higher is required.

npm install

Start DevServer

npm start

Test

npm test

Build

npm run build

Project structure

• Site

  • src/ source code folder
  • config.js app configuration

• Scripts & configuration files

  • build.js building process
    • runs webpack to generate es2015 bundles
    • runs webpack to generate es5 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
    • modern env for development & production (es2015)
    • legacy env for production (es5)
  • webpack.config.dev.js webpack configuration for development
  • webpack.config.prod.js webpack configurations for building es2015 & es5 bundles
  • .browserslistrc target browsers for es5 bundles & Autoprefixer
  • postcss.config.js PostCSS configuration file to use Autoprefixer
  • .eslintrc.js ESLint configuration file
  • tsconfig TypeScript configuration file
  • package.json npm options & scripts

• Testing:

  • cypress/ Cypress folder with test files
  • cypress.json Cypress configuration file

What's new

You can find template changes here.

License

MIT