NuxtJs/Nuxt universal application deployment in cpanel (Server-Side-Rendering) – Vue SSR

I have gone through various documentation to deploy my first Nuxt JS application. Honestly, I had a hard time finding the right guide which could help me to make my application live. Finally, after a thorough workout, I could make it work live.

NuxtJs/Nuxt universal application deployment in cPanel

Background:

  1. NuxtJs Universal Application (SSR)
  2. cPanel/CentOs server

Prerequisites(Required):

  1. NodeJS
  2. NPM (Node Package Manager)
  3. PM2
  4. SSH Access

Note: If you are unable to install any of the above-required packages, then ping me in the comment section.

Now, for this explanation, let me take an example that I am trying to run a nuxt application on the domain https://nuxtjs.projects.itinnovator.in

  1. Now login to SSH through putty or any other software of your choice.
  2. Set current directory (CD) to the root of the folder where you are intended to put your application and upload your files and folders there. (Do not upload node_modules and .nuxt folder)
  3. Once your files are there in the folder, run npm install, and the process will install all the required dependencies
  4. Open package.json file which is located in your application’s root folder and locate line “dev”: “nuxt”, and replace it with “dev”: “nuxt –hostname nuxtjs.projects.itinnovator.in –port 49000”, of course, replace your domain name.

Finally, run npm run dev. Now the application is running on https://nuxtjs.projects.itinnovator.in:49000

The question is this is still in development mode, and once you close the connection in putty, it will stop working. So how can we have it permanently there?

When you finished your development and ready to go live, follow below steps

  1. run npm run build
  2. open the package.json file and add a new line after "generate" command in scripts "deploy": “pm2 start npm –name jigesh — start" (Change “Jigesh” with your application name)
  • Next, add following code at the end of package.json file and then run npm run deploy
"config": { "nuxt": { "host": "0.0.0.0", "port": "49001" } }

Above steps have added your application to pm2 server which will keep it open forever. Now you can turn off putty to test it. However, this is not the exact end, how can you access your site with domain name https://nuxtjs.projects.itinnovator.in rather than https://nuxtjs.projects.itinnovator.in:49000?

I knew that was the question moving around in your mind, so my next solution is for that.

  1. Create a .htaccess file in your root folder and add below code in it.
RewriteEngine On RewriteCond %{SERVER_PORT} 80 RewriteRule ^index.php(.*) http://%{HTTP_HOST}:49000/$1 [P,L] RewriteRule (.*) http://%{HTTP_HOST}:49000/$1 [P,L]

That’s it. Now you can run your domain name without the port and your request will be handled internally to port 49000.

Additionally, you can move your NuxtJs application to another folder called app, and root folder would have only one file which is .htaccess.

I know this was the simplest solution I could ever think of to have any NuxtJs universal application live forever.

Please comment for queries.

Newsletter

Make sure to subscribe to my newsletter and be the first to know about my new post.

Subscribe on Youtube
FOR UPDATES

I post tutorials about various technologies on the youtube channel

Subscribe Now
Newsletter

Make sure to subscribe to my newsletter and be the first to know about my new post.

© 2019