I have a Node/Express JS back-end deployed on an AWS instance, I am using a Linux image, and the web server I am using is NGINX. The MEAN application is running currently as I am building the Angular application and copy the dist folder to the Node/Express JS back-end and direct the back-end to serve the index.html, this works fine, it looks something like like .
Node/Express JS
let pathToClientApp = '/dist';
...
app.use(express.static(path.join(__dirname, pathToClientApp)));
...
app.get('/*', function(req, res, next) {
if (req.header('Content-Type') == 'application/json') {
next();
} else {
res.status(200).sendFile(__dirname +
`${pathToClientApp}/index.html`);
}});
Run server on port 3000
Now I would like to implement server side rendering for the Angular app. I did achieve this through following on the Angular universal official wiki
I can now build the server bundle and tested it locally, first I run the build and serve the Angular universal app using the following commands
npm run build:universal
npm run serve:universal
It runs on port 3000
Node server listening on http://localhost:3000
Note that the Angular universal also has it's own Express server in this case server.ts, it is different from my Node/Express JS back-end server.js which is depicted on the first code block.
So after bundling and serving the Angular app, I run the back-end server which then references the index.html from the dist folder, I open the browser and the angular universal is rendered, very fast, it communicates with the back-end accordingly, So it works fine in development locally.
So for production how would I achieve this, because when I just copy the dist folder to the production server I will still have to run the Angular universal server, which I did by copying also the package.json of the Angular app to the dist folder I have included in the production server, first installed the node_modules, built and served and it was running on port 3000, and run the back-end server as well on port 300, but when I opened the browser I got the error, on the browser.
Error: Failed to lookup view "/rello-server/dist/dist/browser/index.html" in views directory "/rello-server/dist/dist/browser"
at Function.render (/rello-server/dist/server.js:162542:17) [<root>]
at ServerResponse.render (/rello-server/dist/server.js:167454:7) [<root>]
at /rello-server/dist/server.js:153404:9 [<root>]
at Layer.handle [as handle_request] (/rello-server/dist/server.js:106025:5) [<root>]
at next (/rello-server/dist/server.js:105844:13) [<root>]
at Route.dispatch (/rello-server/dist/server.js:105819:3) [<root>]
at Layer.handle [as handle_request] (/rello-server/dist/server.js:106025:5) [<root>]
at /rello-server/dist/server.js:105319:22 [<root>]
at param (/rello-server/dist/server.js:105392:14) [<root>]
at param (/rello-server/dist/server.js:105403:14) [<root>]
at Function.process_params (/rello-server/dist/server.js:105448:3) [<root>]
at next (/rello-server/dist/server.js:105313:10) [<root>]
at expressInit (/rello-server/dist/server.js:163109:5) [<root>]
at Layer.handle [as handle_request] (/rello-server/dist/server.js:106025:5) [<root>]
And the following on the back-end server log
Error: Cannot find module '/rello-server/dist/dist/server.js'
at Function.Module._resolveFilename (module.js:536:15)
at Function.Module._load (module.js:466:25)
at Function.Module.runMain (module.js:676:10)
at startup (bootstrap_node.js:187:16)
at bootstrap_node.js:608:3
npm ERR! code ELIFECYCLE
npm ERR! errno 1
npm ERR! [email protected] serve:universal: `node dist/server.js`
npm ERR! Exit status 1
npm ERR!
npm ERR! Failed at the [email protected] serve:universal script.
npm ERR! This is probably not a problem with npm. There is likely
additional logging output above.
npm ERR! A complete log of this run can be found in:
npm ERR! /home/ubuntu/.npm/_logs/2018-03-29T19_25_28_689Z-
debug.log
ubuntu@ip-:/rello-server/dist$ npm run serve:universal
ubuntu@ip-:/rello-server/dist$ npm run build:ssr
npm ERR! missing script: build:ssr
npm ERR! A complete log of this run can be found in:
npm ERR! /home/ubuntu/.npm/_logs/2018-03-29T19_27_01_180Z-
debug.log
ubuntu@ip-:/rello-server/dist$ node server
events.js:183
throw er; // Unhandled 'error' event
^
Error: listen EADDRINUSE :::3000
at Object._errnoException (util.js:1024:11) [<root>]
at _exceptionWithHostPort (util.js:1046:20) [<root>]
at Server.setupListenHandle [as _listen2] (net.js:1351:14) [<root>]
at listenInCluster (net.js:1392:12) [<root>]
at Server.listen (net.js:1476:7) [<root>]
at Function.listen (/rello-server/dist/server.js:162580:24) [<root>]
at Object.<anonymous> (/rello-server/dist/server.js:153407:5) [<root>]
at __webpack_require__ (/rello-server/dist/server.js:20:30) [<root>]
at /rello-server/dist/server.js:63:18 [<root>]
at Object.<anonymous> (/rello-server/dist/server.js:66:10) [<root>]
at Module._compile (module.js:635:30) [<root>]
at Object.Module._extensions..js (module.js:646:10) [<root>]
at Module.load (module.js:554:32) [<root>]
at tryModuleLoad (module.js:497:12) [<root>]
ubuntu@ip-:/rello-server/dist$
ubuntu@ip-:/rello-server/dist$ node server
Node server listening on http://localhost:3000
Error: Failed to lookup view "/rello-
server/dist/dist/browser/index.html" in views directory "/rello-
server/dist/dist/browser"
at Function.render (/rello-server/dist/server.js:162542:17) [<root>]
at ServerResponse.render (/rello-server/dist/server.js:167454:7)
[<root>]
at /rello-server/dist/server.js:153404:9 [<root>]
at Layer.handle [as handle_request] (/rello-server/dist/server.js:106025:5) [<root>]
at next (/rello-server/dist/server.js:105844:13) [<root>]
at Route.dispatch (/rello-server/dist/server.js:105819:3) [<root>]
at Layer.handle [as handle_request] (/rello-server/dist/server.js:106025:5) [<root>]
How would I link the Angular universal app with the back-end server? Any suggestions, links to resources would help since I have spent a week researching but I can't seem to find how it's done, thanks.
