0

I suffer a lot in the past with angular apps and social media, so I'm glad to see that Angular Universal is being developed.

Currently I have some apps that are Angular4 as front end, and Java with Spring as backend. As far as I know there are some ways to implement Angular Universal here but they seem pretty complex (at least is what I read). So I want to know if that is in that way or not...

But anyway, my main question here, is because I saw that in order to implement Angular Universal we should have (ideally) to make the backend with nodejs, how to structure these two technologies, I mean... Should I have Angular app as a frontend app and Nodejs app as a totally different backend app (just like Java) where both are connected with web services? Or should I served Angular4 SPA direcly from Nodejs views? And where should I place Angular Universal here?

Improve this question

2 Answers 2

Reset to default
2

Now that Angular CLI v1.6 is out, there's native support for building Angular Universal into your projects easily using Node.js! Essentially, you would ng build --prod to create a dist/ folder, and then create a simple node back-end and connect to your dist/ folder containing your front-end code. This article gives a great step-by-step guide: Angular server-side rendering in Node with Express Universal Engine.

Improve this answer
Sign up to request clarification or add additional context in comments.

2 Comments

Yeah... but my question.. is more about the architecture... should they be 2 total different apps, or the nodejs backend should be the one responsible for serving the views?
If I'm understanding your question correctly, Nodejs serves the Angular SPA directly from Nodejs views. If you look at the server.js file on the above website, app.use(express.static(${__dirname}/dist)); is how Angular is connected to Nodejs. The Angular Express engine then sets these views using app.set('views', 'dist');. The entire application is a single app that is served on http://localhost:3000 or process.env.PORT depending on your deployment.
0

When you use Angular Universal, it is going to be a single process (Operating system process) that hosts and serves your Angular pages.

In production you may have multiple such processes behind a load-balancer.

Your back-end APIs (if developed in Javascript) may be hosted in the same Node server or in separate server.

The Angular Universal setup steps are detailed here in the official documentation.

However, I had a few wasted hours to find out the following point

  • Webpack 3 is not compatible with ts-loader versions higher than 3.5.0. At the time of developing this, the latest version of Angular CLI is 1.7.2 which uses Webpack 3.*. Hence, while setting up Angular Universal, install [email protected]

Finally, here I have a seed project for Angular Universal. It uses Vagrant to locally setup the development environment. Also, by tweaking an environment variable in your local host machine, you can run it in a production mode in a Docker container. The steps to run it are detailed in the readme file.

If you refer to my Dockerfile in the above Github link, its entrypoint reads:

ENTRYPOINT ["pm2-runtime","start","/home/aus/dist/server.js"]

So, you see, it's just a singe command, and your app is up and running at port 4000. Of course you can use other command line parameters to provide memory limit, port and so on.

Improve this answer

Comments

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.