doaboa

Hi friends. Here's what you need to know about our new hybrid react-rails app.

SETUP/OPS:
- Our rails app now has webpacker and webpacker-react.  These are both gems and node modules.
- you'll need to run bundle && yarn to get setup (yarn is an alternative to npm).
- do not use npm to manage node modules, use yarn. else we'll have multiple generations of package.json (aka bad news bears)
- if you update a gem, you need to update the matching node module to the same minor version.
- the master branches of both github repos point to the unstable version, which we aren't using. use docs below.
- webpacker: https://github.com/rails/webpacker/tree/3-x-stable#react
- webpacker-react: https://github.com/renchap/webpacker-react/tree/v0.3.2

doaboa

const data = {
  trips: [
    {
      id: 1,
      name: 'Seaside Chillin',
      location: 'Miami, Florida',
      description: 'The perfect, low-key long beach weekend you need. We avoided the crowded spots! You need a car for this trip.',
      imageUrl: 'https://picsum.photos/350/300?image=1061',
      authorId: 1,
      length: '3 days',

doaboa

lsof -wni tcp:3000 
kill -9 [pid]

doaboa

# make sure master is up to date
$ git checkout master
$ git pull

# prep your branch
$ git checkout test
$ git rebase master
$ git rebase -i master
$ bundle exec rake

doaboa

FIRST TIME SETTING UP NPM/NODE IN AN APP WITH RAILS ASSET PIPELINE
- make sure you have node and npm installed globally (use brew or whateva you like). Check install with node -v or npm -v
- On the heroku interface, go to app > settings > add nodejs under 'buildpacks'
- in app.json, under buildpacks, add "url": "heroku/nodejs"
- in application.rb, add "config.assets.paths << Rails.root.join('node_modules')"
- in the config/intializers folder, create npm.rb with this: "system 'npm install' if Rails.env.development? || Rails.env.test?"
- run "npm init" (creates a package.json in your root folder)
- add node_modules to your gitignore
- follow REGULAR USE instructions below

doaboa

- redux
- thunk (actions and promises)
- redux form
- fetch or axios
- router (react or cherry tree)

doaboa

document.cookie.split(/\s*;\s*/g).reduce((memo, value) => {
  const keyVal = value.split('=')
  memo[keyVal[0]] = keyVal[1].length
  return memo
}, {})

doaboa

JS_PATH = "app/assets/javascripts/**/*.js"; 
Dir[JS_PATH].each do |file_name|
 puts "\n#{file_name}"
 puts Uglifier.compile(File.read(file_name))
end