Skip to content
No description, website, or topics provided.
JavaScript CSS HTML
Branch: master
Clone or download
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci remove store artifacts Jul 24, 2019
__mocks__
cypress Switch redux forms for a custom form hook Nov 6, 2019
docs Update README.md, add inline doc Nov 14, 2019
server
src Use shallow equal (#161) Nov 28, 2019
tools Upgrade to babel 7 (#132) Aug 8, 2019
webpack Add creators and middleware Nov 14, 2019
.babelrc Bump dependency versions (#137) Aug 26, 2019
.codeclimate.yml Added codeclimate config. Jul 3, 2019
.editorconfig
.env.test adjust envs Jun 7, 2019
.env.test_e2e.example adjust envs Jun 7, 2019
.eslintignore cypress May 22, 2019
.eslintrc Remove semi rule on eslintrc Nov 21, 2019
.gitignore Bump dependency versions (#137) Aug 26, 2019
.npmrc Remove package-lock May 4, 2018
.nvmrc Add createAction helper Jun 26, 2019
.prettierrc Removes prettier rule and and eslint one Aug 27, 2019
.stylelintrc update packages May 4, 2018
LICENSE.md Prepare repo for public release Jun 2, 2018
Procfile ssr May 7, 2018
README.md
cypress.json Make cypress use process.env so the env variables are not duplicated May 31, 2019
jsconfig.json Add creators and middleware Nov 14, 2019
package.json Move some redux utilities to a new package Nov 15, 2019
yarn.lock Move some redux utilities to a new package Nov 15, 2019

README.md

React Redux Base

Maintainability Test Coverage CircleCI Dependency Status License

Commands

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

Getting Started

  1. Clone the repository
  2. Install dependencies: yarn or npm install
  3. 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
  CABLE_URL=wss://your-api-url.com/cable
  AWS_BUCKET=bucket
  AWS_REGION=region
  AWS_ACCESS_KEY_ID=key_id
  AWS_SECRET_ACCESS_KEY=secret_key
  1. 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

  1. After adding the project to CC, go to Repo Settings
  2. On the Test Coverage tab, copy the Test Reporter ID
  3. 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 our redux-tools package. This makes working with, and tracking the status of async side effect easier. Learn more about this in the redux-tools readme.

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.

Progressive web app

To enable your progressive web app, set the environment variable ENABLE_PWA in your dot environment file.

Fetching data

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

Deploying to AWS S3

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

Deploying to Heroku

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

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
Isomorphic Fetch Is a Promise-based mechanism for programatically making web requests in the browser.
Immer Allows you to work with immutable state in a more convenient way.
React Intl Localization for language support.

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.

You can’t perform that action at this time.