Short-Term Goals

• Getting a react component into production

Long-Term Goals

• Hot reloading of React Apps
• Moving away from Asset Pipeline
• Destructuring front and back end apps

Webpack

Create NPM Directory

• Added package.json, node_modules to the root app
• Added react-ui in root app

Setup Webpack

• Set the file that webpack should using as its 'entry point' 
  • react-ui/entry.js
• Set where the file should be output
  • app/assets/javascripts/react.bundle.js for dev
  • public/assets for production and test
• Webpack config files: 
  • main.config.js (both inherit from this)
    • development.config.js
    • production.config.js

Start the server

• Development: 
  • Start both rails and webpack via foreman in one shell 
    • /Procfile.dev
  • start both separately (recommended)
    • npm start
    • rails s puma
• Production:
  • Files are automatically bundled through npm script 
    • /package.json

Rails

Including JS Files

• To include the React js inside of the erb file:
  • Development:
    • Use the javascript_include_tag
  • Test/Production:
    • Use  <script src='*.react.bundle.js'>
  • Example

Setup development to hit the local dev server  

+    config.assets.configure do |env|
+      env.unregister_postprocessor 'application/javascript', Sprockets::SafetyColons
+    end
+
+    config.action_controller.asset_host = Proc.new { |source|
+      if source =~ /react.bundle\.js$/i
+        "http://localhost:8080"
+      end
+    }

Compiling for Production

• As of now we use the npm postinstall action to compile to public/assets 

Including CSS Files

• Added React-UI as an asset path in order for sprockets to recognize its existence
  • Application.rb 
• React-UI will utilize all RS-UI styles
  • It is currently being @imported via app-pro.scss
  • Eventually react stylesheets will be imported via app/assets manifest files or compiled with webpack (TBD)

Testing

CircleCI

• Circle.yml
  • If you need dependencies in the global path use the dependencies -pre task
• Files will get bundled for circle in the postinstall task after npm install

Testing Locally

• Added compile command inside of spec_helper.rb inside the before(:suite) command
  • Future: have this command be ignored by circle

Heroku

Setting up the Buildpack

• Switched to use a multi buildpack
• Requires the use of a .buildpacks file 
  • Allows us to specify both the node and ruby official heroku packages

Minifying for Production

• By default the heroku node.js buildpack runs npm install 
• We minify into public/assets in the npm postinstall script

Sidenote: Slug Size

• Due to the fact that we are now creating a seperate node_modules folder, our slug size > 300mb, which means dire actions: 
  • heroku_asset_precompile.rake

Flux

Title Text

• Bullet One
• Bullet Two
• Bullet Three

React

Instantiating a new component

• For every new React app, you need to create a new entry file
  • This will allow webpack to bundle only specific files, and we will require only what we need in erb

Takeaways

Short Term

• - Take some time for devs to understand the way assets are getting loaded
• - Add another piece to our stack
• - You need to start the dev server if you want the assets
• - Might cause slowdowns when trying to create new React Apps
• - Still need to choose a testing framework/syntax

Long Term

• + We will be able to use React flawlessly
• + Helps us modularize our app
• + Performance increases in the way we deliver our js files (after more detailed research)
• + Decrease front end dev time, Hot Reloading

Future

Enhacements

• CSS hot reloading
• 
  
• Bullet Three