A starter frontend boilerplate built with:

• TypeScript
• Babel
• Webpack 5
• PostCSS
• Jest
• ESLint
• Stylelint

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

• 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.

• NodeJS
• Yarn

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.

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

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

Run:

  yarn install

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.

Run:

  yarn build

Will output all build files into the dist folder.

Run:

  yarn test

or watch files

  yarn test:watch

Run:

  yarn lint

To fix all possible errors automatically run:

  yarn lint:fix

Run:

  yarn lint:check-types

There is no automatic fix option for TypeScript.

Run:

  yarn lint:scripts

To fix all possible errors automatically run:

  yarn lint:scripts:fix

Run:

  yarn lint:styles

To fix all possible errors automatically run:

  yarn lint:styles:fix

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.

Released under MIT by @VD39.