Deploying Headless Strapi to Netlify and Digital Ocean — Part 4: Running your Strapi app on the droplet

Getting strapi on the server

Since we used the NodeJS 1-click app from Digital Ocean, our server already has Git installed on it.

1. SSH into your server and cd into the directory where you want your app to live. In my case, I'm going to put my app in /var/www and for the sake of this article I'll be using that as my path everywhere
2. I'm using Gitlab for source control and prefer to use SSH to clone my repositories so I need to create an SSH key for it (Gitlab provides simple instructions to generate one). If you are using the HTTPS way then all you need to do is run your command and it will prompt for credentials
3. Now git clone your repo
4. cd into your project root folder and run npm install

5. Here's where the NodeJS 1-click comes in handy again because they already installed pm2 for us (pm2 is a process manager)

   1. Make sure you are in the root directory of your project. For me it's /var/www/frontendcuts-backend
   2. Now simply run pm2 init which will generate a file named ecosystem.config.js
   3. Edit that file and paste this in:

   module.exports = {
     apps: [
       {
         name: 'strapi',
         cwd: '/var/www/frontendcuts-backend', # replace this with path to your app
         script: 'npm',
         args: 'start',
         env: {
           NODE_ENV: 'production',
         },
       },
     ],
   };
   

   1. We are almost there! We still need to connect the our MongoDB Atlas Cluster to the app. Once you create your cluster (instructions here), make sure to give Network Access to your droplet IP Address and under Database Access you need to create a user that you will use in your connection string.
   2. Back on your server create a .env file in the root folder of your project and paste the connection string from Atlas into the DATABASE_URI variable (On your cluster page there's a "Connect" button). Here's an example:

   DATABASE_URI=mongodb+srv://<your-db-admin-user-name>:<password>@cluster0.xxxxx.azure.mongodb.net/<database-name>?retryWrites=true&w=majority
   

   Make sure to add any other environment variables you might need (API keys for other services, etc)

   NOTE ABOUT YOUR DATABASE: Because this is an existing project you might have to migrate some of your strapi database collections to your atlas cluster. Strapi provides some CLI commands to help dump and restore config collections.

6. Finally let's run the app. In the root folder of your project run pm2 start ecosystem.config.js and you should see some output like this:
   
   

7. To verify your app is running and started up correctly you can use the pm2 log command to see the output. If everything looks good, you should be able to visit your API subdomain url and see this:
   
   

8. Visit your admin subdomain and you should be able to create your admin user, login, and access the entire Admin Panel.

WE DID IT!

We now have:

• https://frontendcuts.dev is our main website
• https://api.frontendcuts.dev is where our headless strapi is accessible
• https://admin.frontendcuts.dev is our admin panel UI that connects to strapi backend

Comments

[Alexandre Malhão]

Great article!
It might be worth mentioning that we need to update the 'config/database.js' file so it acknowledges the DATABASE_URI we've set in '.env'

// config/database.js
module.exports = ({ env }) => ({
  defaultConnection: 'default',
  connections: {
    default: {
      connector: 'mongoose',
      settings: {
        uri: env('DATABASE_URI')
      },
      options: {
        ssl: true,
      },
    },
  },
});