Skip to content

🧐 A sensible universal starter kit for React + Redux

Notifications You must be signed in to change notification settings

combine/universal-react-redux

Repository files navigation

react-redux-starter

A universal starter kit built with react, react-router and redux. Server rendering with react and express, bundles with Webpack with hot module reloading and hot style reloading with SCSS support. Bonus: Cordova support.

Prerequisites

  • Node 4.2+ is recommended.

  • Webpack

npm install -g webpack
  • nodemon
npm install -g nodemon
  • eslint, babel-eslint
npm install -g eslint babel-eslint

Get started

npm install
npm start

Direct your browser to http://localhost:3000.

Directory Structure

β”œβ”€β”€ client                    # Client-side code.
β”œβ”€β”€ common                    # Shared code between client and server.
β”‚   β”œβ”€β”€ assets                # All fonts, images, stylsheets.
β”‚   β”‚   β”œβ”€β”€ fonts
β”‚   β”‚   β”œβ”€β”€ images
β”‚   β”‚   └── stylesheets       # Follows the 7-1 pattern: http://sass-guidelin.es/#the-7-1-pattern
β”‚   β”‚       β”œβ”€β”€ base
β”‚   β”‚       β”œβ”€β”€ components
β”‚   β”‚       β”œβ”€β”€ layout
β”‚   β”‚       β”œβ”€β”€ pages
β”‚   β”‚       β”œβ”€β”€ shame
β”‚   β”‚       β”œβ”€β”€ utils
β”‚   β”‚       └── vendors
β”‚   β”œβ”€β”€ config                # Contains the redux store configuration. Add anything else you like.
β”‚   β”œβ”€β”€ middleware            # Custom redux middleware can be placed here.
β”‚   β”œβ”€β”€ reducers              # Redux reducers
|   |   └── index.js          # Root reducer. Imports all other reducers.
β”‚   β”œβ”€β”€ routes                # Routes each have an index.js which exports a react-router Route.
β”‚   β”‚   β”œβ”€β”€ app
β”‚   β”‚   β”‚   β”œβ”€β”€ components
β”‚   β”‚   β”‚   β”œβ”€β”€ containers
β”‚   β”‚   β”‚   └── index.js
β”‚   β”‚   β”œβ”€β”€ example           # The name of route.
β”‚   β”‚   β”‚   β”œβ”€β”€ components    # "Dumb" components
β”‚   β”‚   β”‚   └── containers    # "Smart" containers
β”‚   β”‚   β”‚   └── index.js      # Exports a react-router route. Uses [alternate configuration](https://github.com/rackt/react-router/blob/master/docs/guides/basics/RouteConfiguration.md#alternate-configuration)
β”‚   β”‚   └── home
β”‚   β”‚       └── containers
β”‚   β”‚   β”‚   └── index.js
β”‚   β”œβ”€β”€ selectors             # Memoized selectors. See https://github.com/rackt/reselect
β”‚   β”œβ”€β”€ shared                # Shared actions and components and do not belong to a single route.
β”‚   β”‚   β”œβ”€β”€ actions
β”‚   β”‚   └── components
β”‚   β”œβ”€β”€ templates             # HTML templates
β”‚   └── util                  # Utility methods
β”œβ”€β”€ cordova-build             # Cordova build tools
β”‚   └── config
β”œβ”€β”€ server                    # Server-side code.
└── webpack                   # Webpack configuration files.

Writing Tests

The default testing framework is Mocha, though you can use whatever you want. Make sure you have it installed:

npm install -g mocha

Tests should reside alongside the component/module/selector/etc that it is testing. For example:

β”œβ”€β”€ reducers
β”‚   β”œβ”€β”€ todos.js
β”‚   β”œβ”€β”€ todos.test.js

Tests can be written with ES2015, since it passes through babel-register.

Running Tests

To run a single test:

npm test /path/to/single.test.js

To run a directory of tests:

npm test /path/to/test/directory

To run all tests:

npm run test:all

This will run all files that are suffixed with a .test.js.

Deploying to Heroku

Just set an environment variable to point the asset host to whereever you want, since it defaults to localhost:3001. If using Heroku to store assets, just use a local route. Otherwise, set it to the CDN of your choice.

heroku config:set ASSET_HOST=/dist/
# OR
heroku config:set ASSET_HOST=https://s3.amazonaws.com/mybucket/myasssets/

Building Cordova Apps

First, make sure you have Cordova installed:

npm install -g cordova

Initialize the Cordova app:

cordova create cordova/ com.org.appname "My App"

Add the platform(s) you want to build for:

cd cordova/
cordova platform add ios # or 'android'

Install plugins (if you don't have a /plugins folder)

cordova prepare

Build/Start Dev Environment

npm run start:cordova               # build for development with hot reloading
npm run build:cordova               # build for development without hot reloading
npm run build:cordova:development   # alias for above
npm run build:cordova:production    # build for production without hot reloading

Start a simulator/emulator

  • iOS - CLI

Install XCode, then:

npm install -g ios-deploy
cd cordova && cordova run ios
  • iOS - XCode

Open the file located in ./cordova/platforms/ios/MarcasDirectos.xcodeproj.

  • Android - CLI

Install the Android SDK, then:

cd cordova && cordova run android

Distributing Betas

You may want to distribute the app via Fabric (Crashlytics). To do so, prepare the following files (copy and rename them):

build/fabric.json.example -> build/fabric.json
build/config/release.json.example -> build/config/release.json

Fill in the fields in the JSON files properly, then run the following commands:

npm run build:cordova:production   # build the source files for cordova's www
npm run dist:android               # build the binary and upload to Crashlytics
# OR
npm run dist:ios

Additional Notes

If you're debugging in a mobile browser and you want to access your project locally, do the following:

  • Make sure your mobile device on the same network as your desktop/laptop.
  • Run npm start with a HOSTNAME environment variable set to your computer's local ip address (the computer that your dev environment is on):
HOSTNAME=10.0.1.3 npm start
  • Browse to http://10.0.1.3:3000 on your mobile device.