How to deploy Nuxt application to server. Production mode on.

Abdulla Emchiyev
Jan 26 · 6 min read
Nuxt on Vue

If you ever created a Nuxt application you will face some deployment issues over the time. You probably want some online testing environment for your teammate to test the developed features. So I will show you various deployment techniques which I have used on different situations. This will be multiple articles following each other. So lets start doing not just reading ;).

I will use Digital Ocean VPS service to gain full control over our application. If you never used this service please don’t be sad I will explain every step one by one. So enough introduction, lets get start to actual job.

First register or sign on DigitalOcean. Then create a droplet to deploy our Nuxt application. On left menu choose Droplets and create new one.

I will use the cheapest version for demo purposes. Don’t be panic you will not be charged until your free credits ended after a month. So test as much as you want :). My settings looks as below.

Next you will be asked SSH key. Create or add your existing ssh to access your server droplet later. You can follow this link how to add or use existing one. After added your SSH key just name your droplet as you wish and click Create Droplet button. Less than in a minute your droplet will be ready to use.

You will get an IP address to access your droplet. Use it for next steps. Mine is 64.225.8.116. To test everything working and you can connect to your droplet open a terminal and type below line. (if you are on Windows use PowerShell as terminal. Also you can download git bash terminal as I do).

ssh root@64.225.8.116 //your Droplet IP address here. 

Hit the enter. First time it will ask you to accept requested source to be secure. Type yes then hit enter and type your SSH key password. If everything is correct you will be signed in. You are root user now be careful so :) First lets update needed applications.

apt-get update

Then we need Nodejs and npm manager to work later on our application. Type command and hit ‘y’ to all. It will install necessary packages in a minute.

apt-get install nodejs npm
//to test successfull installation npm type below commands
//it will show the version info.
npm -v // mine 6.14.4
node -v // mine 10.19.0

Lastly create application server directory where our files will be kept. Just Copy all and paste. It will run all commands at once.

cd /var && mkdir www && cd /var/www && mkdir html

So our environment is ready to serve us. We need to create an application and upload it to server. Lets create a Nuxt.js application first.

Open a new terminal (to keep server terminal, open new one) and change its directory destination to Desktop (can be anywhere for your wish).

cd ~/Desktop

Then type next command to create new Nuxt application. (If you have an existing application you are free to use it).

npx create-nuxt-app my-app

Steps I did.

  1. Javascript

I will not use Git for now because it will add more steps. For now lets just use simple file transfer over SSH. But first just delete a folder in my-app folder called node_modules before upload. You can delete manually or in terminal as below.

rm -r my-app/node_modules

Next step. In terminal be sure you are typing all path as I do below. Sample code is here:

scp -r /path/to/your/local/project/* root@DROPLET_IP:/var/www/html/

My actual command to deploy is below. I have created app name as my-app on Desktop and my terminal location is Desktop. So it is easy. It will ask password and start to upload Nuxt app folder into our server:

scp -r my-app root@64.225.8.116:/var/www/html/

Open server terminal again and change the directory and see if our project is there :) This command will change directory and list all our application files.

cd /var/www/html/my-app && ls -l

Next step install node packages by typing npm command in project folder. Also after install lets build it.

npm install//then type below commandnpm run build 

It will build our application to be ready to serve. Lastly we need to add Nginx reverse proxy to serve our application.

Lets install nginx and configure fast. Change IP address in below config file.

1. apt-get install nginx  //type Y on question
2. nano /etc/nginx/sites-available/my.app
3. Paste the configuration file as below
server {
listen 80;
listen [::]:80;
index index.html;
server_name 64.225.8.116; #droplet IP here

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;
}
}
4. Ctrl + X and type Y hit Enter to save config file.
5. Link the file to nginx enabled section.
ln -s /etc/nginx/sites-available/my.app /etc/nginx/sites-enabled/
6. Test if ok.
nginx -t
If you see long OK message done correctly. Else please do the steps correctly.
7. Restart nginx - service nginx restart

If you hit IP address in browser it will show 502 as in picture. http://64.225.8.116/

http://64.225.8.116/

It is because we configured Nginx and forwarded to listen local port number 3000 (proxy_pass http://localhost:3000;) . But we do not run our app. So in project root folder type the below command. And refresh the page :)

npm run start
Demo Nuxt app homepage.

If you see that your application is running, everything is correct. This is the simplest configuration to run your Nuxt application on any configurable server as in Digital Ocean droplet. I will write more advanced versions of how to configure testing, production environments on next article. But for now lets keep it simple and start to deploying our ready applications on production server.

Lastly I think you will want how to run the app in background . We will use pm2 npm package to do this. Lets install it and run our app in background.

First close running application in the droplet.

Ctrl + C

Then install pm2 globally on the droplet.

npm install pm2 -g // g for globally access over the server

Ok we can start our app by typing a command. Type in project root folder.

pm2 start npm -- start

You can now see that our app is working on the background. Refresh the browser and still our app will work.

As above I said this is the most beginning and fast way to deploy and run our Nuxt js or any node js application in production mode. In the next articles I will show how to add more advanced configurations deploy and run on multiple environments. Hope you enjoyed. Good readings!

Helpful links:

1 . Pm2 documentation — https://pm2.keymetrics.io/docs/usage/pm2-doc-single-page/

2. Nuxt deployment — https://nuxtjs.org/docs/2.x/get-started/commands/

3. Ready project in this article — https://github.com/Abdulla1995/my-simple-app

4. Get 100$ free credit on DigitalOcean by registering this link — https://m.do.co/c/460c21eea24d

Vue.js Developers

Helping web professionals up their skill and knowledge of…

Sign up for Vue.js Developers Newsletter

By Vue.js Developers

A weekly publication with the best Vue.js news and articles. Take a look.

By signing up, you will create a Medium account if you don’t already have one. Review our Privacy Policy for more information about our privacy practices.

Check your inbox
Medium sent you an email at to complete your subscription.

Abdulla Emchiyev

Written by

Learn, develop and impress others on what you do…

Vue.js Developers

Helping web professionals up their skill and knowledge of Vue.js

Abdulla Emchiyev

Written by

Learn, develop and impress others on what you do…

Vue.js Developers

Helping web professionals up their skill and knowledge of Vue.js

Medium is an open platform where 170 million readers come to find insightful and dynamic thinking. Here, expert and undiscovered voices alike dive into the heart of any topic and bring new ideas to the surface. Learn more

Follow the writers, publications, and topics that matter to you, and you’ll see them on your homepage and in your inbox. Explore

If you have a story to tell, knowledge to share, or a perspective to offer — welcome home. It’s easy and free to post your thinking on any topic. Write on Medium

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store