Typescript Webpack Boilerplate

A starter frontend boilerplate built with:

• TypeScript
• Babel
• 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.
• Loads environment variables via .env file.
• 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

Webpack

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

Environment Variables

You may set the following in your .env for setting up your project (default values shown).

PORT_NUMBER=9000
HOST_NAME=localhost
TITLE=TypeScript Webpack Boilerplate

Setup

Install dependencies

Run:

  yarn install

Development

Server

Run:

  yarn serve

This will create a server at http://localhost:9000/ or server data specified in your .env 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

Released under MIT by @VD39.