Strapi – open source headless content management

When talking about content management systems, WordPress has been a firm leader on the web. Keywords like “nodejs” and “headless” have already become popular with the arrival of new trends and technologies. We are going to introduce the possibility of using one of the leading headless content management systems called Strapi in the Zone virtual server environment.

Strapi is very developer-friendly and fully customisable based on the customer’s needs. If you are unfamiliar with this application, you read more on Strapi’s website, and specifically from its documentation.

For a brief overview, watch the video below:

Pre-configuring the server

Strapi runs nicely on the first Zone web hosting package. If you have a server, you should perform some steps before installing the application:

1. Configure SSH access.

SSH access must be configured to install Strapi. For more information on establishing the SSH connection read the article published on the Zone user support webpage: Establishing the SSH connection (this is in Estonian, but we suggest you to use almighty translator).

2. Add a MySQL user and database.

Although Strapi can also use a SQLite database, it would be wiser to add a MySQL/MariaDB database to ensure creating of backup copies and application reliability. For more information on how to add a database, please read the article published on the Zone user support website: MySQL/MariaDB database user accounts (please use almighty translator).

Please note! Keep your database data securely at hand until the application has been installed, you will need it for configuring.

3. Set the mod_proxy port for your web server.

Add a subdomain by navigating to Virtual Servers – Web Server – Subdomains in My Zone. Click on the Add Subdomain button and once added, set the value of the Application port to redirect incoming requests to (mod_proxy) field to 1337. Your subdomain should be up soon as the name server records are propagated. As an example we have created a subdomain called api.miljonivaade.eu.

The virtXXXX used in the tutorial after that should be replaced with your SSH username and dataXX with the first directory displayed by the pwd command.

Install and configure Strapi

To install Strapi, you need to establish the SSH connection to the server.

Next, run the following command in the root directory (for example /dataXX/virtXXX):

npx create-strapi-app@latest my-projectCode language: CSS (css)

Enter y to confirm and press Enter. You will be prompted for the setup version next, select Custom (manual settings) for this. Otherwise, a functioning application will be installed, but the MySQL/MariaDB database will not be configured. After choosing your options, you will be prompted for the data for the databases and some other configuration settings. You should select mysql for the database and enter the data of the databases you previously created on the next prompts. It should look something like this:

? Choose your installation type Custom (manual settings)
? Choose your default database client mysql
? Database name: dXXXXX_strapi
? Host:  dXXXXX.mysql.zonevs.eu
? Port: 3306
? Username: dXXXXX_strapi
? Password: *************************
? Enable SSL connection: Yes

Creating a project with custom database options.
Creating a new Strapi application at /dataXX/virtXXXXX/my-project.
Creating files.Code language: JavaScript (javascript)

It will then take some time for the configuration wizard to install the required packages and dependencies. When this is finally done, the output should look like this:

Dependencies installed successfully.

Your application was created at /dataXX/virtXXXXX/my-project.

...

Next, go to the application directory created

cd my-project

and configure the application URL

<strong>nano</strong> config/server.jsCode language: HTML, XML (xml)

You must add the previously created subdomain to the file. The final file should look something like this:

module.exports = ({ env }) => ({
  host: env('HOST', '0.0.0.0'),
  port: env.int('PORT', 1337),
  url: 'https://api.miljonivaade.eu',
  app: {  
    keys: env.array('APP_KEYS'),
  },
});Code language: JavaScript (javascript)

In order for the respective configuration to work, you must re-build the application must be using the command

<strong>npm</strong> run buildCode language: HTML, XML (xml)

The application is already configured after that and can be launched in several ways. For example:

# Regular start-up
npx strapi start

# Start as developer version
npx strapi developCode language: PHP (php)

To start really using the application you must open the URL

https://api.miljonivaade.eu/admin and add an administrator user.

Configure Pm2 to ensure the application is kept running

In order to keep the application running after an unexpected crash or server restart, you need to configure pm2 in My Zone. If the application is currently running, you should quit it for now (for example, press Ctrl + C on the console).

1. Create a pm2 ecosystem file

Let’s create the file strapi.config.js in the minu-projekt folder. Its contents must be the following:

module.exports = {
    apps: [{
        name: "strapi",
        script: "npm",
        args: "start",
        cwd: process.env.HOME + "/my-project",
        max_memory_restart : "256M",
        env: {
            NODE_ENV: "production"
        }
    }] 
}Code language: JavaScript (javascript)

2. Configure the pm2 application in My Zone

Go to Virtual servers – Web server – PM2 processes (Node.js) in My Zone and press the Add new application button.

You must fill in the following fields:

Field	Description
name	strapi
script or PM2 .JSON	my-project/strapi.config.js

There is no need to specify the maximum memory usage, as it has been already configured in the ecosystem file. The application should be operational within a few minutes after saving. Executing some pm2 commands on the console will help to confirm it.

The information contained in the command output should show that Strapi is in the running status

pm2 listCode language: PHP (php)

If the application is not running in a few minutes, you can view the error logs by using the following command:

pm2 logs

In conclusion

Strapi is a headless CMS. This means that only the API side of the data structures has been implemented. The visual website visible to the user must be developed separately. There are endless options for developing user interfaces today – Vue.js, React, Angular, Svelte and many more. We installed strapi on the api.miljonivaade.eu subdomain for just this purpose – so that e.g. a web page created on the main domain miljonivaade.eu could display HTML and Javascript files over the Apache web server.

If you are stuck with getting some modern framework to work on a Zone server and would like a similar tutorial for your application, you can send a request to info@zone.eu or by joining our slack.zone.eu channel. Zone is focused on supporting modern technologies in development, and we make every effort to ensure that modern development methods and applications run smoothly on our servers.