Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/poly-glot/vanilla-front-end-starter
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.
https://github.com/poly-glot/vanilla-front-end-starter
accessibility cicd code-quality codereview jest jest-tests percy sonar-scanner sonarqube sonarqube-scanner tdd tdd-javascript vanilajs vanilla-javascript vanilla-js
Last synced: 2 days ago
JSON representation
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.
- Host: GitHub
- URL: https://github.com/poly-glot/vanilla-front-end-starter
- Owner: poly-glot
- License: mit
- Created: 2020-04-04T20:10:32.000Z (over 4 years ago)
- Default Branch: main
- Last Pushed: 2023-07-07T23:10:38.000Z (over 1 year ago)
- Last Synced: 2024-10-27T16:51:57.140Z (about 2 months ago)
- Topics: accessibility, cicd, code-quality, codereview, jest, jest-tests, percy, sonar-scanner, sonarqube, sonarqube-scanner, tdd, tdd-javascript, vanilajs, vanilla-javascript, vanilla-js
- Language: JavaScript
- Homepage:
- Size: 2.45 MB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 10
-
Metadata Files:
- Readme: README.MD
- License: LICENSE
Awesome Lists containing this project
README
# front-end-starter-kit
[](https://codecov.io/gh/poly-glot/vanilla-front-end-starter)
[](https://percy.io/328a6753/vanilla-front-end-starter)
[](https://dashboard.cypress.io/projects/8joug9/runs)
[](https://deepscan.io/dashboard#view=project&tid=8408&pid=10599&bid=148870)
[](https://gitpod.io/#https://github.com/poly-glot/vanilla-front-end-starter)
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.
## Who it is for
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.
## List of tools
- Code Quality: Eslint, Stylelint & Deepscan
- Unit Testing: Jest + Enzyme
- End to End testing: Cypress.io + Percy.io
- CI: Github Actions
# Getting Started
```
npm install
npm start
```
## Adding a new Feature
- 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
## Manual Review Guidelines
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
# Estimation Guide for Static Projects
(TODO)
# Local Development
### Running Github Action
```
# https://github.com/nektos/act
curl https://raw.githubusercontent.com/nektos/act/master/install.sh | sudo bash
act pull_request
act --job ci
```
### Running Sonar
```
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
```
docker build -t vanilla-front-end-starter .
docker run -it --rm -p 5000:5000 vanilla-front-end-starter
```
# Browser Support
2 most recent versions of Chrome, Firefox, Safari & MS Edge.
# Todo
- Feature : CI/CD - Add Docker preview.
- Feature : CI/CD - Add automatic release after every two weeks.
# Github Secrets
- ZEIT_TOKEN
- NOW_ORG_ID
- NOW_PROJECT_ID_STATIC
- PERCY_TOKEN
- CYPRESS_RECORD_KEY
- CODECOV_TOKEN
# Non functional Requirements