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.
- Webpack Dev Server plugin for local development.
- Minification of TypeScript/JavaScript and CSS/SCSS processed files.
- Support for both CSS and SCSS as needed.
- Assets optimization.
- Webpack Bundle Analyzer for visualising script output and usage.
src
└── styles
│ ├── _global.scss
│ └── _variables.scss
│ └── index.scss
├── 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.
- Add your styles here and
- 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:
npm install
Run:
npm run start
This will create a server at http://localhost:8080/
or at the port number specified in the webpack/configuration/config.js file.
Automatically reloads after each file change.
Run:
npm run build
Will output all build files into the dist
folder.
Run:
yarn test
or watch files
yarn test:watch
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 http://localhost:8888/
or at the port number specified using the -p or --port
option via the cli
.