Deploying to Render

January 30, 2025 · View on GitHub

Deployment is a fancy term for getting your website on the web. After building out your app, you might want to share it with others and to do that you need to deploy your app to the web where others can access it. In this lesson, we'll learn more about deployment, and learn one way to deploy an app.

Objectives

Participants will be able to:

Deploy their website to a third-party hosting service such as Render.

Specific Things to Learn

What is deployment?
Render - a cloud-based server

Challenges

It can take some time to deploy your application, so you won't see new changes right away the way that you can locally. Databases can also expire, and most free deployment services are fairly limited.

Common Mistakes

Not pushing code before deployment, resulting in an outdated deployment even if the app has been updated locally
Receiving an error similar to the following after completing step 7:
```
psql: error: connection to server on socket"/tmp/.s.PGSQL.5432" failed:
FATAL: database "moralesfamily" does not exist
```
If you see this, it means your machine is looking for a database that hasn't been made yet. You need to create a database with that name, like this: createdb moralesfamily;. You should then be able to run the command without errors.

Lesson

Render is a cloud-based service you can use to put your site on the internet for people to interact with.
Learn about deployment by going through the Techtonica Slides on Deploying

Deploying

Make sure that you've merged your production-ready code to your main branch before deployment so that the code being deployed is up to date.

Log into Render with your GitHub account.
You will need to add a YAML file to your project. The YAML file has a script with instructions telling Render how to deploy your project.

Go to the main branch of your project on GitHub and add a file named render.yaml.
Copy and paste the render.yaml file contents into your file.
In another window, grab the repo URL to paste into the repo: line instead of what is shown on line 6 of the screenshot. The rest of the inputs should be fairly standard. The buildCommand and startCommand are telling Render what steps to take to launch your application.

If you'd like to dig into what's possible with databasing prompts, take a look at this example.

Commit these changes to the render.yaml file.
Open up a terminal window and navigate to the main branch of your local copy of your project. git pull so that the YAML file you just created from the browser is now added to the local copy of your project.

Navigate to your server and run the command pg_dump -d <name-of-database> --column-inserts > db.sql. Note that there are two dashes before column-inserts. The terminal doesn't tell you anything if it works correctly, but if you check your database it will be updated accordingly.
Navigate back to your Render account. Click New+ and select PostgreSQL. Select the free option. Render will create the database for you and generate all the associated keys.
- Source: 0.0.0.0/0
- Description: Everything
- Test IP Address: 0.0.0.0/0
Save these so that the generated keys will be updated according to source and description; that is, they will use Render's keys when deploying from Render, and local keys when running locally.
Copy and paste the "PSQL Command" to a doc, separating everything before psql (don't delete; you will need the password string.) Add -f <dump-file-name>.sql to the left over command. You should have something that looks like this:

psql -h dpg-csc5010gph6c73bm6cg0-a.oregon-postgres.render.com -U daaimahtibrey techtonica_t4x1 -f db.sql

PGPASSWORD=<insert-your-pg-password-here>

Navigate to the directory that contains your dump file and enter the first command. You will be prompted for the password; this will not show in the terminal. This command is telling the SQL server, "Hey, copy everything in this file", and hitting enter will do just that. Then the database will appwar on the Render dashboard because it copied everything from the db.sql file, as in the below screenshot.
Navigate back to Render. Go to Web Service Dashboard > Environment > Add variable. Add key value pairs for each variable and save your changes. You don't need the database url anymore because you are now running using the database created on Render. You also don't need quotation marks around each value, Render handles that when you add each variable. Render will automatically deploy with the changes.
Add your “Internal Database URL” value to your web service as an “Environment Variable”, titling the variable what your application has after the process.env in the server (for example DATABASE_URL).
If you are using Auth0, navigate to your dashboard. Where you added the localhost URLs to the Allowed list, add your Render.com-generated address. Once you've added the AuthO, go back to Render.com and manually deploy your app with the Auth0 authentication update phase complete.

Relevant Auth0 files and lines of code:
- root/client/.env: This is where you store the secrets you'll be given from your Auth0 account.
- root/client/src/auth/auth0-provider-with-history.js: This is what uses the secrets stored above to connect with Auth0.
- root/client/src/components/authentication-button.js: This determines whether to render the login or logout button and also calls the /api/me route in the server mentioned below.
- root/client/src/components/signup-button.js
- root/client/src/components/login-button.js
- root/client/src/components/logout-button.js
- root/client/src/App.js: holds the current user provided by Auth0 as a state(const { user } = useAuth0();).
  
  Note: You might have noticed at the top of many of these files is the line import { useAuth0 } from '@auth0/auth0-react';. That's your clue that it uses Auth0.
- root/server/server.js (lines 90 - 111 app.post('/api/me'...): This is a route that saves a new user's information in the database after they sign up for the first time with Auth0. You can easily customize this to better suit your own user tables.