crystalstone/react-webpack-node

Boilerplate for an isomorphic React + 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 + alt + Immutable + Express + mongoose + MongoDB |

Demo site:

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

Features:

1. Isomorphic Flux using:

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

2. Stores storing data using ImmutableJS data structures
3. Css Modules
4. Webpack config file
5. Express server
6. Mongoose for MongoDB
7. Procfile to enable deployment to Heroku.

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. npm install
2. npm run dev to run locally

There are 3 different "modes" you can develop in:

1. Development - without react-hot-loader
2. Development - with react-hot-loader
3. Production

Development build (without Hot loader)

1. npm run watch watches and recompiles on file changes
2. npm run dev will run the server locally without a proxy. The difference between dev and npm start is that npm start requires you to access your site over HTTPS, otherwise session cookies will not be set.

Development build with Hot Loader

We use react-hot-loader, which is about the greatest thing that has ever happened. No browser refreshes needed.

1. npm run devHotLoader to build with webpack and start the server. We use webpack-dev-server as a proxy server to serve assets. Changes made are not saved to disk, as that is not what webpack-dev-server is for. However, npm run watchHotLoader IF you want to reload the page and see the change in the server-rendered React.

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 && npm start

Bundling with webpack

1. npm run build runs webpack will run configurations within webpack.config.js.
2. npm run watch runs webpack --watch to watch and recompile for changes.

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.react
    • NavigationBar.react
    • RouteHandler - Vote.react - EntryBox.react - MainSection.react - Scoreboard.react - Login.react - Logout.react - About.react

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!!

4. Why do I get a FOUC (Flash Of Unstyled Content) when I run npm run dev?

This is because we do not use ExtractTextPlugin in our dev config. It won't happen in production because we extract and serve the css as a separate file. It's something we can all live with, unless you have a better working suggestion, in which case, please create an issue and PR right away!!!

Todo:

1. Use csrf tokens for form login
2. Look into using Alt Container and other cool utils alt is using.
3. Experiment with CSS-loader further to potentially incorporate locally scoped css.
4. react-hot-loader
5. Let me know!

How to Contribute:

1. As this repo is still in its baby stages, 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