How to Deploy Strapi v4 on the DigitalOcean App Platform with MySQL Database

This is a step-by-step guide for deploying a Strapi v4 project to DigitalOcean's App Platform with managed mySql Database

First, log in to your DigitalOcean account.

If you don't have a DigitalOcean account you will need to create one, you can use this referral link (opens new window)to get $100 of free credits

Step 1 Create a Database on Digital Ocean

Databases can be created using DigitalOcean's Managed Databases.

Then select your database as mySql and choose the data center

Once done, click on create a database cluster

Once your cluster is created, go to Getting Started section and click next.

In Secure this database cluster section, add your IP showcased on Digital Ocean but do not believe it. Because Digital Ocean sucks in figuring out IP addresses. Not sure why.

So go on Google search for my ip and then select your IP copy it.

Then paste it in the approved section:

Once done, copy your database connection details and save it securely in a file.

Then go to user and database section and create another user. I will explain later why we did that.

Step 2 Install Strapi v4 on your local machine

This is a very simple step.

Open your terminal.

cd into folder where you want to install strapi v4.

Then run this command:

npx create-strapi-app@beta name-of-your-folder

Notice we are not using --quickstart flag here, that's because we want to use managed MySQL database.

After that, terminal will walk you through some steps where you have to provide the Database connection details.

Once done, press enter, and it will start installing strapi v4 on your local machine.

You will see something like this once the installation is done. Please do not build or run strapi server - THIS IS IMPORTANT

Now cd into your strapi installation folder

cd beta/

and open it in your IDE mine is VS code so I will just do it with typing

code .

Step 3 Configure Your Strapi Project to connect with managed database

To deploy your Strapi v4 app, you will need to create a database configuration file.

We will be using MySQL for this example, but you can connect to any of the databases provided by DigitalOcean and supported by Strapi.

With the setup below, you will only need to set an environment variable for the DATABASE_URL to connect to your MySQL database.

First, install the pg-connection-string (opens new window)package (with npm install pg-connection-string or yarn add pg-connection-string) then add the following to config/env/production/database.js:

Create a file:

config/env/production/database.js

Add the following into your file:

module.exports = ({ env }) => ({
  defaultConnection: 'default',
  connections: {
    default: {
      connector: 'bookshelf',
      settings: {
        client: 'mysql',
        host: env('DATABASE_HOST', 'localhost'),
        port: env.int('DATABASE_PORT', 3306),
        database: env('DATABASE_NAME', 'strapi'),
        username: env('DATABASE_USERNAME', 'strapi'),
        password: env('DATABASE_PASSWORD', 'strapi'),
      },
      options: {},
    },
  },
});

Your application is now ready to deploy to the DigitalOcean App Platform.

Step 4 Push your local code on GitHub

Now you have to push your local code to GitHub. I know its very frustrating, but this is important. You cannot deploy on DigitalOcean unless you have your code on GitHub.

If you don't know how to do that, you can follow my article here> I have written this amazing article about how to push your local code on GitHub.

git init
git add .
git commit -m "initial commit"
git remote add origin https://github.com/harshalone/strapi-v4.git
git push -u origin master

Step 5 Create your App on Digital Ocean

First click on the Manage Dropdown

Then Click on App -> Create

Then Select GitHub

If you are logging in for the first time into your digital ocean account, and you have not authorised your GitHub access. Then you have to click on GitHub link and approve your GitHub account access.

Otherwise

Just select your repository and branch and click on next button.

Step 6# Add Environment Variables and other Configurations

Here, you will configure how DigitalOcean App Platform deploys your Strapi app. You can leave most things default. The only things you need to change are shown below:

Whatever you named your database, here is what you should use in the environment variables.

Environment Variables

: Add 
DATABASE_URL: ${defaultdb.DATABASE_URL}

Build Command

: NODE_ENV=production npm run build

Run Command

: NODE_ENV=production npm start

Step 7 Select a Database

Click on the Add a Database button. We will be selecting the database we have created before.

For instance, we name the database defaultdb, and we use the environment variable value: ${defaultdb.DATABASE_URL}

Click "Next".

Step 8 Name your web service

You can choose whatever name you would like in your subdomain.

Step 9 Choose your plan and launch the app

Then, it will take a while to start deploying and get your app running on digital ocean.

Article Sources:

https://strapi.io/documentation/developer-docs/latest/setup-deployment-guides/deployment/hosting-guides/digitalocean-app-platform.html