Skip to content

Commit

Permalink
Refactor Render deployment guide
Browse files Browse the repository at this point in the history
For more info see CodeYourFuture#515

This is splitting out that PR into multiple parts. This is part 3 - Render
  • Loading branch information
sztupy committed Jan 27, 2024
1 parent 2c0995d commit 227394a
Show file tree
Hide file tree
Showing 40 changed files with 44 additions and 16 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -2,12 +2,13 @@
emoji: 🚀
title: Deploying to Render
description: Learn how to deploy your website to Render.
weight: 7
---

In this guide, we'll learn how to set up automatic website deployment to [Render](https://render.com/).

{{<note type="tip" title="Tip">}}

This guide is intended for trainees completing the Node, Databases or Final Projects. If you have not reached this part of the course yet, please use the [Netlify Deployment guide](../deployment-netlify/index.md) instead.
This guide is intended for trainees completing the Node, Databases or Final Projects. If you have not reached this part of the course yet, please use the [Netlify Deployment guide](../netlify) instead.

{{</note>}}
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
title: client > database
description: Connecting a client to a database on Render
emoji: 🔌
weight: 4
---

{{<note type="tip" title="Tip">}}
Expand Down Expand Up @@ -54,28 +55,41 @@ This guide uses a database client called [DBeaver](https://dbeaver.io/), but the
# Connecting via node.js
We learnt in the Databases module to use the `pg` library to connect to a local Postgres database.
To connect via render we require an extra flag `ssl: { rejectUnauthorized: false }`, like so:

```javascript
const connectionString = "postgres://jz:someverysecretpassword@dpg-ck107k7dorps738bnga0-a.frankfurt-postgres.render.com/fullstack_3qby";

const db = new Pool({
user: "jz",
host: "dpg-ck107k7dorps738bnga0-a.frankfurt-postgres.render.com",
database: "fullstack_3qby",
password: "NLNXAWPsYPzOn3kKzExavV08DugCC0rx",
connectionString: connectionString,
ssl: {
rejectUnauthorized: false,
},
});
```

Note that the `host` does not exactly match what is shown on the render.com dashboard - you should use the information in `External Database URL` to connect from your own computer:
When connecting to Render's database from your local machine you should use the information in `External Database URL`:
![render.com dashboard connections](render-dashboard.png)
However, if you are running your client on render alongside your server, then you will be able to use the `Internal Database URL` instead. In this case, the `host` will indeed match.

You can also directly copy the url into a `connectionString` and it should work in the same way:
```javascript
const db = new Pool({
connectionString: "postgres://jz:NLNXAWPsYPzOn3kKzExavV08DugCC0rx@dpg-ck107k7dorps738bnga0-a.frankfurt-postgres.render.com/fullstack_3qby",
ssl: {
rejectUnauthorized: false,
},
});
However, if you are running your client on render alongside your server, then you will be able to use the `Internal Database URL` instead.

Note that when committing code to GitHub you should avoid adding any kind of secrets. The `connectionString` above for example contains your database password, and anyone knowing that information will be able to access your database directly.

To avoid this you should set up these values using environment variables. First in your code change the following:

```js
const connectionString = process.env.DATABASE_URL;
```

Then go to your project's configuration in Render, and set up the `DATABASE_URL` environment variable:

![render.com environment settings](changing-environment-variables.png)

Make sure you use the `Internal Database URL` setting. This will let Render know what the database's location is.

To set this value locally you can use the following code:

```bash
export DATABASE_URL=<The external database URL>
```

Note this will only set up this value for the current session. Every time you reload your terminal you will need to re-do this call. To avoid needing to do this all the time, you can opt in using a project called [Dotenv](https://github.com/motdotla/dotenv)
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
title: GitHub > Render
description: How to connect your GitHub to Render
emoji: 🔌
weight: 1
---

1. Click SIGN IN button
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
title: PostgreSQL > Render
description: How to create a PostgreSQL Database on Render
emoji: 🐘
weight: 3
---

1. Click on the New + button, then click on PostgreSQL
Expand All @@ -28,6 +29,8 @@ emoji: 🐘

![Environment variables in the Connections tab](environment-variables.png)

7. The Connect button could be useful for quick Environment Variable reference
7. If you are using a Render database outside of Render, you'll need to use the External Database URL. If you are using the database inside of Render, you should use the Internal Database URL.

8. The Connect button could be useful for quick Environment Variable reference

![Connect button showing quick reference to environment variables](connect-button.png)
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
title: Deploy a server
description: How to deploy a server on Render
emoji: 🍦
weight: 2
---

1. Make sure you have connected your GitHub account to Render (see [How to connect your GitHub to Render](connecting-github.md))
Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
---
title: Serving frontend through backend
description: Serving frontend through backend
emoji: 🖥️
weight: 5
---

Render support frontend deployments either via their CDN, or by changing your backend code to support serving frontend files. If you wish CDN style deployment we suggest you use Netlify instead. For a guide on how to update your backend to support serving frontend files please read [the Fly.io frontend guide](../flyio/serving-frontend) guide.

0 comments on commit 227394a

Please sign in to comment.