Set up a Nuxt.js Web Application on Ubuntu 18.04 LTS

Nuxt.js: The Universal Framework

Nuxt.js is a JavaScript framework designed for quickly creating universal Vue.js applications. It is most famously notable for its ability to create Vue.js apps that can be rendered on the server as well as the client. In this tutorial, we will be setting up a server-rendered Nuxt.js application and deploying it on Ubuntu 18.04 LTS.

Installing Node.js

First, you will need to make sure that you are running Ubuntu 18.04 LTS. Then, you will need to install Node.js, if it's not already installed. In this tutorial, we will be making use of the Node Version Manager, or NVM, to make this process much easier.

Install NVM using the following commands.

curl -sL https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh -o install_nvm.sh
bash install_nvm.sh
source ~/.profile
nvm install 11.1.0
nvm use 11.1.0

Scaffold Application

Once you have Node.js installed, we can now proceed to setting up the packages we will need using NPM. We will be using a handy little tool called create-nuxt-app, a community-made tool which can easily create Nuxt.js applications.

In your home directory, run the following command to begin the app generation.

npx create-nuxt-app <nameofproject>

The console will prompt you for several important options. For the sake of this tutorial, we will name our project "app". We will use Express as our custom server framework, and we will run the application in universal mode, which ensures that we will be rendering our website on the server. When you have specified all required permissions, the installation process will begin, and all configuration files will be created.

##Initial Start Once everything has downloaded, change directories into the folder that you just created.

cd app

Now we can start the Nuxt.js development server.

npm run dev

This command will build the site using webpack, which is a module bundler, and serve the site on a localhost port, which will generally be port 3000. It will also give you access to hot-reloading modules, which will remove the need to restart the application every time that you change a file. Since we are running the app in universal mode, the app will compile on both the client and the server. Now your application will be running on port 3000.

##Building For Production Development mode is quite useful for when you are actively developing your application. However, when you are ready to make your application public, addons such as hot-reloading and developer tools become less important. This is why we will want to build our application once, for a production environment. Thankfully, Nuxt.js includes a tool that we can use to quickly build our app's modules for production. Run the following to begin the production build process.

npm run build

Essentially, what we are doing here is we are compiling all of our webpack modules, with optimizations for production.

Once the build is complete, you will be able to run the site for production.

npm start

Now, if you navigate to http://yourip:3000, you will see the the Nuxt.js splash screen, which confirms that you are running in production mode.

##PM2: Manage your application with ease Now we understand the basics of running our application for production. In terms of a production environment, we would prefer a good way to keep our application running forever, auto-restart our application when necessary, and monitor our application's resources. That's where Process Manager 2 (PM2) comes in. PM2 is a Node.js process manager for production applications, which includes many important production tools such as load balancing, advanced logs, startup scripts, and much more. First, install PM2.

npm install pm2 -g

This installs PM2 globally so we can use it anywhere on our server. Once PM2 has finished downloading, we can start our application.

pm2 start <appfolder>/server/index.js

Note that we are starting the server file that is located inside of our application root.

If you'd like to view the resources that your application is consuming, you can do so with the pm2 monit command. This will bring up an interface similar to that of ncurses, where you can precisely gather data about your application's RAM, CPU, and disk usage.

By now, your application will be running exactly how it was when we ran it with npm earlier, except now we have much more control when it comes to production optimizations.

You now have a Nuxt.js application build that is deployed for production with Node.js and Ubuntu 18.04. If you'd like to learn more about Nuxt, and all of it's in-depth features, feel free to visit their official documentation.