florczak.dev
Published in

florczak.dev

How to run Nuxt.js on DigitalOcean?

As you probably know, Nuxt.js is a framework for creating Universal Vue.js Applications. So the biggest advantage of Nuxt is that we can create Server Side Renderings (SSR) application and it eliminates a lot of problems with SEO, which we can have with Vue.js Single Page Applications, especially with dynamically (from API) loaded content. But if you want to use Nuxt.js with SSR, you need to have node.js environment and this is a little bigger problem. As far as we can put Vue.js SPA on almost every hosting, without any requirements, hostings with node.js are a little less popular and often require a slightly different approach.

Personally, I chose DigitalOcean for several of my projects. This is a cloud computing platform where you can create your droplets — resizable, SSD-based virtual machines.

OK… If we have some basic information, let’s get started!

Registration and how to get FREE credits to start on DigitalOcean

If you don’t have an account on DO, register one from this url — you will get $10 for free… and I will get a small bonus too, so everyone wins! ;).

You can also visit this url: https://gitlab.com/snippets/1740855 and check promo codes to filling a “Have a Promo Code?” field. It will give you at least next $10 of free credits.

Create a new droplet

When you finish registration, log in to your account and create a new droplet. I suggest choosing Ubuntu 18.04 and the standard droplet for $5/mo — 1 GB, 1vCPU and 25GB should be enough to start. In the future you can resize your droplet very easily.

Fill in the remaining fields and wait for the droplet to be created.

Preparation of the environment

I assume that at this moment your droplet is already created and you have logged in to it by SSH. I also assume that all of the commands in the next part of this guide you will run as a no-root user, so we will use `sudo` (check this tutorial if you need more info). Let’s start…

Update packages list:

Install node.js & npm:

If you want to install yarn, run this commands:

Now go to your home directory:

And create directory for the project:

Undoubtedly, you have Nuxt.js project on your local computer, so copy it now to this directory. Open a new terminal window and run:

OK, go back to the terminal where you are connected to the droplet and check that files exist in the proper directory:

You should see a list of the project files.

Starting Nuxt.js

Now we have created our server with node.js and our project files. Let’s run Nuxt.js!

The project should run at address: http://localhost:3000. Of course, it was only for test and we need more automatization, because you will not start your website manually every time.

We’ll use PM2 — a node.js process manager. Install it:

And start project by pm2 now:

You should see:

Run Nginx as a Proxy Server

Our Nuxt.js project is running, but it is available only on localhost of droplet. We have to tell our server now: „Hey, if someone visits my-domain.com show him a Nuxt.js project website”. We will use a Nginx server to do this:

Next we will create a basic configuration for one project, but in the future you can duplicate it and run a lot of different node.js applications and domains on one droplet.

In this file put the following content (remember to change “your-domain.com” phrase to your real domain name):

Now all of the incoming traffic to your-domain.com on default http 80 port will be redirected to localhost:3000.

Now remove existing, default configuration:

And link our new config file to the sites available directory:

Finally, test a new nginx configuration and if everything is fine — restart the nginx server:

Next just add your domain to the droplet and enjoy your Nuxt.js project!

Note

Remember that the purpose of this guide is not a general use of DigitalOcean and droplets security, but only Nuxt.js installation. If you are a completely new user of DO, I will give you some links to additional guides that are worth reading:

--

--

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