How to Run Ncmaz – Next.js Headless WordPress Blog Magazine on HestiaCP

In this article, we will walk you through the process of setting up Ncmaz, a Next.js Headless WordPress Blog Magazine, on HestiaCP. You can purchase this script from codecanyon by clicking this link here.

Buy Here: Ncmaz, a Next.js Headless WordPress Blog Magazine

If you’ve already followed the steps to install Node.js on your HestiaCP server and configured your environment (as explained in the previous article), then you are all set to move forward with deploying your app.

If you have not followed the previous article here is the link for it. First follow it then come back here to install your headless app in hestiacp.

How to Seamlessly Install and Run Node.js Apps on HestiaCP: A Complete Guide

Running a headless WordPress site with Ncmaz on Next.js is a great way to have fast and scalable static sites that can also dynamically load content from WordPress. Ncmaz takes advantage of WordPress as a headless CMS while rendering the front-end with Next.js, providing a seamless and modern solution for website development.

What is Ncmaz?

Before we dive into the setup, let’s quickly understand what Ncmaz is. Ncmaz is a headless WordPress blog and magazine template built on Next.js. It allows you to decouple WordPress from the front-end, enabling you to fetch and display content from WordPress while benefiting from Next.js’s server-side rendering and static site generation.

In simpler terms, you’re using WordPress solely as a content management system (CMS) while Next.js handles the website’s front end. This separation leads to better performance, scalability, and a smoother user experience. Ncmaz offers a modern design with flexibility, perfect for building blogs or magazine-style websites.

Now that we have a basic understanding of Ncmaz, let’s proceed with the setup.

Steps to Set Up Ncmaz on HestiaCP

1. Log in to Your HestiaCP Server

To begin, you need to access your HestiaCP control panel. If you haven’t already, log in to your HestiaCP account as the user who will manage the domain where your Ncmaz app will be hosted. We will be working with the terminal and file manager to install and configure everything.

2. Install the Required Node.js Version

In the first article, we covered how to install Node.js globally using NVM (Node Version Manager). However, after the installation, you need to ensure that the correct version of Node.js is installed for your app. Ncmaz requires Node.js version 20, so you’ll need to install it in the user’s account. Here’s how you can do it:

1. Log in as the user under which you want to install Ncmaz (e.g., teklog or any other domain user).
2. Install Node.js version 20:

   nvm install 20

3. Verify the installation:

   run below commands to verify the installation of node version and npm version

   node -v
   npm -v

This command will install Node.js version 20 and verify that both Node.js and npm are properly installed.

3. Install the Ncmaz App in Your User’s Directory

Now that Node.js is set up, it’s time to upload or clone the Ncmaz code into the correct directory. For this, you’ll be using HestiaCP’s File Manager or a Git clone to pull the repository.

1. Navigate to the user’s domain folder where the app will reside:

   cd /home/<user>/<domain.com>/private/nodeapp

2. If you have a zip file for Ncmaz, upload it via the File Manager and extract it, or you can directly clone the repository from GitHub if the repository is public:

   git clone https://github.com/nghiaxchis/ncmaz.git

4. Install Dependencies for Ncmaz

Once the code is in place, navigate to the directory where the app is located, and run the following command to install all the required dependencies.

npm install

This command will fetch and install all the necessary libraries for Ncmaz to work.

5. Configure the App

Before running the app, we need to adjust a few configurations:

1. .env Configuration: If you already have an .env file for your app, make sure it’s properly configured with your environment settings, including the WordPress API endpoints. If not, Ncmaz comes with a template .env file, but you can configure this file as per your needs.

   For instance, ensure that you have the correct values for the API URL where WordPress is hosted:

   # Your WordPress site URL. NOTE: Do not include a trailing slash at the end of the URL.
   NEXT_PUBLIC_WORDPRESS_URL=https://panel.diabeteskure.com
   
   # Plugin secret found in WordPress Settings->Headless faust
   FAUST_SECRET_KEY=<add scret key here>
   
   # Your frontend NextJS site URL.  NOTE: Do not include a trailing slash at the end of the URL.
   NEXT_PUBLIC_URL=https://diabeteskure.com
   
   # Enable or disable the RTL mode: ltr or rtl
   NEXT_PUBLIC_SITE_DIRECTION=ltr
   
   # Enable or disable the GEAR setting icon: true or false
   NEXT_PUBLIC_SITE_GEAR_ICON=false
   
   # Enable or disable the GET method for the API calls: GET or POST
   NEXT_PUBLIC_SITE_API_METHOD=GET
   
   #  Google analytics tracking ID
   NEXT_PUBLIC_GA_MEASUREMENT_ID=G-QWRGGRSG4K
   
   
   # Image remote URLs
   NEXT_PUBLIC_IMAGE_REMOTE_HOSTNAME_1=i0.wp.com
   NEXT_PUBLIC_IMAGE_REMOTE_HOSTNAME_2=i0.wp.com

2. Port Configuration: Since Ncmaz will be run as a Node.js app, you need to specify the port. In the package.json file, you’ll see the line:

   start": "faust start"

   Change that line to add your port which you have used in your hestiacp domain while installing nodejs app.

    start": "faust start -p 2770"

   You can change the port number to avoid conflicts with other services on your server, but ensure that the specified port is available.

6. Build the App for Production

Once all dependencies are installed, and the configuration files are set up, you can build your app for production. This step will optimize the app for deployment:

npm run build

This will generate the optimized static files and prepare everything for deployment.

7. Start the App Using PM2

Now that everything is set up, you can start the app. Since HestiaCP uses PM2 to manage Node.js apps, you need to use it to run your app in the background and keep it running even after a reboot.

1. Start the app with PM2:

   pm2 start ecosystem.config.js

   This command will use the ecosystem.config.js file, which contains the configuration to run your app. PM2 will take care of managing the app, keeping it alive and restarting it if it crashes.

2. Verify PM2 is running your app:

   pm2 list

   This command will show all apps managed by PM2. You should see your app listed there.

8. Make Sure PM2 Starts on Reboot

To ensure that your app starts automatically when the server reboots, you need to configure PM2 to run on startup.

1. Run the following command to configure PM2 to run on boot:

   pm2 startup

2. Follow the instructions that PM2 provides. This usually involves copying and running a command as root.
3. Finally, save the current PM2 process list by login again as user:

   pm2 save

   This will ensure that PM2 remembers your app configuration after a reboot.

9. Check PM2 Logs for Errors

If your site is still showing a 500 error, you can check the logs to identify any issues:

pm2 logs

This will give you detailed logs of the app’s performance and errors, allowing you to pinpoint any problems.

10. Manage Your App with PM2

If you ever need to stop or restart the app, you can use PM2’s commands:

• To stop the app:

  pm2 stop <app-name>

• To restart the app:

  pm2 restart <app-name>

• To view status:

  pm2 status

Conclusion

By following these steps, you will successfully set up Ncmaz on your HestiaCP server. Now you can enjoy the speed, flexibility, and performance of a headless WordPress site with Next.js while easily managing it using PM2.

Whether you’re creating a blog or a magazine site, this approach ensures that your site is fast, scalable, and ready for production. Happy coding!

---

This tutorial will help you get up and running with Ncmaz while leveraging HestiaCP’s easy management features, making it a breeze to maintain your app.