Deploying your web app to Render

• Render Offering and Payment

• Aside: How does Render work?

• Deploying your app

  • Infrastructure as Code (IAC)

  • Create a new Blueprint

  • Deploy your Blueprint

Congratulations! You’ve built a web application, and now it’s time to share it with the world. In this guide, we’ll walk you through the process of deploying your app on the internet using Render. Render is great, because we can use it for not only static HTML web sites, like our “Link-in-bio” project, but also dynamic (i.e. Ruby backend) web sites that we’ll build with the Sinatra and Rails frameworks.

Use your GitHub account to sign-up. After you sign up, you will need to verify your email address. Once you do that, when you get to the plan selection page, choose Hobby and then scroll down to click “Select plan”. You do not need to enter any payment information for the free Hobby plan.

Render Offering and Payment

Render offers a free usage tier known as the “Hobby Plan” that is perfect for hosting side projects and learning purposes. This plan includes 750 hours of running time per month, 100 GB of egress bandwidth, and 500 build minutes. The best part is, no credit card is required for the free tier.

Web Services on the free instance type are automatically spun down after 15 minutes of inactivity. When a new request for a free service comes in, Render spins it up again so it can process the request.

This will cause a delay in the response of the first request after a period of inactivity while the instance spins up.

If you decide to host larger apps, and want something more powerful to serve real customers, then you can easily scale Render up to a paid plan. Alternatively, you may end up going with a service like Heroku, Fly or hatchbox.io. But, the Render individual plan should be sufficient (and free!) for now.

Aside: How does Render work?

Render supports direct deployment of your applications without the need for containers (e.g. Fly.io). You can deploy your app by connecting it to your Git repository. Whenever you merge into your main branch, Render copies all of your code to a server and runs the app similar to how you might in a codespace.

The deployment process is based on an “Infrastructure as Code” framework, where you define a render.yaml file to declare all the services required to deploy your app.

In simple terms, whenever you make changes to your main branch, Render re-deploys your app automatically.

Now, let’s dive into deploying your app!

Deploying your app

Infrastructure as Code (IAC)

Before we deploy, let’s set up the render.yaml file in your project repository. This file tells Render how to manage your app’s deployment.

Open the file called render.yaml in your codespace (you should see it on the left panel file explorer in the root directory, i.e. not in a sub-folder).

If you don’t find the file, you can create it, and carefully copy and paste this code into that new render.yaml file (use the icon in the top right corner to copy-paste):

1
2
3
4
5
6
7
services:
  - type: web
    name: MYAPPNAME # the name of this service, eg your app name
    env: ruby # this app is written in ruby
    plan: free # make sure to set this to free or you'll get billed $$$
    buildCommand: "./bin/render-build.sh" # we already created these two files for you
    startCommand: "./bin/render-start.sh" 

Make one change to this file: replace MYAPPNAME with your application’s name (e.g. hello-world or something else; only use letters and dashes in the name, no spaces).

Commit and push this change to your repository to proceed. (See the previous lesson for instructions on committing and pushing.)

Create a new Blueprint

For every app you deploy on Render, you’ll need to create a new “Blueprint Instance” to specify rules for that app.

First, go to your Render dashboard, and click on “+ New” and select “Blueprint”.

Make sure to connect Render to your GitHub account and select the repository you want to deploy. If you don’t see the repository you want to deploy, click “configure account” to allow Render access to the repository you want to deploy. It’s a good idea to only allow access to the repositories you’d like to deploy. After you follow the steps below, you will need to wait a few minutes while your app builds and deploys.

Deploy your Blueprint

Now that your GitHub repository is connected, name your Blueprint, and choose the branch to deploy from (likely you should just leave this as main), then enter a name for the app and click “Deploy Blueprint”:

Render will detect the render.yaml file and start deploying your application. 🪄

When the deployment is complete, click on your new web service.

In your web service, you can monitor deployments, logs, environment variables, and more. Most importantly, you’ll get a live URL to visit your app.

Be patient while you wait for the app to finish deploying and the link to go live. This can take a few minutes!

Here’s something neat: Because we set Render to deploy from our main branch and connected the app with the GitHub repository, anytime you make a change to your app and commit and push that change, the live app will re-deploy with your updates!

And that’s it! Your web site is live, and you can share the link with anyone. 🎉

Your Render dashboard at dashboard.render.com is where you can view and interact with any of your deployed apps.

If you want a custom domain name for your app, you can follow the steps outlined in this manual from Render.

You’ve successfully deployed your app on Render! Now your creation is accessible to the world. Feel free to experiment, expand your app, and keep learning.