Heroku Alternative: How to Deploy A ReactJS Rails API App to Render
Tags: react, rails, webdev, tutorial
Published: 2022-09-28 01:06:15

## The Fall of Heroku
**Heroku recently announced they are discontinuing some of their free plan options starting November 28.** Free plans widely popularized Heroku as a go-to platform as a service (PaaS) for developers to deploy their applications and APIs. Consequently, many hobbyists, programming courses, and existing Heroku projects are looking to migrate to a comparable alternative. After spending time weighing out the available options , I decided to deploy my future projects to Render.com .


## Why Choose Render.com?
Render.com provides free plans for deploying static sites , web services with HTTP/2 and full TLS, PostgreSQL databases, and Redis integration. The deployment process is beginner-friendly and the documentation is easy to follow. Upgrading to a starter plan costs less than a monthly Spotify account. **Setup an AWS S3 bucket for file storage, and you have yourself a great starting point for any application at no cost.**


**If you're starting from a ground zero, follow these instructions to setup your environment to ensure the deployment goes smoothly. If not , skip down to "Configuring Your App for Render"**

## Create A React Rails API App from scratch
1. create a Rails API in a new project folder
`rails new app-name --api --minimal --database=postgresql`

2. cd into the folder and run the following command in terminal
`bundle lock --add-platform x86_64-linux --add-platform ruby`

3. Build out an MVP with routes , controllers, models , migrations, and create a database.

4. create a new React application in a client folder inside the root directory
`npx create-react-app client --use-npm`

5. Add a request proxy inside the client/package.json file
`"proxy": "http://localhost:3000"`

7. Update the start script in client/package.json file 
`"scripts": {
  "start": "PORT=4000 react-scripts start"
}`

At this point , your file structure should resemble something like this, minus a few optional folders and config files, which we will soon add.
![file-structure](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2qjnv1nclxy33wud825w.png)

## Configuring Your App for Render
Now you're ready to configure your app to deploy it to Render.
Follow the following steps to configure your application for deployment.

**1) Sign up for [Render.com](https://render.com/).**

**2) Open config/database.yml file and find the production section.**
- Modify it to gather the database configuration from the DATABASE_URL environment variable. 
- This should be located at the bottom of the file.
```
production:
  <<: *default
  url: <%= ENV['DATABASE_URL'] %>
```

**3) Open config/puma.rb and make sure the following lines are uncommented.** 
- Feel free to clear out the file and copy/paste the code block below.

```
max_threads_count = ENV.fetch("RAILS_MAX_THREADS") { 5 }
min_threads_count = ENV.fetch("RAILS_MIN_THREADS") { max_threads_count }
threads min_threads_count, max_threads_count

port        ENV.fetch("PORT") { 3000 }

environment ENV.fetch("RAILS_ENV") { "development" }

pidfile ENV.fetch("PIDFILE") { "tmp/pids/server.pid" }
workers ENV.fetch("WEB_CONCURRENCY") { 4 }
preload_app!
plugin :tmp_restart
```

**4) Open config/environments/production.rb and  enable the public file server when the RENDER environment variable is present.** 
- This is an existing line of code in the file , which we are modifying.
```
config.public_file_server.enabled = ENV['RAILS_SERVE_STATIC_FILES'].present? || ENV['RENDER'].present?

```

**5) Create a build script to build out your app when you deploy it.**
- This script will automate the build process and update your application every time it is deployed.
- inside your app-name/bin folder , create a file called render-build.sh
- copy/paste the following code into the render-build.sh file
```
#!/usr/bin/env bash
# exit on error
set -o errexit

bundle install
# clean
rm -rf public
# build
npm install --prefix client && npm run build --prefix client
# migrate
bundle exec rake db:migrate
# postbuild
cp -a client/build/. public/
```
- your file should look like this when you're done
![build script](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/tyknodd2z8b73cds6u74.png)

**6) Make sure the script executes by running the following command in terminal.**
`chmod a+x bin/render-build.sh`

**7) Commit and push these changes to your GitHub Repository**

## Deploying To Render

**8) Inside the root directory , create a file name render.yaml. Copy/paste the following code into the file. Replace app_name with your application's name**
```
databases:
  - name: app_name
    databaseName: app_name
    user: app_name

services:
  - type: web
    name: app_name
    env: ruby
    buildCommand: "./bin/render-build.sh"
    startCommand: "bundle exec puma -C config/puma.rb"
    envVars:
      - key: DATABASE_URL
        fromDatabase:
          name: app_name
          property: connectionString
      - key: RAILS_MASTER_KEY
        sync: false
```
The file should look like this when you're done.
![render yaml file](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wwnx1jzn1mk8p8w0hx4m.png)

**9) Commit and push these changes to your GitHub Repository**

**10) Navigate to the Render website and make sure you're logged in.** On the Render Dashboard, go to the [Blueprint](https://dashboard.render.com/blueprints) page and click the New Blueprint Instance button. Select your repository (after giving Render the permission to access it, if you haven’t already).

**11) Your repository branch should already be set to "main", or select whichever branch you want to deploy. I used my "main" branch.**

**12) In the deploy window, set the value of the RAILS_MASTER_KEY to the contents of your config/master.key file.** Then click Approve.

**13) Navigate to your Dashboard and click on the web service you just created.**
![web service](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/24j5xao3r8ei6pad3t1f.png)

**14) Click on the blue Manually Deploy button on the top right hand side and select "clear build cache and deploy"**
![deploy](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/5sxeluamjlu4evkprzkv.png)

15) Wait for your app to successfully deploy and click on the generated URL _your_app_name.onrender.com_ at the top.

And that's how you deploy a full-stack React/Rails API application to Render. If you have any questions , feel free to drop a comment below. If you're a Flatiron Student, drop a comment below if this has helped you.

To see the final result, visit my gitHub repository and Render website if you'd like.

- Website: https://extrackt.onrender.com/
- Repository: https://github.com/nickmendezFlatiron/extrackt

---
#### Resources

- [Getting Started with Ruby on Rails on Render](https://render.com/docs/deploy-rails#create-a-build-script)