How to install Strapi headless CMS with Cleaver

Strapi is a popular JS headless CMS that works perfectly as an API for your VueJS / NuxtJS front-end apps.

It’s easy to install Strapi on your VPS using Cleaver in just a couple of steps.

Step 1 - create project on your local

On your local machine, install Strapi via terminal by running the
yarn create strapi-app my-project command.

Replace “my-project” with the name you want to assign your project.

Select Custom when prompted so you can setup your database of choice.

Note: If you select quickstart, this will install SQLite. You can also use MySQL or PostgreSQL and the best way to do that is to go through the setup wizard to select your db type and then add the db name, username, and password. You’ll need to have the db setup on your machine prior to going through the database steps.

Once installation is complete, run yarn develop to run on your local machine - just to make sure it runs correctly before deploying to your server.

Step 2 - update db connections and push to Git repo

If you plan to use a different database name, username, and password, on your production server, then update the connection settings in /config/database.js.

image

Push your project to your Git repo. Cleaver integrates with GitHub, GitLab, and Bitbucket.

I added my Strapi project to my GitHub repo at https://github.com/armgitaar/mystrapi. Cleaver lets you pull from any public GitHub repro, so feel free to use mine. Just take note of how I setup my database connection by referring to the screenshot above.

Step 3 - add server and site in Cleaver

Provision a new server in Cleaver.

Note: when we deploy Strapi, it will take quite a bit of processing power to build prod assets. If you select the cheapest options from the VPS providers, then you will likely not want to host other sites on that server. If you get to the build step and it fails, it’s likely due to not enough memory on the server.

Once server has completed provisioning, click Add site. Select Node JS, add in your domain or select to use a Cleaver test domain.

Step 4 - set up your database

In the server section, select Databases. Then select which database you’d like to install (MySQL, MariaDB, PostgreSQL).

In my project, I selected MySQL. So, I’ll install MySQL 8 to install. Once installed, I’ll create a database named strapi, a username admin, and password password.

Step 5 - set up web app and deploy!

Once your server, site, and database is ready, then head over to the Web App section in Cleaver. Cleaver will have automatically create a base web app and we’ll just fill in a couple pieces of information.

Make the following updates on the web app settings page -

  1. Select VC provider
  2. Add repo; ex: armgitaar/mystrapi
  3. Add branch; ex: master
  4. Set entry point to npm
  5. Set arguments to start
  6. Click Update

Then, click into the Web app, go to Deployment Hooks, select Build Assets and enable hook.

We’re now ready to go to the deploy page and Deploy! :rocket:

Voila!

As easy as that is - we could make it even easier with a 1-Click install. Let us know if that is something you want by liking this and/or commenting below!

1 Like

@amiedema It’s been a while since you published this post, and we’ve seen some changes and improvements since then.

I haven’t succeed in deploying my Strapi app as a Node SSR app though. And I’m not sure what’s wrong so I need some help to complete the process.

I use Github Actions to build the admin UI and trigger the deployment, and use pm2 to launch the app. The deployment completes but when accessing the site URL Cloudflare responds with a 502 bad gateway.

Do I have to define Strapi’s HOST and PORT variables in any particular way? What should I check to debug the issue?

Thanks in advance

For a 502 error I’d guess it’s something like a Port issue or a start script issue.

Things to check:

  • Deployment log (you can now turn on live deployment logs too which may show something extra)
  • App Log Report to see if there are any hints
  • Canary to see what the PM2 status is and if the script path looks correct (you can also restart PM2 to see if that fixes the issue)
  • Check to see if the app is running on a different port than the one that was setup for the site

For Strapi apps with our current GitHub integration, that won’t yet work as the current GitHub integration looks for build artifacts to be placed into an output folder - in which case Strapi tends to put output in root folder which we don’t cover yet.

Also, did you create your own PM2 deployment hook to start the app? If the app is on the root directory, then you shouldn’t have to create a separate PM2 start hook as that is covered with the activation deployment hook.

If you have any trouble figuring out the issue, send me a pm and let me know the name of the site and we can take a closer look.

1 Like

@amiedema Just sent a pm with some details…