React Redux Base

Commands

Run the app. yarn start or npm start
Build the app. yarn build or npm run build
Lint the app. yarn lint or npm run lint
Test the app. yarn test or npm run test, for UI option yarn test:open or npm run test:open,
Run the app with SSR. yarn ssr or npm run ssr

Getting Started

Clone the repository
Install dependencies: yarn or npm install
Create the environment variables files in root folder(.env.dev, .env.staging and .env.prod):

.env.example example:

  API_URL=http://your-api-url.com
  AWS_BUCKET=bucket
  AWS_REGION=region
  AWS_ACCESS_KEY_ID=key_id
  AWS_SECRET_ACCESS_KEY=secret_key

Start the dev server: yarn start or npm start -s

Running script with different environments

To change the set of environment variables for a script it's needed to run ENV=my_environment before the script.

For example: ENV=staging yarn build

Configuring Code Climate

After adding the project to CC, go to Repo Settings
On the Test Coverage tab, copy the Test Reporter ID
Replace the current value of CC_TEST_REPORTER_ID on the config.yml file (.circleci/config.yml) with the one you copied from CC

Initial Machine Setup

Install Node 7.0.0 or greater, 10.14.2 LTS preferred Project is currently set to node version 10.14.2 LTS. Make sure that you are using the node version specified in the package.json, if you prefer to use a different one you can change it there.

Install Yarn - Fast, reliable, and secure package manager

Redux setup

The base makes use of the redux-toolkit package. This makes working with, and tracking the status of async side effect easier. Learn more about this in the redux-toolkit docs.

Server Side Rendering

This base is already set up with a Node server for SSR.

The command yarn ssr will compile the server and client.

Fetching data

The server is prepared to fetch data directly from the backend before rendering the HTML.

Deploying to AWS S3

Add the environment variables for each .env AWS_BUCKET, AWS_REGION, AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY
Run the command to deploy with an environment ENV=your_environment yarn deploy

Deploying to Heroku

Add all the environment variables in .env to Heroku
Add the env variable NPM_CONFIG_PRODUCTION=false to Heroku
Deploy your branch to Heroku

Preview links on PR's

Github action which implements a preview link generator

Setup

Set AWS_ACCESS_KEY_ID, AWS_SECRET_ACCESS_KEY and API_URL_PREVIEW on the secrets settings page of the repository

Technologies

Tech	Description
React	Fast, composable client-side components.
Redux	Enforces unidirectional data flows and immutable, hot reloadable store. Supports time-travel debugging.
React Router 5	A complete routing library for React
Babel	Compiles ES6 to ES5. Enjoy the new version of JavaScript today.
Webpack 4	Bundles npm packages and our JS into a single file. Includes hot reloading via React Hot Loader.
Express	Fast, unopinionated, minimalist web framework for node.
Cypress	Automated integration tests. Default way of testing.
Jest	Automated tests with built-in expect assertions and Enzyme for DOM testing without a browser using Node.
ESLint	Lint JS. Reports syntax and style issues. Using eslint-config-airbnb for the airbnb style guides.
SASS	Compiled CSS styles with variables, functions, and more.
PostCSS	Transform styles with JS plugins. Used to autoprefix CSS
Stylelint	Modern CSS linter that helps you enforce consistent conventions and avoid errors in your stylesheets.
Redux Persist	Persist and rehydrate your redux store
Immer	Allows you to work with immutable state in a more convenient way.
React Intl	Localization for language support.
Rootstrap UI	Rootstrap UI is the components & styles library to build user interfaces

License

React Redux Base is available under the MIT license. See the LICENSE file for more info.

Credits

React Redux Base is maintained by Rootstrap with the help of our contributors.

mojouy/react-base