4 min read coding

How to host your NuxtJS in 10 steps

I first started using NuxtJS one year ago, when I tried to make a platform for travellers to easily find and book villas online. But unlike other popular booking services, I was targeting villas that did not have an online presence or haven’t signup or don’t know how to use an online booking service.

I thought it was a good idea, and I coded it for nearly 2 months, and few weeks after I launched it the pandemic struck, travelling became non existent, airports were closed down. I left the website online till 2021, and then I pulled the plug in January to focus on some other idea.

I still believe it was a good idea but the timing wasn’t right.

To build the platform I used a framework called Nuxt. Nuxt is a framework based on Vue. Just like Larvel or CodeIgniter makes it easy to build apps in PHP. Nuxt helps you to quickly build server-side apps using Vue.

Not only that, you can also easily use popular node frameworks like Express and Pug together with NuxtJs. So if you think you need to build the REST API with Express, you can easily do that while building your front-end framework with Nuxt.

Nuxt also has plugins to handle authentication, google analytics and more. You can easily integrate these plugins and don’t have to worry about re inventing the wheel.

Vue is a front-end framework that I love working with. It’s easy to learn and lightweight and good for building simple to large scale projects. Since I already knew Vue even before Version 2, learning Nuxt was easy, so I mastered Nuxt in couple of weeks and built the booking platform.

However, I have not hosted any NodeJs apps before. Even though I had some experience with Express, I have not hosted a NuxtJS app before.

And when I googled, most of the tutorials did not give correct information on how to host your NuxtJs app.

So I had to figure everything the hard way, and now I’m about to host a new NuxtJs app that I was working on for the past 2 months. I thought it’s a good time to write a tutorial on how to correctly host a Nuxt app on DigitalOcean, Amazon AWS or any other hosting platform.

Step 1

Create a DigitalOcean droplet or an Amazon AWS instance that is running latest stable version of Ubuntu.

Make sure you give the ability to login with SSH keys instead of a password, because using SSH is safer than login with a password, and you can easily login with your computer’s terminal.

Step 2

After setting up your instance, login to your instance via SSH using your computer’s terminal.

ssh root@ip

Replace ip with the IP address of your DigitalOcean droplet or Amazon AWS instance.

Step 3

After signing in, you will now have to install NodeJs, and Nginx.

curl -sL https://deb.nodesource.com/setup_14.x | sudo -E bash -
sudo apt install nodejs

Make sure you replace 14.x with the current stable NodeJs version.

At the time of writing the current stable version was 14.

Why I didn’t run apt install nodejs because when I tried to install Nodejs just by running the second command, I was getting this error on DigitalOcean, E: Unable to locate package npm. Running the curl command and getting the repo from first seemed to solve the issue.

sudo apt install nginx

Step 4

Awesome, not that you have installed node, npm (installed while installing node), and nginx, we are almost there.

Now clone your repo from GitHub (the recommended way), you can also upload your code to your droplet as well, if you are uploading your code, don’t copy the node_modules folder.

Step 5

Go into your repo folder, and install the dependencies.

cd my_repo_folder
npm install

Installing the dependencies will take time, depending on the number of dependencies that you are using.

Step 6

Now that you have installed the dependencies, you need to build your Nuxt app. Run the build command to build your Nuxt app.

npm run build

Step 7

Running your app on your local computer is easy, it will usually run on port 3000. But running your app on a droplet is different, and public traffic will be coming to your port 80, and you will have to redirect your port 80 traffic to your port 3000, or any other port that you’re running your Nuxt app.

In order to do this, you will have to modify some settings in your Nginx server.

Open your Nginx settings file

cd /etc/nginx/sites-available
sudo vim default

Fund the location section in your nginx config file.

 location / {
     proxy_pass http://localhost:3000;
     proxy_http_version 1.1;
     proxy_set_header Upgrade $http_upgrade;
     proxy_set_header Connection 'upgrade';
     proxy_set_header Host $host;
     proxy_cache_bypass $http_upgrade;     
}

Here you need to replace the localhost:3000 with the port that you are running your Nuxt app.

Step 8

Check the status of your nginx settings to see if there are any errors.

sudo nginx -t
nginx: the configuration file /etc/nginx/nginx.conf syntax is ok     nginx: configuration file /etc/nginx/nginx.conf test is successful

If there are no errors, now you can restart your nginx server.

sudo systemctl restart nginx

Step 9

In local environment you can run your Nuxt app just by running npm run serve, but your application will stop working once you close your terminal.

So in order to continuously run your app, you will need a node process manager called pm2. Install pm2 by running the following command. Make sure you install it globally.

ce your_repo_folder
npm install -g pm2

Step 10

After installing pm2, run your app via pm2 with the following command after going inside your application folder.

pm2 start npm -- start
┌────┬────────────────────┬──────────┬──────┬───────────┬──────────┬──────────┐
 │ id │ name               │ mode     │ ↺    │ status    │ cpu      │ memory   │
 ├────┼────────────────────┼──────────┼──────┼───────────┼──────────┼──────────┤
 │ 0  │ npm                │ fork     │ 0    │ online   │ 0%       │ 0b       │
 └────┴────────────────────┴──────────┴──────┴───────────┴──────────┴──────────┘

That’s it, now you are successfully running your app on DigitalOcean or Amazon AWS.

You can check the whether it’s working by typing your droplet or AWS instance public IP address on your browser.

Conclusion

I hope you learned something new and helped you to host your Nuxt app on a cloud server. If you find any difficulties please leave a comment below. I’m more than happy to help you out.

Rukshan

Rukshan