To launch the application you need to install the followings applications:
npm install -g yarn
Launch the following command to start the application:
yarn start
Command | Description |
---|---|
yarn start | Lift the application in local mode |
yarn dev | Generate a build in dev mode |
yarn prod | Generate a build in prod mode |
yarn analyse | Launch a dashboard with the situation of the application in prod mode |
yarn test | Launch unit testing |
yarn test:coverage | Generate a code coverage report in coverage directory |
yarn e2e | Enable End to End testing |
yarn docs | Add documentation in the readme file |
yarn pretest | Fix eslint errors |
.
config # Define constants to use across the application
config.dev.js
config.jest.js
config.local.js
config.prod.js
Demo # Demo template
index.pug
scripts # Webpack setup for differents enviroments
webpack.analyse.js
webpack.common.js
webpack.dev.js
webpack.local.js
webpack.prod.js
src
assets # Images, fonts and others media
polyfills # Polyfills configuration
component.js # Component code
component.spec # Component unit testing
component.e2e # Component end to end testing
component.scss # Component styles
component.pug # Component template
index.js # Bootstrap of the applicaton
babel.config.js # Babel setup
.eslintignore # Specifies files to ignore for Eslint
.eslintrc # Eslint setup
.gitignore # Specifies files to ignore for Git
cypress.json # Cypress setup
package.json
README.md
You can set up constants to use in base the enviroment. There is a directory called config where you can find 4 files one for every enviroment available. Below you can see an example:
//File: config/config.local.js
module.exports = {
message: 'This message arrive from config/local.config.js'
};
//File: src/component.js
import config from 'config';
export default class Component {
constructor(selector) {
this.myEl = document.querySelector(selector);
this.message = config.message;
}
}
For Unit Testing we use Jest because is easy to integrate and you have many features out the box like (assertions, async functions, ecc).
Launch unit testing
yarn test
Launch Code Coverage Test
yarn test:coverage
For E2E testing we use Cypress. Enable E2E testing:
yarn e2e
In development enviroment we generate an unminified version of css and javascript. To generate a build for develpment you have to launch the following command:
yarn dev
In production we generate a minified version of css and javascript. To generate a build for production you have to launch the following command:
yarn prod
We support documentation a tool that use the JSDoc format. Launch the following command to generate the documentation for this application.
yarn docs
Features supported:
Generics
Arrays
Objects
Strings
✅ Chrome ✅ Firefox ✅ Safari ✅ Edge ✅ IE11