Tutorial updated by Fredrick Emmanuel and Paul Bratslavsky

This tutorial is part of the « Cooking a Deliveroo clone with Next.js (React), GraphQL, Strapi and Stripe » tutorial series.

Table of contents

• 🏗️ Setup (part 1)
• 🏠 Restaurants (part 2)
• 🍔 Dishes (part 3)
• 🔐 Authentication (part 4)
• 🛒 Shopping Cart (part 5)
• 💵 Order and Checkout (part 6)
• 🚀 Bonus: Deploy (part 7) - Current

Note: the source code is available on GitHub here

🚀 Bonus: deploy

At this point, you only need to deploy our API and the web app. Strapi can be hosted on any major provider offering node deployments (Strapi Cloud, AWS, Heroku, DO, Railway, Render). Read further about the deployment of Strapi.

Prerequisites

• Nodejs v16+ installed
• A GitHub account
• A Vercel account

Deploying the Backend

In this article, we will deploy our backend Strapi source code to Render. Render is s a fully-managed cloud platform where you can host static sites, backend APIs, databases, cron jobs, and all your other apps in one place. It is a fully-managed cloud platform where you can host static sites, backend APIs, databases, cron jobs, and all your other apps in one place.

Getting Started

Let’s install the following packages that will help us to easily destructure our PostgreSQL database’s URL to obtain the PostgreSQL connection details.

    npm i pg pg-connection-string

Next, open the database.js file in the config folder and replace the code in it with the one below.

1    const path = require("path");
2    
3    const parse = require("pg-connection-string").parse;
4    const config = parse(process.env.DATABASE_URL);//Getting the URL from the Environment
5    
6    module.exports = ({ env }) => {
7      const client = env("DATABASE_CLIENT", "postgres");
8    
9      const connections = {
10        mysql: {
11          connection: {
12            connectionString: env("DATABASE_URL"),
13            host: env("DATABASE_HOST", "127.0.0.1"),
14            port: env.int("DATABASE_PORT", 5432),
15            database: env("DATABASE_NAME", "strapi"),
16            user: env("DATABASE_USERNAME", "strapi"),
17            password: env("DATABASE_PASSWORD", "strapi"),
18            ssl: env.bool("DATABASE_SSL", false) && {
19              key: env("DATABASE_SSL_KEY", undefined),
20              cert: env("DATABASE_SSL_CERT", undefined),
21              ca: env("DATABASE_SSL_CA", undefined),
22              capath: env("DATABASE_SSL_CAPATH", undefined),
23              cipher: env("DATABASE_SSL_CIPHER", undefined),
24              rejectUnauthorized: env.bool(
25                "DATABASE_SSL_REJECT_UNAUTHORIZED",
26                true
27              ),
28            },
29          },
30          pool: {
31            min: env.int("DATABASE_POOL_MIN", 2),
32            max: env.int("DATABASE_POOL_MAX", 10),
33          },
34        },
35        postgres: {
36          connection: {
37            connectionString: env("DATABASE_URL"),//DESTRUCTURING THE URL
38            host: config.host,
39            port: config.port,
40            database: config.database,
41            user: config.user,
42            password: config.password,
43            ssl: env.bool("DATABASE_SSL", false) && {
44              key: env("DATABASE_SSL_KEY", undefined),
45              cert: env("DATABASE_SSL_CERT", undefined),
46              ca: env("DATABASE_SSL_CA", undefined),
47              capath: env("DATABASE_SSL_CAPATH", undefined),
48              cipher: env(
49                "DATABASE_SSL_CIPHER",
50                "TLS_ECDHE_RSA_WITH_AES_128_GCM_SHA256"
51              ),
52              rejectUnauthorized: env.bool(
53                "DATABASE_SSL_REJECT_UNAUTHORIZED",
54                true
55              ),
56            },
57            schema: env("DATABASE_SCHEMA", "public"),
58          },
59          pool: {
60            min: env.int("DATABASE_POOL_MIN", 2),
61            max: env.int("DATABASE_POOL_MAX", 10),
62          },
63        },
64        sqlite: {
65          connection: {
66            filename: path.join(
67              __dirname,
68              "..",
69              env("DATABASE_FILENAME", "data.db")
70            ),
71          },
72          useNullAsDefault: true,
73        },
74      };
75    
76      return {
77        connection: {
78          client,
79          ...connections[client],
80          acquireConnectionTimeout: env.int("DATABASE_CONNECTION_TIMEOUT", 60000),
81        },
82      };
83    };

Now, create the following folders: env and production, and a file: plugins.js, in the config folder.

1    config
2     ┣ env
3     ┃ ┗ production
4     ┃ ┃ ┗ plugins.js

Add the following to the plugins.js file that will help config the graphql plugin.

1    module.exports = {
2      graphql: {
3        config: {
4          endpoint: "/graphql",
5          shadowCRUD: true,
6          playgroundAlways: true,
7          depthLimit: 10,
8          amountLimit: 100,
9          apolloServer: {
10            tracing: false,
11            introspection: true,
12          },
13        },
14      },
15    };

Source: https://github.com/strapi/strapi/issues/9105#issuecomment-1080073060

To deploy our Strapi’s source code to Render, we need to deploy the application to GitHub.

    git init
    git add .
    git commit -m "first commit"
    git branch -M main
    git remote add <repository url>
    git push -u origin main

Setting up PostgreSQL

In this section, we will create a PostgreSQL database using the Render services.

1. Navigate to Render’s signup page to create an account if you don’t have one. You can choose to signup with your Google, GitHub or GitLab account.

2. Once the installation is successful, you’d be redirected to your dashboard. Click on New and select PostgreSQL.

3. You’d be redirected to a screen where you’d be prompted to provide the name of the database and the user.

4. Lastly, select your desired plan and hit the Create Database button. This tutorial makes use of the free tier as seen in the output below.

Following all these steps will successfully create our PostgreSQL database. Render has two kinds of PostgreSQL URLs, Internal and External Database URLs. Internal URL is used when the application that is using the Postgres database is hosted in Render. External URL is used when the application is hosted somewhere else and this requires more configuration. Since we are hosting our Strapi application on Render, we would make use of the Internal URL. Scroll to the Connections section and copy the Internal Database URL.

Deploying Strapi

1. Once the database has been created successfully, select New and click on Web Services.

2. Next, you’d be prompted to connect your GitHub account. Once you’re connected, select All repository or specify the Strapi repository.

3. Search for the Strapi repository and click Connect.

4. Next, give the project a name and set the Root Directory to the folder that contains Strapi’s source code.

5. Set the Build Command to npm install && npm run build and the Start Command to npm start

6. This tutorial selects the free tier in the Select Plan section. You can choose to select another plan according to your taste.

7. Scroll to the bottom, click on Advanced, and let’s add the following to the environment variable. Paste the Internal Database URL you copied from the previous section.

    DATABASE_URL: Internal Database URL
    APP_KEYS: s4RAEbsJAcvpmMgGdWkmMQ==,/yh3FHR2u3SHyaSH8v1IZw==,5TcP4sY0KOl5t7a3ycuBwg==,thCs474mxnaSVY1+fk3QtA==
    JWT_SECRET: S8n42b7XulDz0A2z+/xeZQ==
    API_TOKEN_SALT: Onwo9oDUUf294KJ8W25IbQ==
    ADMIN_JWT_SECRET: ZOnwo9oDUUf294KJ8W25IbQ==

9. Lastly, scroll down and click Create Web Service and watch the build logs for any errors.

Feel free to comment in the comment section on any errors encountered while deploying the code.

Setting up Strapi Admin

Once your Strapi project is live, you’d be provided with a URL that will be used to access your Strapi admin panel. This URL can be found at the top of the page.

Copy out the URL and append /admin to access your admin dashboard. If you are not registered, you’d be prompted to create an admin user.

In your Strapi’s admin dashboard, click on the following to configure permissions for the various content types.

    ┣ Settings
    ┃ ┣ Roles
    ┃ ┃ ┗ public

Select the specific CRUD operations you need for the various content types and hit Save.

Deploying the Frontend

In this tutorial, we will make use of the Vercel hosting platform to deploy our NextJS code.

1. Head to your Vercel dashboard, select Add New and click on Project.

2. Search for the repository and hit import.

3. Under Root Directory, click on Edit and select the Frontend folder.

4. Click on Environment Variables and add the deployed Strapi URL.

5. Lastly, hit Deploy and look at the various logs for any errors.

Conclusion

Huge congrats, you have successfully achieved this tutorial. I hope you enjoyed it!

Note: The source code is available on GitHub here

Still hungry? Feel free to add additional features, adapt these projects to your own needs and give your feedback in the comments section.

Share your meal! Did you enjoy this tutorial? Share it around you!