ExpressJS - Serve both universal Nuxt app and AngularJS SPA

问题

I have a blog project with this structure:

server - written in Node/Express
admin - AngularJS SPA
public - AngularJS SPA (for the moment)

The admin and public parts have the same domain, but the admin part uses a different subdomain, which allows me to serve the app like this in Express:

app.get('*', (req, res) => {
  var firstIndex = req.get('host').indexOf('.');
  var subdomain = req.get('host').substr(0, firstIndex).toLowerCase();
  if (subdomain === '') {
    // Public part
    res.sendFile(path.join(__dirname, '../public', 'index.html'));
  } else if (subdomain.indexOf('admin') !== -1) {
    // Admin part
    res.sendFile(path.join(__dirname, '../admin/js', 'index.html'));
  } else {
    // Static files
    res.sendFile(path.join(__dirname, '../', req.url));
  }
});

This solution works fine. It captures all requests and serve the right index.html for each subdomain.

PROBLEM -> I would like to pass the public part of the project in VueJS, and specifically using Nuxt to benefit from server-side rendering. I'm new to Nuxt so don't understand yet every details of this framework.

I saw it is possible to serve an universal app with Express, but I have no idea of how to make it compatible with my current solution.

Any help would be appreciated! Thanks

回答1:

It's recommended to call nuxt.render at the end of your middlewares since it will handle the rendering of your web application and won't call next() - https://nuxtjs.org/api/nuxt-render/

First, call next() in the "Public part".

Second, add the nuxt middleware below.

app.get('*', (req, res, next) => {
  var firstIndex = req.get('host').indexOf('.');
  var subdomain = req.get('host').substr(0, firstIndex).toLowerCase();
  if (subdomain === '') {
    // Public part, call next() to use the nuxt middleware!
    next();
  } else if (subdomain.indexOf('admin') !== -1) {
    // Admin part
    res.sendFile(path.join(__dirname, '../admin/js', 'index.html'));
  } else {
    // Static files
    res.sendFile(path.join(__dirname, '../', req.url));
  }
});

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

Another example that also works.

// If Public part, response Nuxt server render app.
app.use((req, res, next) => {
  var subdomain = req.get('host').substr(0, firstIndex).toLowerCase();
  if (subdomain === '') {
    // Public part, call nuxt.render middleware
    nuxt.render(req, res, next);
  } else {
    next();
  }
});

// admin / static files
app.get('*', (req, res, next) => {
  var firstIndex = req.get('host').indexOf('.');
  var subdomain = req.get('host').substr(0, firstIndex).toLowerCase();
  if (subdomain.indexOf('admin') !== -1) {
    // Admin part
    res.sendFile(path.join(__dirname, '../admin/js', 'index.html'));
  } else {
    // Static files
    res.sendFile(path.join(__dirname, '../', req.url));
  }
});

I hope it helps!

回答2:

I used express static files to do what you're asking, if you want to read more, you can do it at http://expressjs.com/en/starter/static-files.html

First of all, in your "app.js" file you have to add this two lines:

app.use('/public', express.static(__dirname +'../public'));
app.use('/admin', express.static(__dirname +'../admin/js'));

After that, you have to check the index.html from both front-end projects, and make sure each of them has the correct base href. For example,

public/index.html should have:

<base href="/public/">

admin/index.html should have:

<base href="/admin/">

I hope it works for you!

来源：https://stackoverflow.com/questions/54982462/expressjs-serve-both-universal-nuxt-app-and-angularjs-spa

标签

javascript

node.js

express

Vue.js

nuxt