Get that React, Rails, MySQL App on Heroku

Creating a Rails app that used the React on Rails gem and a MySQL database gave us the opportunity to learn about deploying this setup on Heroku. Let's walk through the steps so that you can get your app up and running for the world to enjoy! (1) Take the standard step to create your Heroku app: heroku create _YOURAPPNAME_ (2) In Heroku dashboard, add a MySQL Heroku add-on. For example, there is ClearDB and JawsDB. We used JawsDB. (3) In Heroku dashboard, add a DATABASE_URL config variable and set the value as the same url string created by the MySQL add-on (4) Now update that DATABASE_URL string to begin with the adapter `mysql2` which you are using in your Rails gemfile (5) Take the standard step to push to Heroku. The Heroku CLI might report that the build fails and this is OK for now: git push _REMOTENAME_ _LOCALBRANCHNAME_:_REMOTEBRANCHNAME_ (6) You need to add the proper buildpacks, in this order, since you are now building a React and Ruby app: $ heroku buildpacks:clear -r _REMOTENAME_ $ heroku buildpacks:set heroku/nodejs -r _REMOTENAME $ heroku buildpacks:add heroku/ruby --index 2 -r _REMOTENAME_ (7) Try to push to Heroku again. (8) Set your remaining Heroku config variables (9) Run your standard Heroku migrations Now that your app is running, the next set of issues you may run into are when redeploying after making changes! A possible issue are the overlapping package managers of yarn and npm. The npm package manager is the standard used by React, but the React on Rails gem creators decided to use yarn. If there is an issue with yarn and npm, the Heroku CLI will instruct you, so follow the instructions! (1) If present in your repo, delete: package-lock.json (2) Run: yarn install (3) Commit the changes to your repo (4) Push to Heroku We hope this helps you with the initial deployment and redeployment of your React, Rails and MySQL application.