Typescript Webpack Boilerplate

A starter frontend boilerplate built with:

• TypeScript
• Babel (7)
• Webpack (5)
• PostCSS
• Jest
• ESLint
• Stylelint

This also uses lint-staged for running pre-commit checks.

Features

• Support for both TypeScript and JavaScript as needed.
• May be extended to be used with React, Vue.js, or Angular.
• Minification of TypeScript/JavaScript and CSS processed files.
• Assets optimization.
• Webpack Dev Server plugin for local development.
• Webpack Bundle Analyzer for visualising script output and usage.
• CI workflow.

Prerequisites

• NodeJS
• Yarn

Folder structure

src
└── css
│    ├── all
│    └── styles.css
├── index.ts
public
├── assets
├── favicon.ico
└── index.html

• src
  • The entry typescript file is index.ts.
  • The helpers/set-message folder is a sample folder for how to test using Jest.
  • Local files are imported using the '@' alias. See index.ts file for example.
• scr/css
  • Add your styles here and @import them to the entry styles.css file.
• public
  • Edit the index.html in the public folder to suite your needs.
  • Replace the favicon.ico with your own icon.
• public/assets.
  • Add your assets, to the assets folder.

Configuration

You may change the configuration for Webpack within the webpack folder.

Setup

Install dependencies

Run:

  yarn install

Development

Server

Run:

  yarn serve

This will create a server at http://localhost:9000/ or at the port number specified in the webpack/configuration/config.js file.

Automatically reloads after each file change.

Production build

Run:

  yarn build

Will output all build files into the dist folder.

Testing (Jest)

Run:

  yarn test

or watch files

  yarn test:watch

Linting

All files

Run:

  yarn lint

To fix all possible errors automatically run:

  yarn lint:fix

TypeScript (tsc)

Run:

  yarn lint:check-types

There is no automatic fix option for TypeScript.

TypeScript and JavaScript (ESLint)

Run:

  yarn lint:scripts

To fix all possible errors automatically run:

  yarn lint:scripts:fix

Styles (StyleLint)

Run:

  yarn lint:styles

To fix all possible errors automatically run:

  yarn lint:styles:fix

Check bundle size

Run:

  yarn check-size

This will create a server at http://localhost:8888/ or at the port number specified using the -p or --port option via the cli.

License

MIT