Check generator works with Nuxt about generator-feathers-plus

[eddyystop]

Started kit https://gitlab.com/fexell/featherjs-nuxtjs-boilerplate

[NickBolles]

@eddyystop I have a nuxt middleware that is similar to woodgates, but more configurable that I could share and possibly publish as an npm module. It works great, I'd probably just have to make a few tweaks to make sure it works as an npm module.

[eddyystop]

cli+ will have to move toward helping with the frontend sooner or later, but there is so much to still do on the backend.

Serverside rendering is an intermediate step toward SPA which looks interesting, so persue it if you want to. Please bear in mind

• We want to avoid greatly changing the currently generated code.
• The design has to accommodate similar support for React rendering. Thankfully I don't think server rendered Angular is a thing.
• JS and TS ar4e both needed.

[NickBolles]

@eddyystop My middleware has nothing to do with CLI+, it could just be imported from NPM and hooked into a middleware, we could do this automatically, but that might tie CLI+ too closely to a front end framework.

Also, SSR works perfect with this! Nuxt just plain works. I'm sure this would be almost identical with next.js

Here's my modifications to app.ts

// !code: imports
import NuxtMiddleware from './middleware/nuxt';  // This could easily be 'feathers-middleware-nuxt' or something
// !end

...

// !code: config_middle
app.use(NuxtMiddleware(app));
// !end

My current Nuxt middleware. This needs a little bit of work to be generic for an NPM module

import { resolve, join } from 'path';
import { Request, Response } from 'express';
import { Application } from '@feathersjs/express';

// todo: get config from the app
export default (app: Application<any>) => {
  let config: any = {};
  let isDev = process.env.NODE_ENV !== 'production';
  const rootDir = process.cwd();
  let configPath = join(rootDir, /*isDev ? "nuxt.config.dev" :*/ "nuxt.config");
  try {
    config = require(configPath);
  } catch (e) {
    console.error(`Unable to find nuxt config file at '${configPath}'`)
    console.error(e);
  }

  config.rootDir = resolve(__dirname, rootDir);
  config.dev = isDev;
  const initNuxt = setupNuxt(config, !isDev);

  return function NuxtMiddleware(req: Request, res: Response, next: (e?: any) => void) {
    initNuxt
      .then((app) => app.render(req, res))
      .catch((e) => {
        console.error("Nuxt render error!")
        console.error(e)
        next(e);
      })
  };
}

// Setup nuxt.js
async function setupNuxt(config: any = {}, useNuxtStart: boolean = false): Promise<any> {
  let Nuxt, Builder, app;
  try {
    if (useNuxtStart) {
      Nuxt = require('nuxt').Nuxt;
    } else {
      Nuxt = require('nuxt').Nuxt;
      Builder = require('nuxt').Builder;
    }
    app = new Nuxt(config);

    if (config.dev && !useNuxtStart) {
      const builder = new Builder(app);
      await builder.build();
    } else {
      // make sure we wait a tick so that the rest of the app is setup
      await Promise.resolve();
      console.log("using nuxt start");
    }
    process.emit('nuxt:build:done' as any);
  } catch (e) {
    console.error("Error initializing Nuxt");
    console.error(e);
  }
  return app;
}

sidenote: I should really just get my app into an example repo. It'd be good to start from scratch and document it in a medium post... There's a lot of things I have learned that would help the community probably, and probably some things I'm doing weirdly that the community could help me with.

[eddyystop]

I was suggesting cli+ just wire in that sort of middleware, the middleware being packaged as a module.

Here there is little wiring. But something like authentication-local-management has a lot of wiring and options. I look at cli+ as partially a means to wire repos into the generated code, avoiding most of the how-to questions which get asked.