Getting Started with Nuxt.js

Nuxt.js is a framework to build Vue.js applications. To get more information, visit their website.

Create Environment

First you have to create a website on your server. Our website module provides everything you need to manage, deploy and run your website. Every Website is type based, which means you have to select a particular type.

  1. Log in to cockpit.opsone.ch

  2. Choose your server or create a new one

  3. Go to websites, and create a new one

When editing the website, select the website type Node.js

Access with SSH

On the server you can work with SSH. Due to security reasons, we allow key based logins only.

  1. If you don’t have an SSH key: Create an SSH key pair

  2. Add your SSH Public Key in the Cockpit: Either for the whole server or within the website.

  3. Now you can log in via SSH. Username is your chosen website name.

Tip

Wondering why your existing SSH key is not working? Maybe it does not meet our minimum requirements.

Installation

As the latest Node.js LTS version will be already installed through nvm by default, we can go on directly to the Nuxt.js installation. Make sure to select npm as package manager which is installed by default already.

$ npx create-nuxt-app opsone-demo

Build

To run our application, we have to build it first. You can either build the created application right away, or add your desired changes first. Either way, you have to build your application after any change.

$ npm run --prefix opsone-demo build

Node.js Daemon

We have to configure the Node.js daemon to start Nuxt.js from within our particular subfolder. To accomplish this, we have to edit the ~/cnf/nodejs-daemon.conf file with the following content:

WORKING_DIR="/home/nodetest/opsone-demo"
DAEMON="node_modules/.bin/nuxt"
OPTIONS="start"

Configure Proxy

To access our application, we have to configure a proxy. To do so, we have to edit the ~/www/.htaccess file and add the following. Nuxt will listen on localhost port 3000 by default.

RewriteEngine on
RewriteRule .* http://[::1]:3000%{REQUEST_URI} [NE,P]

Start and Access Application

To reload our changes, use the nodejs-restart shortcut. If everything went fine, you can now access your new Nuxt.js application at the hostname configured in cockpit.

If you encounter any errors, check to logs within the ~/log/ folder, especially to ~/log/nodejs-daemon.log file. For more informations about the available log files, see Log File Analysis.