I am a Beginner to Angular technology and came across this question.
why is Node js needed in Angular as Node js is a backend technology?
You need NodeJs for angular if you intend to create a front end server, use typescript or make anything other than a purely in browser application(unless you use another server framework: Apache, nginx, lighttp, ruby/rails etc.). For example Vanilla javascript does not support require or import functionality so you need node to load file dependencies, and angularjs does not allow for server creation on its own. You can also choose to build angular applications in TypeScript which utilises NodeJs.
It is worth noting that technically speaking nodejs and angularjs are separate frameworks, angular can be run without node but would only support limited functionality(no db access, no server etc).
The CLI is needed in order to run angular commands through the command line, to generate services / components etc.
You can read more about angular here
Angular does not need Node. However to make the dependencies management easier especially in package.json , npm which is a package manager is required. And in order to get npm, you need to install Node first.
As for angular cli, it provides a terminal that makes it easy to execute operations like creation of an angular app, angular components, building...
Related
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.
I'm working on a project and using nodejs as backend. I want to use react for the frontend. And currently, the way I know to use react is by creating a client folder inside it and using create-react-app and then running both the server separately and using the proxy to connect with the node backend. The other way I came to know is via this link which basically involves installing react, reactdom, webpack etc, and using it directly inside the node app without having a separate server for react as in the case of create-react-app. So which way is better and what are their pros and cons.
The usual way is to run both react and node in separate servers.
Create the react app using npx-create-react-app
Create the node app using npm init
If both the folders are in the same directory you can use a npm package called concurrently and run both the servers with a single command. Also don't forget to install the npm package cors in your node app. If you don't , you'll get CORS errors from your API calls.
Imo using create react app is better than manually trying to configure webpack. Saves a lot of time and it's more easy to deploy.
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 am using angular2 with nodejs, how about using apache/xampp. will it support or nodejs npm server is mandatory for angular2
Considering for development ,NodeJS is Mandatory for angular2 !
let me tell you why?
Angular2 comes with typescript support which is transpiled into javascript.
NodeJS offers typings & other dependency packages like SystemJS,RxJS which helps angular2 do thye magic you call Angular.
Though you could run angular2 apps in Xampp but recommended approach will be with NodeJS as it offers a lot more flexibility & framework support for development.
for eg. Angular-Cli is node module which helps you setup your project really fast.
On top of that node gives you flexibilty to add third party libraries easily into your project.
You can use Xampp but then you will need your server to load transpiler manually which will transpile ts files into javascript files as currently there is no support in Xampp as far as I know and that will be quite a task to do.
So I will go with NodeJS on this.
For production:
once you build bundle from your application , it can be deployed to any server which runs javascript. So in that case NodeJS is not required.
It depends on what we are talking about.
For Development you must have NodeJS on your dev machine to load all libs, transpile TS, prepare build files and so on.
For Production server you can use whatever you want, if you have already prepared js bundles with all deps and your app, just static files with index.html, css, js, jpg files and so on..
I will also recommend you to go with Oleg Barinov.More over Angular2 applications only consist of static files so they can be serve by any static Web servers or server applications that can define static folders (Express, ...)
My understanding is that AngularJS including Angular2 is a client-side framework, while Node.JS is a server side platform. They should not cross. But all Angular2 tutorials I found use Node/NPM. Why is that?
Because npm is a package manager for packages written in JavaScript, and JavaScript can run both on client and server side. In other words, frontend and backend applications can both benefit from packages. Many development tools also use node as an underlying process (e.g. Jest-cli).
I would suggest you to use angular2 only on client side. The performance of angular2 really shines when it comes to handling view containers over regular server side codes. On the NodeJS side, I would recommend using es6 features. Which has revolutionised how you can not only code, but also performance.
The reason you see most tutorials using npm is because they are either using TypeScript or a build tool that uses Node to convert to ES5 or build your project.
However you can still build Angular2 apps using the sfx version (self-executing bundle) of Angular2 and using ES5 syntaxes without having to use node or npm. Here is a blog post that shows how to do that
http://blog.thoughtram.io/angular/2015/05/09/writing-angular-2-code-in-es5.html
Angular2 is a front-end framework but a lot of tooling that assists in building Angular2 applications are available via NPM.
If you want a package manager that's geared specifically to front-end development I suggest JSPM. It supports front-end modules of various formats (ie AMD, CommonJS, UMD), handles transpiling out of the box, and can be used as a build tool to concatenate/minify your application code.
You'll still need NPM for many other utilities and you'll need a back-end server for testing (I recommend live-server).
As far as the back-end is concerned. One of the Angular2 dev teams is working on a Node/Express extension that supports isomorphic rendering of JS. In short, it pre-renders the view on the server so the user can interact with it in the browser while the app loads in the background. The start time of launching a fully-featured SPA will still be kind of slow (relatively) but perceived speed will be instantaneous.