HostHosting Nuxt.js App on VPS(Apache Server) via Cpanel

Packages required on server in order to host a nuxt universal application.

1. Node.js — v.14.* || latest
2. NPM — v.6.* || latest
3. PM2 — v.5.* || latest

Install / upgrade Node and Npm via NVM

On your server’s terminal,

1. Run wget -qO- https://raw.githubusercontent.com/nvm-sh/nvm/v0.38.0/install.sh | bash to install nvm

• “v0.38.0” can be replaced with the version you wish to install
• Exit/close and open the terminal again and run nvm -v to check and confirm the nvm version

2. Run nvm install node to install the latest node version

• You can install other versions by replacing “node” with the version number. Example “nvm install 14.15.1”
• Then run “nvm alias default 14.15.1” to set this version as your default node.js version
  NB: you may run “nvm ls” to list all node versions available

3. After installing node, npm will also be installed/upgraded automatically.

Steps to host application

1. Upload/clone your project files/repository respectively to your domain’s server. If you intend hosting the application on a subdomain, place the project files in the root folder of your subdomain.
2. In the package.json file, add this configuration.

"config": {
    "nuxt": {
        "host": "0.0.0.0", // 0 or 0.0.0.0 sets the hosts to the  server’s IP
        "port": "35000"  //you may choose any port
    }
}

This configuration sets the host of the application (app) to your IP when deploying the app and specifies a custom port on which the app will be accessed when you run npm start or npm run dev…

3. In your terminal;

• run npm install to install dependencies
• run npm run build to build the app
• run npm run start to start the app on your IP and the specified port (e.g. http://95.178.216.43:35000)

4. Run this command to start the application forever. This way the app still runs even if you exit the terminal.

• cd in to the project directory if you are not already in there
• Create a file called “ecosystem.config.js” in your project’s root folder this is config

module.exports = {
    apps: [
        { 
           name: ‘name of app',
           exec_mode: 'cluster',
           instances: 'max', // Or a number of instances
           script: './node_modules/nuxt/bin/nuxt.js',
           args: 'start',
           env: {
               NODE_ENV: "production",
               HOST: '0.0.0.0',
               PORT: 35000
           }
        }
    ]
}

• run pm2 start to start application with PM2
  More details at https://nuxtjs.org/docs/2.x/deployment/deployment-pm2

NB: if application shuts down after exiting the terminal, kindly go to WHM >> Account Functions >> Manage Shell Access on your server and ensure shell access is set to Normal Shell and not Jailed Shell

5. Hide port from URL (e.g. http://subdomain.domain.com:35000) and redirect to SSL

• Create a .htaccess file in your project’s root directory
• Add this config to the .htaccess file and change the port;

RewriteEngine On
RewriteCond %{SERVER_PORT} 443
RewriteRule ^index.php(.*) http://%{HTTP_HOST}:35000/$1 [P,L]
RewriteRule (.*) http://%{HTTP_HOST}:35000/$1 [P,L]

OR if your subdomain has no SSL installed

RewriteEngine On
RewriteCond %{SERVER_PORT} 80
RewriteRule ^index.php(.*) http://%{HTTP_HOST}:35000/$1 [P,L]
RewriteRule (.*) http://%{HTTP_HOST}:35000/$1 [P,L]

After this, you should be setup and good to go.