Front-end Boilerplate

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
reactstrap Easy to use React Bootstrap 4 components ... And even more :)
styled-components Visual primitives for the component age. Use the best bits of ES6 and CSS to style your apps without stress
Serverless-NextJS A zero configuration Next.js serverless component for AWS Lambda@Edge aiming for full feature parity. and some others always usefull and cool packages such as BigNumber, Moment, Lodash/fp ... [Note]: for more details check the package.json file.

[Notes]: Comes with prebuild localization support (defaulted to en/ko) and dark/ligth mode support ready. Recommanded NodeJS version:

for local dev v14.15.4
for hosting/deployment v12.14.1

Requirements
Installation
Development Workflow

Requirements

You need to have npm or yarn installed. Recommand using n to manage node version more easely. Node version recommanded: v14.15.4

brew install npm

For deployment you will need a AWS account. Serverless-NextJS is used for CI/CD.

Installation

This repository can be used as a template

First clone the repository, then install the dependencies:

# With Yarn
yarn install

# With npm
npm install

Development Workflow

Create a local env setting (using the QA settings)

cp qa.env .env.local

Start a live-reload development server:

npm run dev

Generate a prod build:

npm run build

This 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.

Files/Folders structures

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/
├── node_modules/
├── build/                     # Build Folders for serverless config files
│ ├── production/              # Production Env config files (serverless + .env)
│ ├── qa/                      # QA Env config files (serverless + .env)
├── pages/                     # Pages folder
├── public/                    # Public assets
│ ├── img/                     # img assets
├── src/                       # Source files
│ ├── components/              # React Compoments
│ ├── context/                 # React Contexts
│ ├── locale/                  # Locale wording
│ ├── redux/                   # Redux stuffs (use Ducks patern)
│ ├── styles/                  # Global styling and pkgs styling imports
│ └── utils/                   # Constants, Pkgs clients init, tools and utils
├── .eslintrc.js
├── .eslintignore
├── .firebaserc
├── .gitignore
├── .prettierignore
├── .prettierrc
├── firebase.json
├── jsconfig.json
├── next-config.js
├── package.json
├── package-lock.json
└── README.md

Tools and scripts

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:

npm run jsLint

Validate CSS and Styled Component code with StyleLint:

npm run cssLint