Repository files navigation

Create React + Redux app structure with build configurations.

• 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 configurationDevelopment, Staging, Production with CDN,cache-busting support
• Build script to bundle JS, CSS, with sourcemaps
• Unit testsJest,Enzyme
• E2ECypress 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

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

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

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

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

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

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

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

Install it once globally:

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

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

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

To create a new app, run:

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

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

For running builds you need to haveconfig.json in app/ folder.So you can create new one or renameapp/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

npm install oryarn install

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

Have a look atBuild Scripts section

node index.js ornpm run server

Then openhttp://localhost:8080/ to see test weather app :)

Development -npm run dev oryarn run dev

Production -npm run prod oryarn run prod

Staging -npm run staging oryarn run staging

Unit -npm run test oryarn run test

Unit with watch -npm run test:watch oryarn run test:watch

E2E -npm run e2e oryarn run e2e

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

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

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

Kill all node processes:

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

• How create-react-redux-app-structure helps you to start a project faster
• clearIntervals() when user has a nap
• Do you still register window event listeners in each component?
• v4 Create React + Redux app structure with build configurations. What’s new?
• Integrate Custom Elements into React app

I would love to have your help.

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

MIT ©Vasyl Stokolosa