React-Node-Boilerplate

A little boilerplate code for apps using a Node back end and a React front end

2 years after

React/Node Boilerplate

This repo contains some boilerplate code for an application that uses Node on the back end and React on the front end.

Just get me up and running

git clone https://github.com/regexpressyourself/React-Node-Boilerplate.git
cd React-Node-Boilerplate
npm install
cd client
npm install
cd ..
npm start

Credit

Most of this is shamelessly ripped off from the guys over at Fullstack React.

  • See their blog post about it here
  • See the corresponding repo here

I use the create-react-app package for the React half of it. Find more on it here

Tech

Development

Separate servers run concurrently for development. For React, a webpack server runs to transpile React's modules, ES6, etc. to happy, browser-ready javascript. For node, an express server runs as usual.

Running npm start from the project root will get everything up and running for you.

Production

The backend server is more or less the same on production as on development.

The webpack server can be configured for production by running npm run build in the ./client directory. This will compile all the front end goodness to the ./client/build folder as static assets. Host these assets from wherever, point them to your server, and you'll be up and running!

Where's my Webpack config?

The create-react-app package does a lot for you, but it also obfuscates a lot away from you in the process. If you want to dig in to your configs a bit more on the React side, just run npm run eject in the ./client directory.

Related Repositories

react-static-boilerplate

react-static-boilerplate

Boilerplate and tooling for web application development based on React (ReactJS) ...

react-rocket-boilerplate

react-rocket-boilerplate

A boilerplate written in ES6 using ReactJS (along with React Router and RefluxJS ...

electrode-boilerplate-universal-react-node

electrode-boilerplate-universal-react-node

Electrode boilerplate application which has Universal React + Node ...

react-reflux-boilerplate-with-webpack

react-reflux-boilerplate-with-webpack

React + Reflux + CoffeeScript + Stylus Boilerplate with Webpack ...

Webpack2-React-Redux-Boilerplate

Webpack2-React-Redux-Boilerplate

面向React+Redux+Webpack的单项目多应用脚手架 ...