Skip to content
Browse files
Add package.json to use NPM
We are gitignoring node_modules for now to avoid keeping all the
dependencies as version control, for real use, you might want to
have a more thoughtful response than me
  • Loading branch information
nambrot committed Mar 22, 2015
1 parent cb07377 commit bada647a36bdcd06250dcc6f48eae8e407ba2703
Showing with 47 additions and 28 deletions.
  1. +2 −0 .gitignore
  2. +24 −0
  3. +0 −28 README.rdoc
  4. +21 −0 app/assets/package.json
@@ -15,3 +15,5 @@

@@ -0,0 +1,24 @@
# Rails with (semi-)isomorphic React and Flux, bundled with Webpack

I know this sounds like quite the handful, but I basically tried to have a Rails app that is an SPA on the client, yet still offer server side rendering. I've been using React for a while now and while it's clearly a great candidate for SSR but since it's advertised as the "V in MVC", it lacks a complete overall strategy when it comes transferring model data to the client. Flux has been a very popular companion to manage your data on the client, so I tried to make them all work together with the twist of including the great react-hot-loader by using Webpack.

First though, I want to give credits to others you have tried to make React work with Rails, namely Justin Gordon and ...

However, most Rails/React/Flux examples out there are usually lacking in two departments:

1. They are "just" TodoMVC, i.e. don't concern themselves with persistence by using localstorage
2. SSR examples usually only concern with spitting out HTML without addressing how to deal with passing initial model data. Most will return HTML but require a second rountrip to initialize the Stores.

I'll try to keep this as concise as possible in a step-by-step guide of how I approached the topic. I'm starting with a very basic Rails Blog.

### 1. Introducing Webpack and NPM

Love the asset pipeline to death, but the lack of true models definitely gets noticable with larger amounts of client side code. We will be using Webpack to allow us to write modular code as well as use the great diversity of the NPM ecosystem.

### Not Adressing

1. User Authentication
2. Associations

This file was deleted.

@@ -0,0 +1,21 @@
"name": "my-rails-app",
"description": "my-rails-app",
"version": "1.0.0",
"devDependencies": {
"webpack": "~1.4.13",
"webpack-dev-server": "*",
"react-hot-loader": "0.5.0",
"jsx-loader": "*",
"css-loader": "*",
"expose-loader": "~0.6.0",
"imports-loader": "~0.6.3",
"exports-loader": "~0.6.2",
"cjsx-loader": "*",
"coffee-loader": "*",
"json-loader": "*"
"dependencies": {


0 comments on commit bada647

Please sign in to comment.