Skip to main content

Installation of the Nuxt.js environment

Server-side rendering (SSR) frameworks such as Nuxt.js require the Custom Server settings for application monitoring. They require an approach different from typical Node.js frameworks (e.g. Express.js, Nest.js).

Note

Reference: Nuxt.js Custom Server Configuration

Installing the agent​

Execute the following command to install the agent.

BASH
npm install whatap

Agent file structure​

For the agent file configuration, see the following.

Creating the server/index.js code​

Create the server/index.js file for Nuxt.js application instances. This file must be located in the project's server (server) folder.

Initializing the WhaTap agent​

server/index.js
var Whatap = require('whatap').NodeAgent;

Loading Nuxt.js and other required modules​

server/index.js
const express = require('express');
const { Nuxt, Builder } = require('nuxt');
const app = express();

Configuring and initializing the Nuxt instance​

server/index.js
const config = require('./nuxt.config.js');
config.dev = process.env.NODE_ENV !== 'production';
const nuxt = new Nuxt(config);

if (config.dev) {
    new Builder(nuxt).build();
}

Configuring the Express Server and adding the Nuxt middleware​

In the following code, set the server port number in port.

server/index.js
app.use(nuxt.render);

const port = 3000;
app.listen(port, () => {
    console.log(`Server listening on http://localhost:${port}`);
});

Viewing the full code​

See the completed full code.

server/index.js
var Whatap = require('whatap').NodeAgent;

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

const config = require('./nuxt.config.js');
config.dev = process.env.NODE_ENV !== 'production';
const nuxt = new Nuxt(config);

if (config.dev) {
    new Builder(nuxt).build();
}

app.use(nuxt.render);

const port = 3000;
app.listen(port, () => {
    console.log(`Server listening on http://localhost:${port}`);
});

Running the application​

SH
node server/index.js

Next steps​

  • Checking the installation

    If you have applied all for project creation and agent installation, check the checklist in [the following] (install-check).

  • Agent setting

    It provides various features for monitoring by applying some options to the agent configuration file (whatap.conf). It includes basic configuration, configuration for server connection and data transfer, how to manage the configuration files for multiple application servers, and transaction tracing, and more. For more information, see the following.

  • Starting the monitoring

    After all settings are made, restart the application server. The agent starts collecting data. First, check whether the monitoring data has been collected in Application Dashboard. For more information about Application Dashboard, see the following.