How to deploy the Face Recognition API for free with Render - Alternative To Heroku

This would benefit people doing ZTM Academy's "Complete Web Developer in 2023: Zero to Mastery" course. If you are interested in this project and the course, then become a member of Zero To Mastery.

This article focuses on ZTM Academy's "The Complete Web Developer in 2023" course. Following up on the Face Recognition Project, the course demonstrates how to upload to Heroku. Due to the company's generous free tier expired on November 28, 2022, consumers must now buy a subscription plan from Heroku. This article teaches how to deploy the server API onto Render. It's a free alternative to Heroku with a similar easy deployment process.

So, let's get started.

What to Do Before Deploying

1. Sign into your render account here
2. Copy or generate your authorization/personal access token from Clarifai API

Create a render database

1. Click the "New PostgreSQL" button on the PostgreSQL card in the dashboard or the "New +" button in the header next to your profile image after logging in.
   On click, you will see the following screen:
   

   You can give your database a memorable name.
   The database name and user name cannot be changed after creation. If you omit them, Render will generate random values for them.

2. Click the Create Database button and you will be presented with the following screen:
   

3. Copy/Write down your database's hostname, port, username, database from the database page. We will need to enter this into our server.js

Setup for connecting to the database in the API

For security reasons, I installed the dotenv npm package:

npm install dotenv --save

Next, in the root, create a file called '.env' that will need to be added to the '.gitignore' file before committing to your git repo.

In the .env file, input the Clarifai api key and your database password like shown:

DB_PASSWORD={your database password},
API_CLARIFAI={your clarifai key}

In your server.js, add to the top:

require("dotenv").config()

Also, you need to change the connection: options in the knex module to your database's hostname, port, username, database like so:

const db = knex({
  client: "pg",
  connection: {
    host: "{your database hostname}",
    user: "{your database username}",
    database: "{your database database}",
    password: process.env.DB_PASSWORD,
    port: 5432,
    ssl: true,
  },
})

process.env.DB_PASSWORD would come from your .env file

If you did the optional gRPC Clarifai API, you can change the

metadata.set("authorization", "Key {YOUR_CLARIFAI_API_KEY}");

to

metadata.set("authorization", `Key ${process.env.API_CLARIFAI}`)

Connect to the database

In the course, you learn how to use PSequel to connect to the database. But I like to use Postico which is similar, here are the steps I follow.

1. First, open Postico and click on the New Favorite button in the bottom left corner.

2. In the New Favorite window, enter the connection details for your database. This includes the host, port, user, password, and database name. Check the Save in Keychain box.

3. Once you have entered the connection details, click on the "Connect" button to establish a connection to the database.

4. If the connection is successful, you will see a list of your databases in the left-hand panel. Click the database you want to connect to, which should appear to the right.
   

5. Once you are connected to the database, you can explore the tables and data within it using the tabs below the main window. You can also run SQL queries using the query editor located above your database in the left panel.

6. To disconnect from the database, simply click on the X button in the top left corner.

Overall, Connecting to a database using Postico is a simple process. By following these steps, you can easily access and manipulate your database data.

Deploy the API as a Web Service

1. Select Web Service from the New + dropdown in the Render Dashboard.
   

2. Select the API github repository to deploy from. You'll need to connect your Github account to Render if you haven't already. Public and private repositories are also supported.
   

3. Specify the following. Render will auto populate some values with the best guess on your code.

   • Name: A name for your Web Service
   • Environment: Node
   • Region: This needs to be the same region as your render database
   • Branch: The git branch to build
   • Build Command: npm i or npm install
   • Start Command: node server.js
   • Plan: Choose from the available plans.
   • Advanced: you can specify environment variables here

4. Click Create Web Service. Once the build completes, your service starts, and it is listening on a port, you can connect to the service.

   By default, Render uses Nodes version 14.17.0.
   Follow the procedures in this link to customize it for your app.

It's been a long road, but you've finally made it to the end of this article. Now go ahead and finish up that project you've been working on. And don't forget to host it using Render, the free and easy-to-use alternative to Heroku.

Thanks for reading, and happy coding!