Awesome
react-coffee-quickstart
A minimal React/CoffeeScript project template (from JavaScript react-quickstart) which combines:
-
react-router-component to provide HTML5 History routing and navigation
-
react-async to create "asynchronous" React components
-
express to serve pre-rendered React components, assets and provide API
-
browserify to provide module system for a browser
-
npm to install and manage server-side and client-side dependencies
Every "page" in the application is pre-rendered on server so the user can see the UI before the client code is shipped to a browser. After that application starts functioning like a single page application, navigating between "pages" without reloads.
Project structure
Project structure is really minimal, you'd probably like to customize it for your specific needs and taste:
.
├── assets
├── client.coffee
├── package.json
└── server.coffee
Directory assets
is served under /assets
URL, client.coffee
module contains UI
code while server.coffee
— HTTP server which serves pre-rendered React components,
assets and provide a stub for a REST API.
Development workflow
After cloning a git repo, run:
% npm install
to install all needed dependencies and then:
% npm run start
to start a development server.
Now you can start edit the source code — on changes, server will be reloaded and client code bundle will be rebuilt.
Going "production"
To build an optimized bundle of client code run:
% npm run build
which will produce assets/bundle.js
build, then:
% npm run start-prod
to start server in "production" mode (no source code watching and serving optimized bundle to browser).