This repository contains the base boilerplate which we are going to use as a base to start most of the company front-end project. The motivation is to have a set of tools already configured in order to be able to start right away in a consistent manner. There is going to be changes and updates along the way so keep posted! :)
This boilerplate is made using NextJS, and is coming with the following packages pre-installed and pre-configured:
- React JavaScript library for creating user interfaces
- PropTypes Runtime type checking for React props and similar objects.
- Redux Predictable state container for JavaScript apps
- Redux Thunk Thunk middleware for Redux.
- Immutable Provides many Persistent Immutable data structures
- Axios Promise based HTTP client for the browser and node.js
- Eslint Tool for identifying and reporting on patterns found in ECMAScript/JavaScript code
- Stylelint A mighty, modern linter that helps you avoid errors and enforce conventions in your styles.
- Prettier Prettier is an opinionated code formatter
- react-redux-toastr React toastr message implemented with Redux
- RSuite A suite of React components, sensible UI design, and a friendly development experience.
- styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress
- Jest Delightful JavaScript Testing
[Notes]: Comes with prebuild localization support (defaulted to en/ko) and dark/ligth mode support ready.
[Note2]: Some packages are locked in specific version until fix is available:
"stylelint": "^14.16.1", # breaking changes - migration steps required
"stylelint-config-recommended": "^9.0.0",
"stylelint-config-standard-scss": "^6.1.0",
You need to have yarn installed. Recommand using n to manage node
version more easely. Node version recommanded: v16.17.1
# Install npm
brew install npm
# Install yarn
npm install --global yarn
# Install n
npm install -g n
# Install node version v16.17.1
n 16.17.1This repository can be used as a template
First clone the repository, then install the dependencies:
yarn installCreate a local env setting (using the QA settings)
cp qa.env .env.localStart a live-reload development server:
yarn devGenerate a prod build:
yarn buildThis repository is using Github Actions to deploy to proper environements. In order to deploy to QA
you can force push to the origin qa branch. For production release, just merge to main branch.
This project is running with NextJS so it follows the framework directives (/pages /public
folders). For the rest all files are under /src.
Here is the complete structure:
.
├── .github/ # Workflow files (Github Actions)
├── .husky/ # Husky config and scripts (pre-commits hook)
├── pages/ # Pages folder
├── public/ # Public assets
│ ├── img/ # img assets
├── src/ # Source files
│ ├── components/ # React Compoments
│ ├── context/ # React Contexts
│ ├── locale/ # Locale wording
│ ├── redux/ # Redux modules (use Ducks patern)
│ ├── styles/ # Global styling and pkgs styling imports
│ └── utils/ # Constants, Pkgs init, tools and utils
├── .codeclimate.yml
├── .editorconfig
├── .eslintignore
├── .eslintrc.js
├── .gitignore
├── .lintstagedrc.json
├── .prettierignore
├── .prettierrc
├── .snyk
├── .stylelintignore
├── .stylelintrc
├── babel.config.js
├── jsconfig.json
├── next-config.js
├── package.json
├── yarn.lock
└── README.md
The project is using husky and lint-staged with which are configure to run on git pre-commit
hooks. During this phase the code is going to be checked with Eslint and Prettier and
auto-formated/fixed when possible. A Code Checker Github action is set with the same settings and
will be executed on every Pull Request creation.
Validate Javascript files with Eslint:
yarn jsLintValidate CSS and Styled Component code with StyleLint:
yarn cssLintRun unit-tests suites and scenarios:
yarn test