A starter frontend boilerplate built with:
This also uses lint-staged for running pre-commit checks.
- 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.
src
├── assets
├── components
└── ...
├── index.ts
public
├── assets
└── 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.
- 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.
Run:
yarn install
Run:
yarn serve
This will create a server at https://localhost:9000/
or at the port number specified in the webpack/configuration/config.js file.
Automatically reloads after each file change.
Run:
yarn build
Will output all build files into the dist
folder.
Run:
yarn lint:all
To fix all possible errors automatically run:
yarn lint:all: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 https://localhost:8888/
or at the port number specified using the -p or --port
option via the cli
.