React redux boilerplate

Boilerplate for react-redux project with webpack 2 and tests

Detailed Documentation here

Quickstart: How to build and run Template?

(a) Prerequisites

• Node 7.1.0 or later
• Npm 3.10.9 or later
• Unix based operation system(os x, ubuntu, fedora, etc.)

Run the following commands to verify that you have the correct versions of Node and NPM installed:

node -v
npm -v

(b) Clone the Repository

git clone git@github.com:Faradey27/react-redux-webpack2-starterkit.git react-redux-webpack2-starterkit

(c) Install dependencies

cd react-redux-webpack2-starterkit
npm install

(d) Build web-ui and run

npm run testserver

after that open http://localhost:3001 also you can find files in react-redux-webpack2-starterkit/dist - this is production build of ui files, you can serve them or upload to some hosting(like github pages)

How to change server link? or analytic id without rebuild?

1. open react-redux-webpack2-starterkit/dist/config/config.js
2. change what you want
3. do page refresh

---

Build and run with docker

(a) Install docker from https://www.docker.com/

(b) Go to root of project and build image

cd react-redux-webpack2-starterkit
docker build -t faradey27/react-redux-webpack2-starterkit .

(c) Run docker image

docker run -p 49160:3001 -d faradey27/react-redux-webpack2-starterkit

(d) Run docker image

Wait for 2-5 minutes and open http://0.0.0.0:49160

Questions

How to run development version of ui?

Do steps - a,b,c (from start of readme)
npm start

after running this command development version of web-ui will be availible on http://localhost:3002

Note: development version much more slower that production version

How to run unit tests for ui?

Do steps - a,b,c (from start of readme)
npm test

How to get unit tests coverage?

Do steps - a,b,c (from start of readme)
npm run test:coverage

How to run e2e tests(Unix based OS)?

Do steps - a,b,c (from start of readme)
npm run test:e2e

How to run e2e tests(Windows)?

Do steps - a,b,c (from start of readme)
npm run selenium - don't stop this process
open new tab enter next command and tests will start
npm run test:e2e

What about internalization?

Boilerplate internalization depend on:

• Jed
• getText

To get all labels in po file you require to do steps a,b,c and run npm run createLocaleFiles after that you should go to react-redux-webpack2-starterkit/lang and find their .po files for each language, open each with po editor po-edit and add related labels for each language. After that npm run convertPOtoJson and after that npm run build your build will be in react-redux-webpack2-starterkit/dist with multilanguage support

Quickstart: Requirments for production deploy

• Production server should return index.html file for each request
• Production server should serve react-redux-webpack2-starterkit/dist folder

Quickstart: How to see something?

• for npm run testserver use localhost:3001
• for npm start use localhost:3002
• for production use whatever you want

Quickstart: How to change api url or other configuration constants(like analytics)?

1. go to react-redux-webpack2-starterkit/src/Constants/Api.js
2. export const API_URL = 'http://10.2.3.103:8081'; - you will see this, it's api url, change it on whatewer you want and rebuild project(npm run build or npm start)

or, if you don't want to rebuild project

go to file react-redux-webpack2-starterkit/dist/config.js and change same constants, after that just refresh page with web-ui

Quickstart: Troubles

• you always get 401 error or you see UNKNOWN_ERROR on ui or you can't login with right password - this is CORS problem or server is dead, to solve this you should check that you use last api server and write to server side guy or frondend side guy
• 404 not found, 400, etc. - maybe some problems with users roles

Found an issue?

Go here

Browser support

• Chrome 45 +
• Firefox 42 +
• Safari 9.1 +
• IE 11 +
• IE Edge
• Opera 39 +
• IOS Safari 9.1 +
• Android Browser 4.4 +
• Chrome for Android 45 +