Skip to content

Latest commit

 

History

History
170 lines (113 loc) · 7.31 KB

README.md

File metadata and controls

170 lines (113 loc) · 7.31 KB
Raw

REAP

| React + Express + Alt + Postgresql | ... and Mongo

Boilerplate for React application with webpack using alt's Flux running on a node express server with sequelize to connect to postgresl and mongoose for mongoDB. That was a mouthful.

This is based off my original React+Webpack+Node. Having sequelize with postgresql might seem like a small extra dependency, but I did not wish to overcomplicate the mission of that repo (plus it would be hard for beginners to deal with an extra database).

Why postgresql?

I am all for using MongoDB for a boilerplate (which is why I am leaving it in). But being a postgres fanboy myself, this repo appeared!

Demo site:

https://react-express-alt-postgres.herokuapp.com/

Features:

  1. Isomorphic Flux using:
  • alt as my Flux implementation
  • iso to help with bootstrapping data for isomorphic Flux
  • react-router
  1. Stores storing data using ImmutableJS data structures
  2. Webpack config file
  3. Express server
  4. Mongoose for MongoDB
  5. Sequelize for Postgresql
  6. Includes a 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 start to run locally

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

Setting up your Database

Postgresql

  1. npm install --save sequelize
  2. npm install --save pg pg-hstore

MongoDB

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

Note:

For local dev, you have to create your database locally, by following either steps:

  1. createdb ReactWebpackNode on command line, read more here
  2. Creating it manually using pgadmin
  3. psql magic

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. 4. heroku open to open the link 5. If you wish to have a database setup on Heroku, remember to use the commands below for the following databases: MongoDB:

  • heroku addons:add mongohq or heroku addons:add mongolab Postgresql:
  • heroku addons:create heroku-postgresql

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

Component Hierarchy

  • app.js
    • App.react
      • NavigationBar.react
      • RouteHandler - Vote.react - EntryBox.react - MainSection.react - Scoreboard.react - Login.react - Logout.react - About.react - Dashboard.react - PriorityNotes.react - Profile.react

IsomorphicRouterRenderer

This is a modified version of alt's IsomorphicRenderer. I wished to use webpack to build my server and client side code, but wanted to easily bootstrap data into the stores, and render the correct component using react-router. This takes into account the fact that we're using a singleton store and flushing it everytime (as opposed to creating an instance everytime).

Questions:

  • 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.

  1. heroku config:set GOOGLE_CLIENTID=YOUR_CLIENTID

  2. heroku config:set GOOGLE_SECRET=YOUR_SECRET

  3. heroku config:set GOOGLE_CALLBACK=YOUR_CALLBACK

  • Postgresql does not work locally. It throws a role "root" does not exist error!

You might not have sufficient permissions for the database. A quick way to fix this is to:

  1. export PGUSER=whoami`` (secrets.js defaults to process.env.PGUSER)

Todo:

  1. My efforts will be focused primarily on React+Webpack+Node. However, so if you have any questions/issues with this repo, feel free to create an issue!

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.

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, and React+Webpack+Node

License

MIT