Install Node & the Angular CLI

Instructor: So for this course, we will need a couple of tools, and we'll install and add them step by step. For example, MongoDB will be added a bit later. What we'll definitely need is Node.js. For one, because we will write, and run Node.js code, our server-side logic, but also because even Angular needs it, even if we were not to create our own node app. Not because Angular uses Node.js language features, but because Angular actually is a framework that has a more complex build workflow. So the part where we take our source code as we write it as a developer, and transform it into code that runs fine in the browser, that's a bit more complex with Angular, because Angular for one user's type script a super set to JavaScript. So a different language that's heavily based on JavaScript, and that's important that does not run in the browser. And to make it run we need to compile it and it will be done for us. No worries. But that task runner doing the compilation in the end is Node.js, for example. So this will run all throughout the development process. We won't need to write any code for that, but this is some stuff that happens behind the scenes. And not just the TypeScript JavaScript compilation, the Angular code itself needs to be bundled, and optimized, and we need to reduce the code size by stripping out unused code and minifying it. And all these are tasks handled by Node.js on our machine, whilst we are developing the application, or when we are finishing it up basically. And Node.js will be used for that too. So we need it for these two reasons, for the Node.js code we write for our back end, and for the Angular build workflow. And to learn more about Angular and the Angular workflow and how it works, definitely check out a course dedicated to Angular. Because whilst I will cover some Angular basics in this course in general, I do expect you to know the very basics about Angular. This is not a course for you if you never touched Angular before. So with that out of the way, download Node.js from Node.js.org and there, pick the latest version 10.1 in my case if you're facing issues with that, fall back to the older version. But in general, it's recommended to use 10.1 or whatever the latest version is when you're viewing this. Simply click on that and it will download an installer through which you can walk. It's available for both Mac OS, and Windows, and all the Linux, and it should automatically give you the right download there. And once you successfully installed it, through the installer, we can think about setting up an Angular application because that is actually what we'll start with in this course. For that we'll use another tool and that's the Angular CLI. CLI stands for command line interface, and it's the defect way of creating Angular apps. Because of that more complex build workflow I mentioned, we need a lot of tools that compile our code, optimize it, and setting all of that up on our own is pretty cumbersome and error prone. The CLI gives us a project set up where all of that is taken care of and where we can focus on writing our Angular code. Our logic. The CLI is installed like this and it uses NPM the node package manager to install the CLI tool globally on our machine with this first command here. NPM ,the node package manager, is installed together with Node.js automatically. So if you install Node.js, you will have NPM. Now, let's therefore now install the CLI. I already got Node.js installed, so I can just fast forward to this step. And to install the CLI, you should open your terminal, or command prompt on your machine and then run NPM, this node package manager command, which is available with Node.js. Install-g for globally, because we want to install that Angular CLI globally on our machine, so that we can use it from anywhere on our machine. And then the name of that CLI package is @angular-cli. And make sure to not mistype this, the naming is important. You can add an @latest to absolutely fetch the latest version, but it should by default give you that version. Now on Windows, this command should be fine like this. On Mac and Linux, you might need to add a sudo in front of this to get the right permissions to execute this command. Hit enter thereafter and enter your password if you are prompted for it. And thereafter it will download that CLI package from NPMs repository and install it on your machine. This can take a couple of seconds up to minutes, and I'll be back once it's done. So it's done installing and in my case, I got some errors in between but that's no problem, as long as it finishes with some output where it mentions the package name and version, and says updated or added eight, or the number can actually differ packages. So if you see something like that, it succeeded. You make ignore any errors that happened in between, it was able to recover from these. Now once this is installed, we can create a new Angular project with the CLI and we'll add Node and Mongo and express to that project setup throughout the course. But let's start with the front end, because that is how we can quickly see something on the screen. So let's create a new project and for that navigate into the folder where you want to create the project. Once you're in that folder, and you can get there with the CD command on your machine. Create a new project with ng new that is a command now available due to that CLI package, ng is basically a command made available by that. And then the name of the project and I will name it mean-course, but of course you can pick any name you want. Just make sure it's not starting with a number, and it's not named test, that is forbidden. But anything else is fine. Mean-course should work and once you hit enter, it will set up that project. It will create a lot of files in there. Most of them are configuration files for that workflow. We don't need to worry about them. And it will also give us a little dummy app with which we can start. It will also install all the dependencies, like the Angular framework, and other dependencies that framework depends on. But also a couple of built or workflow dependencies. So dependencies that compile the TypeScript code, the dependencies that optimize the code, things like that. So this can take a while and I'll be back once it's done. Now once it is done you can navigate into that newly created folder with cd, and then the name of that folder. And in there simply run ng serve to bring up a development only server. And this is not a server you will use to deploy it. I will show you how to deploy that app towards the end of the course. This is a development only server that allows you to preview your application. Double clicking on the NX HTML file won't work because that will use the file protocol and not the Http protocol, and therefore many features we need are not enabled. And this gives us a real web server running on our machine at this address. You see here, Http://localhost:4200 by default, and you can then go to a browser, and simply visit local host 4200. And on that URL you should see something like this some dummies starting page the CLI gives you by default. Now with that set up, we of course wanna work on our code and for that we need some IDE or some advanced text editor, that makes that easier. Now you can use any IDE you want like Sublime, Atom, WebStorm. In this course, I will use Visual Studio Code. Now let's set it up and open our project, in the next lecture.