Can I provide different baseref for Angular Universal SSR and clientside rendering?

Question

I have an angular universal app. All works perfectly when run directly from node (localhost:4000) with the following commands: npm run build:ssr npm run serve:ssr

For production, I need to serve the app at a subpath (servername/appname) instead of root. The webserver is apache and I use proxypass as follows: ProxyPass "/appname/" " http://localhost:4000/ "

Now to the problem: For SSR, the baseref is “/”, but for clientside-rendering, the baseref is “/appname”. This means, either SSR using node/express on root or the client running the app on servername/appname cannot find the files linked in index.html (main.js etc)

Is it possible to provide a different baseref for SSR and CSR?

A hack I can think of would be to host the SSR-app at “localhost:4000/appname”… but I couldn't figure out how to configure this in my server.ts …

Any help much appreciated!

Answer 1

At least I've now got node running the SSR-app under the same href

const allowed = [
  '.js',
  '.css',
  '.png',
  '.jpg',
  '.svg',
  '.woff',
  '.ttf'
];
const disallowed = [
  '.map'
]

app.get('/appname/*', (req, res) => {
  if (allowed.filter(ext => req.url.indexOf(ext) > 0).length > 0 && disallowed.filter(ext => req.url.indexOf(ext) > 0).length == 0) {
     res.sendFile(resolve(DIST_FOLDER + req.url.replace("appname/", "")));
  } else {
    res.render('index', {req})
     //res.sendFile(path.join(__dirname, 'client/dist/client/index.html'));
  }
});