Welcome back. In this video, we're going to set up the Angular CLI on our computer. So CLS stands for command line interface, which is a very helpful tool that will allow us to run commands in our terminal for Angular in order to do a variety of different things. And I'm going to show you some loan right now. So you can see we're back in Visual Studio code, we have a new terminal open here, and we're going to type in npm install dash G, which means globally at Angular slash c li. So by using the dash g globally flag, that means we only need to install this once on our computer so we'll never need to run this again.

All right, cool. That's done. The next thing we're going to do is we're going to create a new Angular product. So we're going to do this project sorry, mg new. And then we're going to type our project name. In this case, I'm going to call it portfolio project.

And we're going to type enter. Would we like to add Angular routing? Yes. And we're gonna select CSS for our style sheet. And we're gonna let it do its thing. Alright, awesome.

So now our project is totally built, we're going to use CD to go into the directory we just created. So we're going to do CD and then the same name that you just entered in. So CG portfolio project. So you can see we've gone inside of our Angular pw folder, and now we're inside our portfolio project folder. And we're going to now add our progressive web app function. which is again, very simple, we're going to type in G ad.

And then at Angular slash p wha. Alright, awesome. That's done. Now we're ready to launch our project and see what it looks like by default. So we're gonna actually open up a new terminal here. So it'll keep our old one.

But now we have a fresh start here. And this will be helpful later on as well. And we're going to type energy. So you can see the theme here. Everything is in G, and G serve. And this is what's actually going to build our project on a local development server, which will automatically update anytime we save the project.

So we're also going to add the dash o flag because that will automatically open the browser when it's done building. Oh, sorry. We need to actually go into our project again in this new New bash tab. So we will try that again in G serve and open. And okay, so you can see it's compiling. It's building the project.

And then when it's done, it'll automatically open up in Chrome. So you can see here, we're at localhost 4200. And we have our project here. It's very, very, very basic. This is just the default project. And yeah, so we go back into, we're going to Alt Tab back to Visual Studio code.

So you can see that our server is running here. And keep in mind that you'll need to run this mg serve dash o every time you close and reopen Visual Studio code. And sometimes you'll also want to actually stop this live development server in order to build for example. So to do that, we're just going to type control See, and you can see it's canceled because it's giving us another terminal line here. Okay, so to test this, we're going to need to do one final thing. And that's going to be set up our Google Firebase.

Sorry, as we shut down our server, we're going to actually install these other tools. So we're going to do npm install dash g again, and we're going to install our Firebase dash tools. Okay, now the tools are done will actually need to go on to the Firebase website itself. So we can close that for now, because that's no longer running. So we're just going to Google Firebase, and we want Firebase google.com. And so basically, you can log in with your Google account.

So if you have a Gmail account, that's a Google account. So we're going to be able to, you see that I'm already logged in. And once you do that, you can go into your console. And we're going to add a project. So we're going to enter project, it needs to be a unique name. So I will usually use my name and then the project, whatever it is, so in this case, let's call it Jacinto dash, portfolio dash project.

Okay, and so you can see here, there's no conflicts with that. So we're going to continue we can, we don't really need Google Analytics right now you can set that up later. And so we're going to create this project. So as this is happening, we can actually go back into Visual Studio code because we have some more stuff to do. So we're going to type in Firebase login in order to log into Firebase on our computer. So allow the reporting data.

And then this is going to prompt us to sign in here. We're going to allow node to do this. And so you can see we're giving the permissions here. And we're going to click Allow. Okay, so great. we've logged in with the Firebase COI.

Okay, so this projects ready, we'll click Continue there. And then we're actually going to go back into our terminal. And you can see we have our success message. And below that we're going to type Firebase in it. And so you can see we have a cool setup here. Are you ready to proceed?

Yes. Ready. And so we're actually going to use the down arrow. Then we're going to press spacebar to select hosting, because that's what we want, then we're going to press Enter. And so you can see that we have our project here that we just created on our list if you don't have it, there's other ways to set it up. But we have the project we want here.

And now it's asking what do we want to use as our public directory. So we're going to specify we want to use a distribution folder, because that's what Angular will build our project into when it optimizes it. And we're going to give it the same name as our overall project. That is important. It has to be the same folder name. Okay, so configure as a single page app.

Yes, we will be doing that. And that's it. Sorry, initially, initialization is complete. And now, basically The very last thing is we can do Firebase deploy to actually deploy our project. Okay, so you can see our deploys complete, and we have a hosting URL. So we're going to Ctrl click, whoops, we're gonna Ctrl click.

So you can see that our hosting setup is complete, but I don't think we've actually built an Angular project. So we need to go back and do that. So in order to do that, we're just going to do in ci build, we need to CD into our folder. We won't need to always do this because we will actually right click and open code from this folder. So every time we switch to a different terminal, it'll be there. But we'll do that.

In the next one, so we're just going to do in G build. And we're going to make it for prod. And we're going to also add a build optimizer. So this is what's actually building our projects into that distribution folder that you saw. Okay, now that this is complete, we can run our Firebase deploy again. Okay, so we're going to control click, see when we refresh the page, so we have our sample project here.

If we right click and inspect, we can go over to our lighthouse audit tab and we're going to run a brief lighthouse audit. This is a tool that's very helpful and evaluates websites. So you can see here that we have some very high scores. You can see that we are in fact a pw a. And so yeah, that's it. So we've we've essentially finished setting up our pw a project.

We've launched on Firebase, we installed the angular COI in order to set up our project and build our project. And now all we need to do is actually build our specific project inside of this project. So that's what we're going to start planning in the next video. I'll see you on that one. Bye for now.