Rails (w/ React+Redux+Jquery+Heroku) Guide

Guide.md

Rails (w/ React+Redux+Jquery+Heroku) Guide

Create initial rails project

rails new APP_NAME --skip-turbolinks=true -d postgresql
cd APP_NAME
rails db:create

Configurations

Configure .gitignore:

bundle.js
bundle.js.map
.byebug_history
.DS_Store
npm-debug.log

Configure Gemfile:

Add under development:

gem 'better_errors'
gem 'binding_of_caller'
gem 'annotate'
gem 'pry-rails'

Add Globally:

gem 'jquery-rails'

Uncomment:

gem 'bcrypt'

Run:

bundle install

Configure package.json:

Inside of your rails project, run:

npm install babel-core babel-loader babel-preset-env babel-preset-react
lodash react react-dom react-router react-router-dom react-redux redux
redux-logger redux-thunk webpack

npm install -D webpack-cli

Add engines/scripts to package.json:

// package.json
  "engines": {
    "node": "8.9.4", //CHANGE TO YOUR NODE VERSION (node -v)
    "npm": "6.2.0"   //CHANGE TO YOUR NPM VERSION (npm -v)
  },
  "scripts": {
    "postinstall": "webpack",
    "webpack": "webpack --watch"
  }

Configure asset loading:

At the bottom of app/assets/javascripts/application.js:

//= require rails-ujs
//= require_tree .
//= require jquery
//= require jquery_ujs

Frontend

Create a frontend folder with an entry.jsx file

//React
import React from 'react';
import ReactDOM from 'react-dom';

document.addEventListener('DOMContentLoaded', () => {
  const root = document.getElementById('root');
  ReactDOM.render(<h1>We can render!</h1>, root);
});

Create a webpack.config.js file:

const path = require('path');

module.exports = {
  context: __dirname,
  entry: './frontend/entry.jsx',
  output: {
    path: path.resolve(__dirname, 'app', 'assets', 'javascripts'),
    filename: 'bundle.js'
  },
  resolve: {
    extensions: ['.js', '.jsx', '*']
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /(node_modules)/,
        use: {
          loader: 'babel-loader',
          query: {
            presets: ['env', 'react']
          }
        },
      }
    ]
  },
  devtool: 'source-map'
};

Static Pages

# app/controllers/static_pages_controller.rb
class StaticPagesController < ApplicationController
  def root
  end
end

# config/routes.rb
Rails.application.routes.draw do
  root "static_pages#root"
end

<!-- views/static_pages/root.html.erb -->
<main id="root"></main>

Heroku

1. Sign up for heroku.
2. Create a heroku app.
3. Install Heroku CLI
4. Settings > Buildpacks > Add NodeJS. Add Ruby
5. heroku login
6. git add -A
7. heroku git:remote -a appname
8. git push heroku master
9. heroku open

Important production notes:

• Disable logger middleware