Nest: nuxt integration

Created on 22 Jul 2017 · 5Comments · Source: nestjs/nest

Hello!
tl;dr

how do I create a global middleware for nest that applies nuxt middleware

hey guys I've been working on nuxt integration and you can see in this repo how's the stuff going, however I'm facing a little bit of an issue, I can call Nuxt middleware programatically and add it as an express middleware however this is causing it to catch all routes including the api ones, in order to stop that I need to load nuxt middleware basically at the end of the middlewares, how could I accomplish this for the whole application?

the way you add it to express is like this

import Nuxt from 'nuxt'
import express from 'express'

import api from './api'

const app = express()
const host = process.env.HOST || '127.0.0.1'
const port = process.env.PORT || 3000

app.set('port', port)

// Import API Routes
app.use('/api', api)

// Start nuxt.js
async function start() {
  // Import and Set Nuxt.js options
  let config = require('../nuxt.config.js')
  config.dev = !(process.env.NODE_ENV === 'production')
  // Instanciate nuxt.js
  const nuxt = new Nuxt(config)
  // Add nuxt.js middleware
  app.use(nuxt.render)
  // Listen the server
  app.listen(port, host)
  console.log('Server listening on ' + host + ':' + port) // eslint-disable-line no-console
}

start()

and I i'm using it pretty much like it

import { NestFactory } from '@nestjs/core';
import * as Express from 'express';
import { ApplicationModule } from './modules/app.module';

// tslint:disable-next-line:no-var-requires
const Nuxt = require('nuxt'); // for some reason typings don't pick it up fine as a default import

async function start() {
  const instance = new Express();
  // Import and Set Nuxt.js options
  const config = require('../nuxt.config');
  config.dev = !(instance.env === 'production');
  // Instanciate nuxt.js
  const nuxt = await new Nuxt(config);
  instance.use(nuxt.render);

  const app = NestFactory.create(ApplicationModule, instance);
  app.listen(3000, () => console.log('Application is listening on port 3000.'));
}

start();

and Like I say It does work but intercepts even the routes prefixed with /api like /api/users

Source

AngelMunoz

Most helpful comment

@ol-funky Do you have resolve your problem ? I've the same problem :/

https://github.com/pirmax/nuxt-and-nest

pirmax on 9 Jul 2018

👍3

All 5 comments

@AngelMunoz

I think i found solution for your problem. You should pass nuxt middleware to express instance after making nest to run. I've checked it and seems to routes of nest are working properly.

server.ts

import { NestFactory } from '@nestjs/core';
import * as Express from 'express';
import { ApplicationModule } from './modules/app.module';

// tslint:disable-next-line:no-var-requires
const Nuxt = require('nuxt');

async function start() {
  const instance = new Express();
  const config = require('../nuxt.config');
  config.dev = !(instance.env === 'production');
  const nuxt = await new Nuxt(config);

  const app = NestFactory.create(ApplicationModule, instance);
  app.listen(3000, () => console.log('Application is listening on port 3000.'));

  instance.use(nuxt.render);
}

start();

hawkend on 21 Aug 2017

🎉1

@hawkend Yes that actually worked just fine! not sure if that's the correct way to do it but works thank you!

AngelMunoz on 21 Aug 2017

Problem back again when i updated Nest version from 4.1.0 to 4.5.9.

Only Nest routes work:

async function bootstrap() {
    const nuxt = await new Nuxt(config);

    config.dev = !(process.env.NODE_ENV === 'production');
    if (config.dev) {
        new Builder(nuxt).build()
    }

    const app = await NestFactory.create(ApplicationModule);
    await app.listen(8000);

    app.use(nuxt.render);
}
bootstrap();

Only Nuxt routes work:

async function bootstrap() {
    const nuxt = await new Nuxt(config);

    config.dev = !(process.env.NODE_ENV === 'production');
    if (config.dev) {
        new Builder(nuxt).build()
    }

    const app = await NestFactory.create(ApplicationModule);

    app.use(nuxt.render);

    await app.listen(8000);

}
bootstrap();