tiagomapmarques / js-boilerplate

Boilerplate for any javascript frontend project

Js Boilerplate ·

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.0
• yarn >= 1.16.0

Quick start:

• yarn
• yarn start

Quick start (docker):

• docker build . -t js-boilerplate
• docker run -p 8000:80 -d js-boilerplate
• visit localhost:8000

Flavors

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	-

Compatibility

• IE9+
• Any evergreen browser (Chrome, Edge, FF, ...)

Note: web-components branch only supports IE11+ and evergreen browsers.

Environments

This project comes with 3 environments setup. Each environment has been setup according to the general needs of each one. They are:

• Local: quick/local usage and debugging
• Development: full app for external server usage and debugging
• Production: full app for production usage

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

Tooling

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 change
• serve [port=8000] [open=true] [spa=true] serves the public folder
• lint 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 update

The following commands are shortcuts only:

• yarn start = yarn watch
• yarn build = yarn build:local
• yarn watch = yarn build:local:watch

Using the project

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.

Examples

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