A vanilla front-end starter kit with tools to support code quality, accessibility, unit testing, end to end testing, continuous integration setup and feature branch testing.
Suitable for responsive sites or simple applications in a fast pace delivery environment with shared nothing front-end architecture using vanilla js. However, code should be isolated & independent where possible to allow us to take benefits of previous projects and experience.
- Code Quality: Eslint, Stylelint & Deepscan
- Unit Testing: Jest + Enzyme
- End to End testing: Cypress.io + Percy.io
- CI: Github Actions
npm install
npm start
- Familiarise yourself with Gitflow and checkout a feature branch from master e.g. feature/awesome-feature.
- Keep your feature branch upto date with master.
- Use Conventional Commits spec e.g. (fix/feat/refactor/refactor!) | Component | Task ID - Small Description
| CSS | Use BEM naming convention |
| JS | Prefix DOM Element class name or ID with "js-" to indicate element is linked to Javascript |
| JS | Use Async/Await over promises |
| JS | Keep Code branching to one level and reduce nested if/else statements |
| JS | Leverage Modern Browser API's instead of bloated libraries or framework e.g. use fetch instead of axios |
(TODO)
# https://github.com/nektos/act
curl https://raw.githubusercontent.com/nektos/act/master/install.sh | sudo bash
act pull_request
act --job ci
docker run -d --name sonarqube -p 9000:9000 -p 9092:9092 sonarqube
docker run -ti -v $(pwd)/src:/root/src --link sonarqube newtmitch/sonar-scanner
docker build -t vanilla-front-end-starter .
docker run -it --rm -p 5000:5000 vanilla-front-end-starter
2 most recent versions of Chrome, Firefox, Safari & MS Edge.
- Feature : CI/CD - Add Docker preview.
- Feature : CI/CD - Add automatic release after every two weeks.
- ZEIT_TOKEN
- NOW_ORG_ID
- NOW_PROJECT_ID_STATIC
- PERCY_TOKEN
- CYPRESS_RECORD_KEY
- CODECOV_TOKEN