I come from the LAMP world. Greetings. 🖖
I'm trying to get started with the new Angular and Node.js. I already have Node and an Express server installed on my machine. Now I want to use Angular as I start building my app.
One thing I don't understand is why the Angular CLI is spinning up a server to "run the application" and why it seems we have to setup proxies and do other things to get it to work with Express.
When I think of Angular, I'm most familiar with AngularJS as part of my LAMP stack workflow. All I do here is serve it as a .js file and serve it from the same webserver that is serving everything else. Why is a client-side script getting its own server? How is it different from Express and how does it fit in with Angular Universal, which I would like to use to take advantage of SSR.
I'm not looking at how to get it all to work, I can copy and paste and read docs just fine, I'm trying to understand the fundamental concept here. The Angular docs don't explain why they are asking you to "serve the application". Is it just to test it? Why would I have two servers in development and one in production, shouldn't the dev site mirror the production site as best as possible?
Related
I'm currently learning Angular and I have a question.
How are we supposed to use nodeJS as a backend for our project.
To launch a dev angular project, you need to ng serve
and to launch a server nodes, you need to node app.js.
So what are we supposed to do first ?
launch a nodeJS server and then ... what ?
or
ng serve the angular app and then... what ?
I'm sorry if my question sound stupid for some, but I'm really trying to understand how it works here.
Using angular with node js as backend is usually called MEAN stack.There is plenty of tutorials on youtube about MEAN stack. This link could be a good point for starting.
This may be a dumb question, but is the default react app (created using npm create-react-app my-app) using node.js? I am confused because in my web development class at university, I had to download node.js to create react applications. However, I didn't have to do anything like creating a server or initiating a node.js file, which is described in w3school's node.js tutorial. Because of this, I found out that I don't even really know what node is used for, besides downloading packages like redux and whatnot.
create-react-app uses node.js for all of its dev tooling. Likewise, a lot of the tools you'll use in the React ecosystem (like webpack, prettier, npm), all run on top of node.js as well).
You'll most probably build your react app to a static file, in which case the production output will not require node.js, it will be html and javascript assets that can be served directly to a client.
Hope that helps! Let me know if you have other specific questions
Node.js is used for server-side while React.js is for the front-end part. So, no, you don't need Node.js.
Under development mode, yes. Create react app runs NodeJs with Webpack Dev Server to allow you get feedback when modifing files, start or stop the server.
From udemy React courses i could see Brad Traversy using create-react-app with node.js backend server and Andrei Neagoie using only create-react-app without node.js server to develop a full stack product.
I am seriously confused with when to use what?
Can any one explain me between these two scenarios? Please?
This is mostly related to how you want to structure your code. You can either :-
Set up your front-end and back-end code together. So, in your script tags in package.json, you will have something like 'nodemon server.js && react start' (refer package.json for exact syntax) to start both front-end and server with 'npm start'
Setting up front-end and back-end separately.
This is preferred for separation of concerns. In this case, you would start each separately.
Also, your front-end shouldn't be concerned about how your backend code has been written. It should only be dealing with backend using an API.
For ex: if in future, you wanted to change to Deno.js instead of node.js server, you would have make some modifications in package.json if you had front-end and back-end code written together in folder.
As far as deployment is concerned, in this case also, it will help if you kept the front-end and back-end code separately so you can deploy them separately.
React is used for frontend, while node.js is used for backend.
I think your confused because one is using react with node.js the other is using react alone.
Well React can be used for other backend other than node.js, like php for example.
This means you can create an app using react/php.
The reason Brad Traversy is using create-react-app with node.js because he wants to use node.js for his backend.
While Andrei Neagoie is using create-react-app without node.js because he either:
Don't want to use any backend.
He will add backend later on.
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?
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.
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 ts-config#3.5.0
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.
I have a problem with configuring project in Angular2 so it works.
I did the tutorial, Tour of Heroes on angular site and it uses lite-server.
Now, this is perfect for me, I don't want anything complicated - simplest server, because all of my backend logic is elsewhere.
I tried to deploy it to server but it won't run. Also, on github page of lite-server it says Lightweight development only node server.
I tried express and webpack but those are extremely complicated, with advanced routing and stuff like that. I don't know how I can simply port what worked on light-server to those servers.
Is there any server like light-server which I can run in production? Or any simples seed, that isn't full-blown node server?