This is a boilerplate for any frontend project. Below you can find a list of flavors, derived from the original develop
branch. Each flavor will be only one commit long so you can easily diff them and see how to properly set up each of them.
All standards and decisions made regarding this project, its implementation and maintainability are documented here. Remember to read it along with the contributing and code of conduct guidelines.
Dependencies:
node
>= 10.15.0yarn
>= 1.16.0Quick start:
yarn
yarn start
Quick start (docker):
docker build . -t js-boilerplate
docker run -p 8000:80 -d js-boilerplate
localhost:8000
Branch | Base Branch | Objective | Completion | Status |
---|---|---|---|---|
develop |
- | vanilla javascript and/or typescript project | - | |
minimal |
develop |
minimum for a sane frontend app | done | |
electron |
develop |
vanilla electron project | TBD | - |
web-components |
develop |
base for frontend app using web-components | unit-tests | |
jquery |
develop |
base for frontend app using jquery | done | |
vue |
develop |
base for frontend app using vue | done | |
vue-jsx |
vue |
base for frontend app using vue with jsx | done | |
react |
develop |
base for frontend app using react | done | |
inferno |
react |
base for frontend app using inferno | done | |
aurelia |
develop |
base for frontend app using aurelia | TBD | - |
angular |
develop |
base for frontend app using angular | TBD | - |
Note: web-components
branch only supports IE11+ and evergreen browsers.
This project comes with 3 environments setup. Each environment has been setup according to the general needs of each one. They are:
Features | Local | Development | Production |
---|---|---|---|
Live Reload | X | - | - |
Source Map | X | X | - |
Chunks | X | X | X |
All Favicons | - | X | X |
Pre-render | - | X | X |
Critical CSS | - | X | X |
HTML/JS/CSS Minimisation | - | - | X |
Fails on Build Error | - | - | X |
The following are the base commands for this application (yarn
):
build
runs :local
:local
/:dev
/:prod
builds the project and its assets for the local
/dev
/prod
environments respectively
:watch
serves the app on localhost:8000
, watches the files and rebuilds them upon changeserve [port=8000] [open=true] [spa=true]
serves the public
folderlint
performs :code
and :tests
:code
lints the code, style and config according to .eslintrc.code
and .stylelintrc
:tests
lints the tests according to .eslintrc
(which is .eslintrc.code
plus jest config):fix
tries to fix errors and warnings found by lint:code
and lint:tests
test
runs the unit tests for the project (files ending with .spec.js
and .spec.ts
)
:no-cache
runs the tests with no cache:watch
watches the test files and re-runs the tests on any file updateThe following commands are shortcuts only:
yarn start
= yarn watch
yarn build
= yarn build:local
yarn watch
= yarn build:local:watch
The develop
branch will be released incrementally (i.e. through PRs), but the flavor branches will not. Their code will be updated/modified without notice on every release (and/or PR) of the project.
That said, you should always use the develop
branch as the base for your projects. If you want to add a feature/lib already featured on flavors, take a look at it and implement it yourself on your project.
Remember that the flavor branches are just examples on how to implement and adapt this project to other languages/libraries/frameworks.
Project | Objective | Base version | Completion |
---|---|---|---|
weather-app-vue |
example of a vue pwa using this project | v0.11.9 |
WIP |
weather-app-react |
example of a react pwa using this project | TBD | TBD |
weather-app-angular |
example of an angular pwa using this project | TBD | TBD |
weather-app-react-electron |
example of a react desktop application using this project | TBD | TBD |
Author: tiagomapmarques
GitHub: https://github.com/tiagomapmarques/js-boilerplate
#javascript #programming