Create React + Redux app structure with build configurations
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
app
cli CLI fix Aug 7, 2018
fonts React Redux app structure Nov 16, 2017
images Notitication Sep 5, 2018
server Fixes #8 Dec 1, 2017
.babelrc Intergrate Custom Element Aug 7, 2018
.eslintignore Support ESLint. Page Visibility API page. Nov 29, 2017
.eslintrc Support ESLint. Page Visibility API page. Nov 29, 2017
.gitignore Upgrade React, React DOM, Webpack Dec 20, 2018
.travis.yml Travis nodejs Jun 13, 2018
CONTRIBUTING.md Update CONTRIBUTING.md Jul 8, 2018
Gruntfile.js
LICENSE Update LICENSE Jun 20, 2018
README.md
codecov.yml Codecov.yml Jun 18, 2018
cypress.json Cypress visitURL config Nov 24, 2017
gulpfile.js Integrate Custom Elemets Aug 8, 2018
index.js Serve index.html. Create folder for server Nov 17, 2017
package-lock.json 4.5.1 Dec 20, 2018
package.json 4.5.1 Dec 20, 2018
postcss.config.js
webpack.config.js
yarn.lock

README.md

Create React Redux App Structure Twitter URL

MIT Licence codecov Build Status npm version

Create React + Redux app structure with build configurations.

What can I find here?

  • Express, Cors
  • React + Redux, ES6, async/await
  • Web Components (Custom Elements) integration
  • React Router
  • Internationalization
  • SASS
  • PostCSS (autoprefixer), so you do not need -webkit, -moz or other prefixes
  • Build script configuration Development, Staging, Production with CDN, cache-busting support
  • Build script to bundle JS, CSS, with sourcemaps
  • Unit tests Jest, Enzyme
  • E2E Cypress tests
  • ESLint
  • Ghooks (pre-commit with unit tests and eslint validation)
  • Code Coverage (https://codecov.io)
  • Travis CI runs Unit and E2E tests and report to codecov

Quick Start

Create React + Redux app structure works on macOS, Windows, and Linux. If something doesn’t work, please file an issue.

npm

npm i -g create-react-redux-app-structure

yarn

yarn add global create-react-redux-app-structure

create-react-redux-app-structure my-app
cd my-app/
npm run fast-start

http://localhost:8080/ will be opened automatically.

When you are ready to deploy to staging/production please see Build Scripts section.

Getting Started

You will need to have Node >= 6 on your local development machine and Yarn installed.

Install it once globally:

npm

npm i -g create-react-redux-app-structure

yarn

yarn add global create-react-redux-app-structure

Patience, please. It takes time, most of it is spent installing npm packages.

Creating an App

To create a new app, run:

create-react-redux-app-structure my-app
cd my-app/

It will create a directory called my-app inside the current folder.

Prepare config.json for build configurations

For running builds you need to have config.json in app/ folder. So you can create new one or rename app/config.json.example.

Inside that file:

  • PATHS is used in Grunt and Gulp tasks
  • assetHost CDN path for each build
  • serverHost is used for running e2e Cypress tests

Installation

npm install or yarn install

You can run npm run fast-start script, it will install all npm packages, run dev build, server and open http://localhost:8080/

Run build script

Have a look at Build Scripts section

Run server

node index.js or npm run server

Then open http://localhost:8080/ to see test weather app :)

Build scripts

Development - npm run dev or yarn run dev

Production - npm run prod or yarn run prod

Staging - npm run staging or yarn run staging

Tests

Unit - npm run test or yarn run test

Unit with watch - npm run test:watch or yarn run test:watch

E2E - npm run e2e or yarn run e2e

Coverage is here - app/tests/tests/coverage/Icon-report/index.html

Automation tests

Let's imagine that for automation tests we need to get access to the Redux store. We can do that by adding to the window object property with reference to the store. For e.g. in app.jsx file. Automation tests run only in staging, so for production build we remove them out by Grunt task strip_code

/* staging-code */
window.store = store;
/* end-staging-code */

Tips

Kill all node processes:

  • MacOS sudo killall -9 node
  • Windows (cmd) taskkill /f /im node.exe

Detailed description about features and approaches

Contributing

I would love to have your help.

If you have an idea how to improve or found an issue please read the Contributions Guidelines before submitting a PR. Thanks!

License

MIT © Vasyl Stokolosa