NOTE this project is not being actively maintained and contains bugs. It can be used as a starting point, but it needs work. As an alternative check out the React Client Starter App which is the newer and maintained version.

React.s Kindling

This is a React.js starter project. You can use it to build a client only application or a full stack node.js application.

What's included

• Gulp - For building assets, launching development servers and deploying
• Webpack - For bundling javascript and other assets as required
• React Hot Loader - For quick reloads of css and js changes
• Express - For middleware and serving pages
• Passport.js - For authentication
• React.js - For sheer awesomeness
• React Router - For managing the routes of the sheer awesomeness
• Mongoose - For talking to MongoDB
• MaterialUi - Because not everything has to be Bootstrap

Usage

Clone this repository:

git clone git@github.com:jbasdf/react-kindling.git

Install the dependencies:

npm install

Configuration:

Change config/secrets.example.js to config/secrets.js. Change sessionSecret and set your database. If you want to use Facebook, Twitter or Google for authentication setup your keys and secrets.

Development mode with livereload:

To start node and the webpack server just type: gulp

Or start each one individually node server.js gulp serve:hot

Development

You can use React-Kindling to build a client only application or a client-server application.

Client Only

Open up settings. Change 'projectType' to 'client'. When you run 'gulp' all of the assets in the 'client' directory will be built into a client only html/js/css application. The development files will be found in /build and the production files will be in /public.

Client Server

Open up settings.

Change 'projectType' to 'client-server'. Set applicationUrl to your domain.

Pass values from the server to the client via DEFAULT_SETTINGS. This code can be found in index.ejs.

ngrok

Ngrok makes it easy to provide a public url to an application running on your local machine. This comes in handy when dealing with OAuth providers that don't permit localhost. Install ngrok - https://ngrok.com/ and then run two instances one for the node server and another for the webpack server:

ngrok --subdomain myserversubdomain 8888 ngrok --subdomain myassetssubdomain 8080

Change the subdomains to be a value you prefer and then update applicationUrl and assetsUrl in secrets.js to match your changes.

Testing

React Kindling uses Jest for tests

Run npm test

Database

Migrations

React Kindling uses MongoDB. PostGreSQL support is coming. Here are some resources:

• http://www.quora.com/What-are-my-options-for-SQL-database-migrations-with-Node-js
• https://github.com/kunklejr/node-db-migrate
• https://github.com/thuss/standalone-migrations
• https://github.com/rosenfeld/active_record_migrations

Setup

Sensitive values live in: config/secrets.js

Build configuration lives in: config/settings.js

Deployment

Client Only

React.js Kindling can be used to build a client only application that can be deployed to Amazon S3 or Github pages or any other static hosting service

Create a production ready version of the JS bundle:

gulp build --release

Then upload the contents of the 'public' folder to your favorite service.

Deploy to Amazon React.js Kindling uses the Ruby gem s3_website to deploy. run gulp deploy:amazon

Deploy to Github Page run gulp deploy:github

Client Server

License and attribution

MIT