/react-webpack-node

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

Primary LanguageJavaScript

react-webpack-node

Gitter

npm version

Deploy

Boilerplate for an isomorphic universal React application in ES6 with webpack using Redux running on an Express server.

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

Demo site:

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

Features:

We now have two isomorphic Universal Flux implementations in this repository:

On master branch:

On flux/alt branch:

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. Css Modules
  2. Webpack config file
  3. Express server
  4. Mongoose for MongoDB
  5. 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 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
    • cleans the /public folder
    • runs 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 git@heroku.com:appname.git.

  1. heroku open to open the link
  2. 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

Testing

Testing with:

  • karma as test runner
    • karma.conf.js for the main karma configuration (it has webpack configurations)
    • tests.webpack.js which is the single entry file. It uses webpack's require API to find all the files we need that have a -test.js suffix.
  • mocha as the test framework
  • jsdom as my test environment
  1. npm test to run test once
  2. npm test:watch to run in watch mode

We have unit tests for /actions and /reducers in place, but none for /components yet.

I previously followed the example for writing tests with redux which used mocha and jsdom, but I soon encountered problems with require-ing files without using a relative path, also a lot issues with nock-ing correctly.

Yeoman Generator

If you like using yeoman generators, you could check out this cool yeoman generator by @iiegor!

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:
        1. export GOOGLE_CLIENTID=YOUR_CLIENTID
        2. export GOOGLE_SECRET=YOUR_SECRET
    • Heroku
      • Fret not! Heroku's covered this pretty well:
        1. heroku config:set GOOGLE_CLIENTID=YOUR_CLIENTID
        2. heroku config:set GOOGLE_SECRET=YOUR_SECRET
        3. 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=example@ninja.com&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

How to Contribute:

  1. Any suggestions/improvements/bugs can be in the form of Pull Requests, or creating an issue.
  2. Coding 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