Learn Set up a Nuxt.js Web Application on Ubuntu 18.04 LTS
Table of Contents
- Nuxt.js: The Universal Framework
- Installing Node.js
- Scaffold Application
- Initial Start
- Building For Production
- PM2: Manage your application with ease
Nuxt.js: The Universal Framework
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
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.
Once everything has downloaded, change directories into the folder that you just created.
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
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.
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.
Do you need help setting up this on your own service?
Please contact us and we’ll provide you the best possible quote!