catalinmiron/react-webpack-node

Boilerplate for an isomorphic React + Redux/alt Flux application using Webpack running on a node express server

react-webpack-node

Boilerplate for React application with webpack using alt's Flux running on a node express server.

| React + Redux / alt + Immutable + Express + mongoose + MongoDB |

Demo site:

https://react-webpack-node.herokuapp.com/

Features:

We now have two Flux implementations in this repository:

Isomorphic Flux using:

On master branch:

• redux
• react-router
• redux-simple-router

On flux/alt branch:

• alt as my Flux implementation
• iso to help with bootstrapping data for isomorphic Flux
• react-router

Note: If you have previously used an alt implementation of this repository, please refer to this branch. I will not be updating it as frequently as master, but definitely welcome suggestions!

1. Stores storing data using ImmutableJS data structures - currently only on flux/alt
2. Css Modules
3. Webpack config file
4. Express server
5. Mongoose for MongoDB
6. Procfile to enable deployment to Heroku.

Why redux?

I'm really a fan of this implementation. The main principles of having:

• a single store
• state being read-only (you have to express an intent to mutate being creating actions)
• mutations are written as pure functions

make it very fun and easy to write predictable code! Redux also has a really good ecosystem and strong support from the community.

Why alt?

Having isomorphic React was one of my key criteria when choosing a Flux library, which helped narrow down the scope of libraries.

I found alt's implementation to be clean and simple, and like the option of allowing us to create alt instances or using singletons (and flushing the stores). I also like the direction in which alt is heading.

Mission

The aim of this repo is to incorporate the best practices to building a non-trivial apps with Reactjs and Node. I am working to document this repo extensively so it would be easy for both beginners and experts to begin dev-ing on it without pulling your hair out.

Instructions

1. First run your mongo server
2. mongod

Production build

Run the commands below for a production build, i.e. what is deployed to Heroku. If you are deploying to Heroku or similar, we assume that you serving the pages over HTTPS.

1. npm run build to clean the /public folder, and then run webpack through configurations specified in webpack.config.prod.js
2. npm start to start server

Development build

1. npm run dev starts the server with webpack-hot-middleware and react-transform-hmr
   • If you get an error saying file not found, run npm run build && npm run dev (because the server relies on the compiled file to exist in order to serve those files).
   • I am looking into using webpack isomorphic tools to help with bundling files server side, so we will potentially move away from having two configs for client and server side.

Where do you compile your scss?

We use ExtractTextPlugin to extract compiled css in our webpack config file

What loaders do you use for ES6/ ES2015?

babel-loader. Seriously, try it!

Setting up your Database

Install MongoDB:

1. brew update
2. brew install mongodb
3. mongod (Make sure you have the permissions to the directory /data/db)

If you're interested in a boilerplate example with postgresql, check reap out!

Deploying to Heroku

1. heroku create
2. heroku app:rename newname if you need to
3. git push heroku master

Note: If you are working from a different machine and get heroku does not appear to be a remote repository message, be sure to run git remote add heroku [email protected]:appname.git.

4. heroku open to open the link
5. If you wish to have a database setup on Heroku, remember to use heroku addons:add mongohq or heroku addons:add mongolab.

Note: For Google Auth, read Setting up Google Authentication below

Deploying to Digital Ocean

1. Create a Droplet
2. Follow this or this tutorial to set up nodejs
3. Follow this tutorial to install mongodb
4. git clone this repo
5. npm install
6. sudo npm install pm2 -g
7. pm2 start server/index.js
8. pm2 startup ubuntu
9. sudo env PATH=$PATH:/usr/local/bin pm2 startup ubuntu -u sammy

Read more on DO config here

Component Hierarchy

• app.js
  • App.jsx
    • Navigation.jsx
    • Vote.jsx
      • EntryBox.jsx
      • MainSection.jsx
      • Scoreboard.jsx
    • Login.jsx
    • Logout.jsx
    • About.jsx

Questions:

1. Google Authentication does not work locally or on heroku!

Setting up Google Authentication

1. Follow these steps from Google to create your API keys on Google Developers Console
2. Under APIs & Auth, Copy your Client ID and Client Secret

Dev

For Google Auth to work locally, you need to do the following in your terminal before starting the server: export GOOGLE_CLIENTID=YOUR_CLIENTID export GOOGLE_SECRET=YOUR_SECRET

Heroku

Fret not! Heroku's covered this pretty well.

heroku config:set GOOGLE_CLIENTID=YOUR_CLIENTID

heroku config:set GOOGLE_SECRET=YOUR_SECRET

heroku config:set GOOGLE_CALLBACK=YOUR_CALLBACK

2. I do not know how to write React Components/anything in ES6. Help!

Don't you worry child. Read this.

You can learn more about ES6 (or ES2015) here.

3. Why do I get Error: Failed to serialize user into session when trying to login with email/password locally?

It's because there are no users created in your local DB so it's throwing an error on the server's end. We haven't set up the handling of errors for this yet. I intend to fix this. If you check this, you'll see that there is a /signup endpoint for creating a user. In the meantime, a quick and easy way to do this is to paste this in your console log while your server is running:

var http = new XMLHttpRequest();
var url = "http://localhost:3000/signup";
var params = "[email protected]&password=ninja";
http.open("POST", url, true);http.setRequestHeader("Content-type", "application/x-www-form-urlencoded");

http.send(params);

This should create a user in your local database and all will be well!!

Todo:

Best way to keep up to date is check the issues.

My priorities are:

1. Improving the server side rendering
2. Better dev experience
3. Auth routing
4. Unit tests

How to Contribute:

1. Any suggestions/improvements/bugs can be in the form of Pull Requests, or creating an issue.
2. Coding guidelines:

• Airbnb's Style Guide
• bendc's frontend guidelines

Credits to webpack-server-side-example, example-app, flux-examples, node-express-mongo-demo, hackathon-starter, web-starter-kit, awesome material-ui, alt and iso, react-starter, reap.

License

MIT