CODEWITHSUNDEEP
node.jsexpressvue.jsnuxt.js
Anže Mur
Anže Mur

Reputation: 1545

Errors while building Nuxt.js programmatically from Express server

I am trying to run Nuxt programmatically from my Express server, but I am getting some errors after the application is built and I open my browser console:

Errors in console

Network errors

My nuxt.config.ts looks like:

import NuxtConfiguration from '@nuxt/config';

/**
 * Nuxt.js admin console app config.
 */
export const config: NuxtConfiguration =  {
  /**
   * Directory paths options. Remove `rootDir` and `modulesDir` properties if you want to run/build admin console Nuxt app.
   */
  rootDir: 'src/admin-console',
  modulesDir: ['../../node_modules'],
  mode: 'universal',
  /*
  ** Headers of the page.
  */
  head: {
    title: process.env.npm_package_name || '',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: process.env.npm_package_description || '' }
    ],
    link: [
      { rel: 'icon', type: 'image/x-icon', href: '/favicon.ico' }
    ]
  },
  /*
  ** Customize the progress-bar color.
  */
  loading: { color: '#fff' },
  /*
  ** Global CSS.
  */
  css: [
  ],
  /*
  ** Plugins to load before mounting the App.
  */
  plugins: [
  ],
  /*
  ** Nuxt.js modules.
  */
  modules: [
    // Doc: https://bootstrap-vue.js.org/docs/
    'bootstrap-vue/nuxt',
    // Doc: https://axios.nuxtjs.org/usage
    '@nuxtjs/axios',
  ],
  /*
  ** Axios module configuration.
  ** See https://axios.nuxtjs.org/options
  */
  axios: {
  },
};

export default config;

And I start Nuxt build as Express middleware:

import { Application } from 'express';
import { Nuxt, Builder } from 'nuxt';
import config from '../admin-console/nuxt.config';

/**
 * Builds admin console Nuxt app.
 * @param app Express application instance.
 */
export async function buildAdminConsoleNuxtApp(app: Application) {
  const nuxt = new Nuxt(config);
  try {
    await new Builder(nuxt).build();
  } catch (error) {
    throw new Error(error);
  }

  app.use('/admin', nuxt.render);
}

and register it like:

await buildAdminConsoleNuxtApp(this.app);

In all of the examples I found, this was the only way of building Nuxt, so I don't know what I am doing wrong. The built application doesn't detect click events etc. and doesn't function as it should.

Upvotes: 8

Views: 1078

Answers (1)

Anže Mur
Anže Mur

Reputation: 1545

The problem was not setting the config.dev property, which should be used as said in documentation when running Nuxt programmatically.

My now working code looks like this:

import { Application } from 'express';
import { Nuxt, Builder, Generator } from 'nuxt';
import config from '../admin-console/nuxt.config';
import { EnvType } from '../config/types';

/**
 * Builds admin console Nuxt.js/Vue.js application.
 * @param app Express application instance.
 */ 
export async function buildAdminConsoleNuxtApp(app: Application) {
  config.dev = process.env.NODE_ENV === EnvType.PRODUCTION;
  const nuxt = new Nuxt(config);
  try {
    const builder = await new Builder(nuxt);
    await new Generator(nuxt, builder).generate({ build: true, init: true });
  } catch (error) {
    throw new Error(error);
  }

  app.use('/', nuxt.render);
}

Upvotes: 1

Related Questions