Nuxt on Plesk Onyx

You have to first download and set up a Plesk server. It is downloadable from this link. This guide is using the Docker-based method. If you prefer to or already have a Plesk server, you may have to take a look at here for Node extension installing instructions.

Setup plesk

Run Plesk server:

docker run -d -it -p 80:80 -p 443:443 -p 8880:8880 -p 8443:8443 -p 8447:8447 plesk/plesk

New head to http://localhost:8880 for admin panel.

Wait until server is setup.

Now you can log in with default conditionals admin/changeme.

Add a new domain

After logging in, switch to “Power User View” (Bottom left)

Click on “Add a Domain” to define a new domain:

In this tutorial, I use nuxt.127.0.0.1.xip.io as Plesk is running on my laptop.

If you have a version control, you may prefer to enable “Git support”. For this demo I use a simple hello-world repository:

https://github.com/pi0/nuxt-plesk-example.git

Now from “Websites and Domains” tab, open “Node.js”:

Enable and set Node params

Set this params:

Node.js Version: 8.9.3 (Or later)
Document Root: /httpdocs/static
Application Root: /httpdocs

Click on “Enable Node.js”

Click on “NPM Install”

Development

Click on restart app and head to http://nuxt.127.0.0.1.xip.io! Voila.

Production

Set params like below:

You should have a file called server.js in the root of your project like this:

const express = require('express');
const { Nuxt, Builder } = require('nuxt');

const config = require('./nuxt.config.js');

// Create new express app
const app = express();

// Listen to port 3000 or PORT env if provided
app.listen(process.env.PORT || 3000);

// Enable production mode
config.dev = false;

// Create instance of nuxt
const nuxt = new Nuxt(config);

// Add nuxt middleware
app.use(nuxt.render);

If you prefer to automatically build upen server start (Not recommanded), then appennd line(s) below:

new Builder(nuxt).build()

If you don’t prefer to build upon start, use “Run Script” tool to manually trigger a build:

build --scripts-prepend-node-path

If you prefer to automatically build upon server start (Not recommended), then append line(s) below:

new Builder(nuxt).build().catch(err => {
  console.error(err);
  process.exit(1);
});

Windows / IISNode

Windows deployment is a little bit different by design with Plesk.

Go into “Websites & Domains” > “Hosting Settings” and ensure that “Document Root” is set to httpdocs (Or where you clone your project. Not the httpdocs/dist folder)

Go into Node.js settings and ensure that BOTH “Document Root” and “Application Root” are pointing to /httpdocs. They should be the same.

Using file manager’s “Change Permissions” ensure that “Application pool group” has all permissions on /httpdocs directory. This is required for when we run build inside server.js.

Create a file called web.config inside /httpdocs:

<configuration>
  <system.webServer>
    <rewrite>
      <rules>
        <rule name="server">
          <match url="/*" />
          <action type="Rewrite" url="server.js" />
        </rule>
      </rules>
    </rewrite>
  </system.webServer>
</configuration>

Plesk node windows support is not so great. Please check /logs/iisnode for logs.

More info about iisnode: https://github.com/Azure/iisnode

Nuxt.js

For detailed explanation on how Nuxt.js things work, checkout Nuxt.js docs.