Creating a New Strapi Project
Hello everyone. My name is Braden Gerard, and today we're going to look at how you can host Strapi on Digital Ocean.
We're going to start by creating a brand new project. So, we're going to run npx create-strapi-app@latest and we're going to call it my Strapi app.
We'll use the quick start because that'll give us a nice SQLite database to run locally. Although, we won't be using that in this tutorial, it is very nice for local development. We will be setting this up on Digital Ocean and using Digital Ocean's hosted PostgreSQL database.
So, we'll just let this finish installing.
All right, the installation is just finishing up there now. And it's going to launch our Strapi application, but we don't need to open that up right now. We'll just close that out. And what we're going to do is we're going to go into that directory, so my Strapi app, and then we're going to open it up in Visual Studio Code.
Configuring the Production Database
And we can see from our file explorer here that we have some default files here generated for us within the quick start project. But, we have this config folder. And inside this config folder is all of the different configurations for the application. The one we're going to be looking at specifically for this is the database.js file. So, this is the default file that will run if you don't specify any environments.
Now, this is good for if you're running it locally and you want it to just use a default SQL database like it's currently set up to do. But, since we're going to be hosting it on Digital Ocean, we're going to make an environment folder. So, we're going to make a production folder inside of there.
And then inside that environment folder and the production folder, we're going to make a new file called database.js. And what Strapi will do is it'll use this as the configuration whenever the node environment is set to production. So, this will become the database config and it'll overwrite this top-level one.
So, we'll just go over to Strapi's documentation and we'll get their default Postgres database configuration here. We'll take that back over to our code and we'll put that in.
We can leave all of this as is because we're going to be overriding these environment variables inside of Digital Ocean's control panel, but we do need to change this SSL object here a little bit. So, we need to get the SSL certificate that Digital Ocean's going to provide us. And that certificate we can set by going CA from environment and then giving the environment variable name that we want to use for the certificate. So, we'll say DATABASE_CA.
And that's all we have to change in this configuration. So, we'll save that.
Installing Dependencies and Pushing to GitHub
And then we will initialize this as a Git repository.
We'll add everything in the project.
So, initial commit.
And then we'll get that pushed up to GitHub so that we can use GitHub to deploy it into Digital Ocean.
But before we do that, there's one library we do want to install. It's the PG library. So, we'll do npm install pg.
And that will allow the Postgres client to work with our Postgres database so that our Strapi application can communicate with the database.
So, we've installed the PG library now. And if we look in our package.json, we should see that there's now an additional dependency, which is the PG dependency. Perfect. So, let me just add that to get.
And I've already set up a GitHub repository for this. So, we'll add the remote.
So, put that in there.
And then we will add the branch of main.
And then finally we will push it up to the origin of the main branch.
Creating a New App on DigitalOcean
Now that things are pushed up to GitHub, we'll go over to our Digital Ocean admin panel.
In the Digital Ocean admin, we can click on create at the top right corner after you've logged in and you can click on apps. This is a new offering Digital Ocean gives you to deploy applications straight from your code without having to do too much setup work. So if we click on apps, we can then select a hosting Git provider to pull our code from. We'll go with GitHub.
And then we can select the repository that we want to use. So we'll say my Strapi app. And then it will ask you what branch you want to deploy from. We're just going to deploy from the main branch.
We'll say we want it to auto deploy every time we commit to that branch and hit next.
And then it detects that our Strapi application is a Node.js application. So we will go down and just modify any settings that need to be changed here. The port needs to be set to 1337 and that's all we should need to change here.
Adding a Database and Finalizing App Setup
We then want to add a database. We'll just leave the default name as DB and we'll say add database. And that'll give us a development Postgres database with 512 megabytes of RAM and one shared CPU and a 10 gig disk. That's lots for this test project and you can of course upgrade that if you need to for your production environment. We'll hit next.
And then you can name your Strapi application. We'll just call this my Strapi application.
And then select the region you want this deployed into. We're going to go with Toronto because that is the closest area to myself.
Click next.
And you select the plan that you want. We're going to with the basic plan, and we're just going to go with the $10 a month box size. You can change this for more specs if you need a faster machine for a production hosting environment.
We'll hit launch basic app.
Setting Environment Variables in DigitalOcean
And that's going to create our app and spin it up from the code. Now, it's not going to work right away because as we talked about in our code over here, we have environment variables in our database configuration that we need to set inside of Digital Ocean. These are the defaults for a local environment, but we're running this on a database that's going to have different credentials here. So, we'll need to swap these out for values inside of our admin panel, as well as a couple different environment variables that are set by default in Strapi that are needed. The app keys, JSON web token secret, and the API token salt. All three of these we will also need to put in there. Now, you should change these values in a production environment because you need to make sure that they're unique for your application to be secure.
So, we'll go back here, and in our application, it's going to start building, but this isn't going to work until we set those things. So, we'll go to settings.
And we select my Strapi application here, which is the node component. And here's your database stuff.
If we go down, we can see that we have environment variables here. We can hit edit.
And the database URL is in there by default. We don't need that in this case cuz we're not using a database URL. And then here, we're just going to set all of our environment variables from our code. So, DATABASE_NAME.
All right, we finished putting these environment variables in. You can see that Digital Ocean gives us a very nice way to access the information about our database. We can use this dollar sign curly brace annotation with the DB name, that's the name of our database, dot, and then whatever variables you need to get out of the database for settings. So, this is the database name, username, password, port, hostname, and the certificate that we need.
So, we've also set the app keys, we've set the JWT secret and the API token salt, and we've set our node environment to production. This is important because if you don't set your node environment to production, your Strapi application first off won't be running as performantly and as secure as it should be, but it also won't be using that database configuration file that we set inside of the environment production folder here to select the proper post grass configuration settings. It'll instead be using whatever is the default, which is the the SQLite database. Um so, if we want to use in the PostgreSQL database, which is our database in Digital Ocean, we need to make sure our environment's set to production.
Uh so, we'll save this and that's just going to redeploy our application. And when that finishes redeploying, we should be good to go.
Verifying the Live Deployment
All right, it's just finishing up deploying and it should be live here any minute.
And our application is now live. You'll see it says that your deployment has went live and you can click on this to get the link to the live app, and you can also see the temporary link that is created for you here for your app that's hosted on Digital Ocean. So, if we click on this link, it will open up our Strapi production running application.
We can go to /admin and it will give us the initial sign up form to create our first administrator. So, we'll put that information in and then we will hit let's start.
And there's our Strapi application.
Important: Configuring Asset Storage
So, there's one thing that I didn't mention about setting things up on Digital Ocean and we sort of skipped over it for time's sake on this video, but you definitely would want to also set up a plugin for a third-party asset provider where you would host images, videos, things like that that you upload to Strapi.
Because since this is running on Digital Ocean app platform, whenever you push a new commit or if your server needs to scale, you're not guaranteed that that storage space on that server is going to be around forever. So, you will lose everything that's saved on the server every time a new deployment happens or something like that.
So, make sure to set up a third-party provider that you can store your assets on like S3 or Digital Ocean Spaces or something like that. That's it for setting hosting up on Digital Ocean.
