I'm Jessie.

Today.

We're going to try to turn our react project into a progressive live at.

I've just upgraded to next 7.0 point one, and that's probably the only change that's happened to this project since the last time I screamed.

Other than I did emerge a few pull requests.

I know some of you are getting those Octoberfest PR is in eso Thank you for everybody who's, uh, who's helped out on that and, yeah, what did I do?

Yes.

So I've been at the Reacts Advanced React training with Ryan Florence.

So I'm thinking I might make a video recap off what I learned there and put that on my YouTube channel.

So if anybody's interested in seeing that, you can check out my YouTube channel, the links.

In the description of this video, I'd like to get that done within the next day or two before I start to forget things and also want to thank everybody who has been helping out and sending the job openings.

I have three interviews coming up in the next two days and one phone call with a recruiter so a lot of lot of stuff happening, and I have two more interviews that are I need to be scheduled.

So there, like, most likely going to happen.

We just haven't set a date yet.

So as of right now that I'm thinking like five interviews will be happening in the month of October, I'm still waiting to hear back from a lot of a lot of companies.

So anyway, thanks again all your your advice and your links to jobs and things have been super helpful on.

I'll keep you updated as everything happens with that.

Okay, let's get started.

Me flip my screen here on if you're new, feel free to ask questions as we go along.

I'm gonna take breaks periodically and go back to a live chat and answer questions.

So just be patient with me and I will eventually get to your questions.

Okay.

So nothing to see right here for now.

Let me let me bring over that lighthouse audit and we can start from there.

So if you never use lighthouse, I'll give you a little overview.

So if you go into depth tools, let's make this bigger, much bigger.

Okay?

So if you open up deaf tools, which you could do by just, um I mean, there's multiple ways I guess you could get there.

There's a keyword shortcut.

I cannot remember what it is, but you could also just right click and go to inspect.

It will pop open these deaf tools and then up at the top.

If you click on audits, it would take you the audit page.

And you can run different artists for, like, sight speed, accessibility, search engine optimization, and you can also run one for a progressive Web.

So this is what I've just run and I got a 64.

It's not really a good score.

So Number one I'm not registering a service worker, and that's a big deal.

You need a service worker for a progressive Web.

So that's where we're gonna start, is making sure we get that service worker register first.

After that, then we can look at some of these these other issues about having the proper icons and things like that.

You could see some of the other stuff we actually have already.

I'm just going to show you this so that you all know what what's needed cross browser.

Right?

We have that.

Some of these are just basic that you usually do for site.

Anyway.

Uh, see, each page is Euro.

We do have some of the some content, even when job strips not available.

We have S S l three's https.

We redirect https.

We have fast, low times, even on a three g network thehe dress bar matches, brand colors.

That's interesting.

I didn't know that was That was the thing until just now.

So that's kind of cool.

We haven't met, have you?

Poor tang content this size directly for the view port eso All those things are check here in lighthouse for progressive.

With that, there's a lot of links to learn more as well.

So this is pretty helpful.

Is should tell us that.

Tell you everything you need to know.

Uh, let me.

Oh, the shortcut is control.

Shift I to bring this up, so thank you.

Uh, wow.

Water room are I'm sorry.

I'm mispronouncing your name.

But anyway, thank you so much for the shortcut.

And that's on Chrome.

I do want to say I see a lot of people saying Hi.

So I just want to say Hi, everybody.

I'm not gonna go individually since there's so many Let's get started.

And first, what I want to do is let's go back to our code.

And I'm doing this on a separate branch.

I made a separate branch to install the latest version of next in case it broke something.

This was not on, master.

And I'm just gonna keep going with all our change is on the same branch.

And then if we if everything works, we could merge it back in a master, hopefully at the end of the stream if we get it working.

Uh oh.

B O says we could use F 12 as well.

Okay, cool.

All right.

So let me bring over some documentation as well.

Here we go.

And I'm gonna pace the link to this.

So I just pasted this link in there so you can read this documentation too.

But I was doing a little research, and this seemed to work.

So there's been an open issue on the get a repo for next day s for at least a year, and the issue has been about offline support so that you could do progressive web itself.

So This was one of the latest entries, one of the latest posts on that long thread.

And it's supposed to generate a service worker that can help next to work off line.

And somebody else used tried it and it worked for them.

So I'm gonna try it as well.

So there it says down here that there's been some updates for next seven.

So that's what I thought.

You know what?

I better upgrade in next seven before.

So now that we've done that, let's install this Sue we need to do to get it working.

So this is next offline.

Okay, cool.

So let's go back here and they make us a bit bigger for everybody.

And we're using yarns were gonna do your ad next offline.

You could do this, of course, with NPM as well.

That shouldn't take very long to install.

Well, that's no one is saying, Let's look at the first step.

So we need a next up config dot Js, which I think we already have.

So it's double check that we have that we know we have a just config.

We don't have a next config.

I guess not.

Okay, so we're gonna have a next config.

Whoa!

Right.

Okay, It's what way, Rupe.

I'm pretty sure you told me how to pronounce that before.

I'm really sorry that I didn't remember what?

Ray wa way room.

I'm gonna try really hard to remember.

Okay, let's copy and paste this now on.

And hopefully this is finished.

Yep, it's finished.

And let's make you know, route here.

A new flower.

Call it next dot Config that Js well paced.

We just have here.

So we're requiring next off line and we're exporting next off or with offline.

Let's save that.

Go back over.

We already have a server dot Js file.

So we need to integrate this into our existing service Js.

So I don't think we'll be able to just copy and paste this.

Uh, let's see.

Option.

You can add your custom extras configuration is a parameter.

Okay, Let's see what we're doing here.

Uh, crease, see where they're actually adding in with off line.

Yeah, that's interesting.

I don't actually see them using this.

Anyway, the check out our server dot Js file and see if see what's there are 70 J s.

Why was unusually long and needs to be re factored, but we're not gonna do that today.

Check out what we're doing.

Okay, so we are checking for a service worker.

Okay.

Looks like we only have it in this.

Okay, so if it is, the route is service worker Dodge A s.

We are skipping a lot of our custom logic, which I believe that's what we ought to be doing on.

We're falling back on next.

I'm not 100% sure that's what we should be doing.

Say no schooling here.

I forgot we had this giant object at the bottom.

Okay, this is our cashing.

Um, see?

All right, since compare, sir.

Static, listen.

Okay, so we have this if path name is service worker trying to figure out where exactly we need to put this since you're staying after outsider status.

Okay, uh, I'm gonna look back just to see if anybody's commenting anything about this code.

Okay, You know what?

I forgot to start up my opponent or a timer, so I'm just gonna keep an eye on the time, so I know maybe in another, let's say 10 minutes, I'm gonna go back and answer some questions in the live chats.

Just hang in there for about 10 more minutes.

I'll set this timer for 10 minutes, so I'm thinking we may be able to take some of this.

I guess I should double check and make sure that everything still works before we take another step.

It looks like it works.

Um, okay.

Speak Suri of path.

Name was first funeral.

I don't think we're using the same names for somebody variable, so we need to find the equivalent.

Okay, so ap next Strict.

It's sick.

We don't need to do this right now.

Wait.

Let's comment these.

We left these in from a previous thing we were going to implement, and I never took him out.

So let's just comment these out for now.

Uh, next rib are nice, so hands next.

Okay, so ap should still be the same.

Sure.

Let's say all of this.

Let's just take this out.

Single.

The sales were stuff out, so I was already long enough.

Okay?

Realistically, I don't think I'm gonna be at this position long enough to even implement that, so I'm gonna take that out on if they want to put it back in its already and get up.

Okay, so where it should not get.

All right.

So this is all this custom logic that we've done.

But what we really need is what's getting just, like, passed on.

So at some point, we're just passing things onto next and saying OK, next.

You just handle this, uh, encouraged.

Okay.

Sure.

Watch.

Okay, so here was We have you are?

Oh, we're using.

That is the cash key.

Sorry.

I'm trying to figure out what all this is.

We made this so so long ago.

Catch handle APP.

Request kid requested hand.

Okay, now, let's put in try to put some of this in here.

Oops.

I mean to take that.

She rid of that?

Okay, I'm hoping that's what I need is a joint is not defined.

And Parsons not to find.

Okay, let's see what we forgot.

Area.

Uh, all right, he's in.

See if that fixes everything in weird errors.

No, no.

Weird ares.

I'm getting a new warning.

When I upgraded that, we shouldn't have title tag in document dot Js.

So I'm not sure where we're supposed to put it, but I guess that's not It's no.

Now they're struggle warning before they weren't.

Okay, let's check our page here.

See?

Free off.

I'm gonna go to a local host to check this and just click around.

Okay?

It works.

Try some other pass.

Okay, But, um all right, that works.

Let's check in the console to see forgetting errors.

Okay?

We're getting some extra stuff here about service worker, so we should be able to check out our service workers here on DSI.