Skip to content

Boilerplate for any javascript frontend project

License

Notifications You must be signed in to change notification settings

tiagomapmarques/js-boilerplate

Repository files navigation

Js Boilerplate · ci-status

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 - ci-develop
minimal develop minimum for a sane frontend app done ci-minimal
electron develop vanilla electron project TBD -
web-components develop base for frontend app using web-components unit-tests ci-web-components
jquery develop base for frontend app using jquery done ci-jquery
vue develop base for frontend app using vue done ci-vue
vue-jsx vue base for frontend app using vue with jsx done ci-vue-jsx
react develop base for frontend app using react done ci-react
inferno react base for frontend app using inferno done ci-inferno
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