isomorphic-react-template

A starting template for building an isomorphic single page app using react.js on express with a Flux architecture.

Work in progress notice

This version does not include yet Flux. My efforts for making it working with Flux are in the reflux branch.

Main goals

React components are rendered on the server first, then mounted on the client.
Share the same routes server and client-side with react-router.
The initial state of the app can be fetched consuming REST APIs (in progress).
Make it working with a Flux architecture (in progress).
i18n made easy (todo)
Have a nice build script with cache busting.
Live development for React components with react-hot-loader and for scss.

Setup

# Clone the repository
git clone https://github.com/gpbl/isomorphic-react-template.git

# Install dependencies
cd isomorphic-react-template
npm install

# Run the development server
./scripts/dev

App structure

.
├── app.js         # Run the express server
│
├── server.jsx     # Send the server-rendered HTML document as response
├── client.jsx     # Entry point for the browser: mounts the <App /> component on document.body.
├── routes.jsx     # Define the react-router handlers 
│
├── cachebuster.js # Used by express in production for serving cache-busted URLs
│ 
├── components     # React's components container
│   ├── App.jsx    # The App component where the routes are mounted
│   ├── Html.jsx   # Renders the whole HTML document server side (via server.jsx)
│   ├── Index.jsx  # The "index" route (as example)
│   └── Place.jsx  # The "place" route (as example) 
│
├── style           # Container for .scss files
│
├── public          # Container for the static files. Cache-busted on build.
│
├── scripts
│   ├── dev        # Useful scripts to run the development server
│   └── prod       # ...or to test the production server
│
├── dev-tools.js   # Runs the webpack dev server, livereload, and watches for .scss changes
├── gulpfile.js    # Contains the gulp tasks for the build
│
├── webpack.config.js    			 # Webpack config for the build task
└── webpack.config.dev.js      # Webpack config for development

Development

Routes are a key part of the app: read the react-router documentation to understand how the routes handlers work. You change the routes in routes.jsx.

The main component is App.jsx. The <App /> component is mounted with client.jsx, which is the entry point for the browser.

If you have some questions feel free to open an issue in the project, since this template is still under development. :)

Running the development server

./scripts/dev
open http://localhost:3000

it watches for js changes with nodemon
it runs a webpack dev server with hot modules replacement for react components
it starts a livereload server watching the public files (install the browser extensions).

Building

The build task:

compiles the client's js files with webpack
compiles the main.scss file
copies the app sources
cache buster the public files

# Create a build in the /build directory
gulp build

# Test the production server on localhost:8080
PORT=8080 ./scripts/prod

Credits

The example app is inspired by the react-router examples.

davedx/isomorphic-react-template