Alrighty, so one last optimization we're going to make is in the meta tags, and we're going to add progressive web app support for iOS devices. I discovered that this was necessary when building my own portfolio website by using Xcode on a Mac computer. It allowed me to simulate any Apple device, and that's how I realized that it wasn't working properly. I found a medium article that explains the process. But again, we're just going to copy and paste this. You can read it if you want, I'll provide a link.

So we're going to go back into our index dot HTML. And we're going to comment out a title for our pw a compact and we'll paste this and we'll actually move the manifest down as well. To join it. And I also noticed I should probably have a space between the two words in my title. So let's fix that. Alright, so now we're actually ready to build and deploy.

So I like to have three terminals open at once. One is our local server. The other one would be GitHub. And then the other one is for building and deploying. So we can see that we have our first terminal open our local server, we're going to stop that with Ctrl plus C. So you can see we've stopped that now will help us optimize the time it takes to actually build our project. So if you remember we had our GitHub in our second one here, so we're going to make a third one.

And we're going to do this with the angular COI. We're going to run in ci build dash dash prod and then dash dash build dash optimizer and we're gonna run that this is going to output just a couple of files. into our distribution folder up here. So you can see that we have some warnings and some errors. So this is a new feature with the newer version of the angular CLR, you can see that we've exceeded the budget for our CSS file here in our app, and for our resume, and it gave us the same errors below. We can actually fix this by going into our Angular dot JSON file.

And so we will get rid of the terminal for now. And so from the top here, we're going to scroll down, you can see that we have budgets. And this is for a regular file. This is for any component style. So this is our CSS, we're going to make this 10 into a 100. So we don't want an error unless it's bigger than 100.

And we'll change our six into a 50. Okay, so now we can go back to our terminal and we're going to run the same thing. Again, just to make sure we don't have those same errors. Alrighty, so that finished properly that time with no warnings or errors. Now we already set up our Firebase account in the beginning. So we're just going to need to run one command to deploy our project and that is Firebase deploy.

These two commands will need to be run back to back anytime that you want to change to be live on your website. Now after it's finished, we're going to copy and paste our URL into our meta tag. Okay, so this is our hosting URL. We're just going to copy this and we're going to copy this into our meta tag, our o g URL here. This is for social media tags. Just though we have the same exact project that we're talking about.

Now that that's saved itself, we're going to actually do this process again. Okay, and we're going to deploy it one more time. But actually, before we check out our project, let's quickly test to make sure our Facebook and Twitter meta tags are working correctly. So we're going to go back into our second terminal, and we're going to ensure that everything is committed to our GitHub. So we're going to go get add, period, add everything, get commit, and then a message will be final version. And then we're going to push origin master Alright, so we previously copied our project URL, which we're going to need as well.

But now let's head over to Chrome. And you can see that I have the links here, I will share them in the course as well. And basically in both of them, you're just entering the URL of the page, and it'll give you some information. So we're going to paste that in there and press debug. Okay, it hasn't been shared on Facebook before, but we can click this button to fetch new information. So there are some warnings here, you can see that it doesn't have a picture yet, but we can scrape again.

And you can see now our picture loads here. So anytime that this is shared on Facebook, it will appear as this card here and it will have this thumbnail preview. Alright, very cool. Let's check out the Twitter one. It's a similar process. As I've said, we're just going to paste a link in there and we're preview the card.

Okay, cool. And also, we have our nice thumbnail here in the card. Awesome. So that's pretty much it. Now we can get back to taking a look at our project. And this time, we're going to control click on it and check it out.

Okay, OK, so you can see that we have our old, very original setup here. So we're going to go to inspect and we're going to empty cache and hard reload. And you can see now we have our proper project. This is a little bit messed up here. Okay, so we fixed that. All right, so let's, let's refund, go to lighthouse and see what our audit looks like.

Now. Let's run it. Okay, so you can see that our scores are even better. Our best practices is that 100 our SEO went up our PwC scores, this shows that it is our pw a we can also see that we have this plus sign here that proves that it's a pw a. And yeah, I'm very happy with how this project turned out. I hope you are too.

And let's do this for fun. We can install this on our desktop. And we can do that. So we have our full screen application here. Very cool. There we go.

Now it's loaded. Okay, our videos are good, awesome. So in the next video, I'm going to show you what the experience is like now on a mobile device because that's one of the main benefits of a pw a. But I think we've got a pretty cool project on our hands. I hope you're excited to share it with everyone and I'll see you in that next one. Bye for now.