Publishing That First Project: Rails API Backend and React.js Frontend
In this blog post I’m going to go over some key steps to publish your first project and get it hosted online. When I finished my bootcamp I thought this would be a simple process, but like many things in the world of coding it wasn’t. My project utilized a React frontend and a Rails API backend, on separate Github repositories, and I chose to use Heroku to host my project. There are many other cloud computing platforms to choose from: AWS, Azure, Netlify, Now, Surge, but I thought that Heroku’s UI design was the most straightforward and easy to use. This is just my opinion so definitely check them all out!
The first key step is to make sure you’re using a PostgreSQL database, and not SQLite. Heroku doesn’t support it so you’ll have to replace the “sqlite3” gem with the “pg” gem in your Gemfile, re-bundle install your dependencies, and then update your database.yml file to look something like this.
Next double-check that you’re using a relative path for your image assets. If you use an absolute path your images will not show up when you deploy. The absolute path only exists locally and not on Heroku. Also make sure you update all of your fetch requests to your Rails API to reflect the URL of your new Heroku app. That means switching from “http://localhost:3000” to something like “https://my-goal-tracker-app-api.herokuapp.com,” or whatever you choose to name your Heroku backend. Another change you need to make is to add a file to the root directory of your frontend repository called static.json with this code inside the file.
{ "root": "build/", "routes": { "/**": "index.html" } }Heroku needs this file to properly deploy static sites and single-page apps. Last but not least, the thing that I struggled with the most was syncing up my backend and frontend repos on Heroku. You need to make sure you use a custom buildpack and not the standard Node.js one. Enter this code into your terminal when deploying your React frontend. Replace “my-goal-tracker-app” with the name of your new Heroku app.
heroku create my-goal-tracker-app --buildpack
https://github.com/mars/create-react-app-buildpack.gitEvery project is a little different and there may be some other changes you need to make depending on the internal structure of your app and what dependencies you’re using. Here are some helpful resources I found while trying to deploy my first app that really saved my life. Happy coding everyone!
