A boilerplate doing universal/isomorphic rendering with Redux + React-router + Express, based on Redux-Realword-Example
To bootstrap a React app development environment is not an easy task, there are so many libraries to setup, including webpack, babel, testing stuff and others. I'd like this boilerplate to be a ready-to-use one with the essential tools and the simplest logic that just work to build a universal rendering React + Redux app. That's why there is no fancy stuff in this app, since it's a basis of your killer app rather than a showcase one.
-
clone this app and name it as whatever your want:
$ git clone https://github.com/mz026/universal-redux-template.git my-killer-app
-
remove the
.git
folder since you won't need the history of this boilerplate:$ cd my-killer-app; rm -rf .git
-
start out a new git history:
$ git init
-
Install dependencies:
$ npm install
-
Host dev environment and start to build something chaning the world!
$ npm start
-
To run the test with Mocha, Enzyme, Sinon and Chai:
$ npm test
-
To generate a container/component/action and its tests:
$ ./bin/generate <type> <path>
-
To update npm-shrinkwrap:
$ npm shrinkwrap --dev
eg: $ ./bin/generate component myNamespace/MyComponent
- Universal rendering, with async data support
- Server side redirect
- Separate vendor and app js files
- Use Immutable as store data
- React 15.0.2
- React-Router 2.4.1
- Immutable
- Express as isomorphic server
- Babel
- Webpack
- Mocha as testing framework
- Chai as assertion library
- Rewire and Sinon to mock/stub
- Enzyme to do React rendering
- Intro page:
{base_url}
- Question Page:
{base_url}/questions
Vendor related scripts are bundled into a vendor.js
,
associated settings can be found in the entry
field of webpack.config.js
.
(thanks @dlombardi for pointing it out!)
The single quotes in npm test
script surrounding path do not work on Windows, while they're necessary on unix-like machines.
Please remove them in scripts.test
section in package.json
like this:
"test": "NODE_ENV=test NODE_PATH=./app mocha --compilers js:babel-register -r app/spec/support/setup.mocha.js --recursive app/spec/**/*.test.js -w"
(thanks @jbuffin for pointing it out!)
To deploy this app to production environment:
-
Prepare a server with NodeJS environment
-
Use whatever tool to upload this app to server. (Capistrano is a good choice.)
-
Run
$ NODE_ENV=production npm install
on server- After the installation above,
postinstall
script will run automatically, building front-end related assets underdist/
folder.
- After the installation above,
-
Kick off the server with:
$ NODE_ENV=production NODE_PATH=./app node app/server
To deploy this app to heroku,
- Set up heroku git remote url
- Set
API_BASE_URL
to heroku config var. (without trailing slash)
Here's a sample deployed to heroku: https://redux-template-test.herokuapp.com/
For this case, the API_BASE_URL
mention above would be https://redux-template-test.herokuapp.com