Setting Up Dashboard Pages

[00:00:00]
>> Up to this point, we have built a simple Jamstack site, we built a contact form. So the next thing that I wanna move into is the idea of client-side authentication. And so how do we protect things in Jamstack apps? How do we make sure that somebody's logged in before they can see something?

[00:00:19]
So we're gonna solve that problem by using OAuth, and we're gonna use React as a way of setting this up. The principles will be the same in whatever frontend library, you'll just need to figure out how the router works. But the general approach should be pretty similar across Angular view, whatever you wanna use.

[00:00:40]
So to start, we are going to move into the Dashboard folder. And that's gonna look a little bit like this. It's effectively empty. I just didn't wanna make y'all watch me write more CSS, so I left the CSS in there for us. So the way that we're gonna start this one, is we are going to make sure that we can use it with nullified dev, because we need to to able to write redirect.

[00:01:06]
So I'm just gonna create a gatsby config in here. And then I want to set up my Netlify redirects. So I'm gonna create a netlify.toml. And we're also, let's see inside, gonna set up a redirect. So that's redirects plural inside of double square brackets. And we are going to redirect from dashboard, any dashboard, and point to just dashboard itself.

[00:01:45]
And the reason that we're doing that is that we're about to build an app that will have a dashboard component. But we wanna be able to visit different sections of our dashboard, dashboard/accounts/buildings/ whatever. But we wanna handle all that through a single component. And that's how we're gonna be able to manage authentication.

[00:02:03]
So we're gonna have Netlify handle that redirect for us. So that if somebody were to type in, like /account/dashboard, or a /dashboard/account, they would end up in the right place. Instead of getting a 404, because there's no actual file at /dashboard/account. And the status that we're gonna send this 200, because again, this is a rewrite.

[00:02:30]
And to get us started, let's go ahead and run that yarn init-y for yes to set up a package JSON for us. And inside of it, I'm going to add gatsby react and react dom. And we're using gatsby because we don't wanna have to set up a bunch of boilerplate.

[00:02:54]
We just wanna be able to get it up and running. So once we have gatsby react and react dom, we can set up our first page, which, let's start by creating just an index page. And that's gonna live in pagesindex.js. So this one, we're gonna import react from react.

[00:03:21]
We will import link from gatsby. Link is a helper that allows you to do local links without fully refreshing the page. It's just kinda a nice to have it, it does some some background performance optimization, like preloading things as well. And then we're going to export default. And that's going to, Be a fragment to start.

[00:03:47]
We'll send a H1, and we'll say this app rules. And we'll say log in to find out why. And then we're gonna link to a dashboard, and also, let's go to a dashboard. Okay, so this is a basic app, and we can actually go ahead and start it by running that with iDev.

[00:04:23]
So let me get localhost 8888, that's the Netlify dev port. And this will give us our kind of basic setup. So the next thing that we wanna do is let's add a little bit of a layout, so we can apply these styles that are prewritten. So I'm gonna create a new component called layout.js, and init will import react from react.

[00:04:46]
We're going to import link from gatsby again. And then I'm also going to import this layout.css. Then I can define the layout, component that is going to take children. And that means that anything that we put inside of the layout component will be wrapped up into a children component, so that we can stick that in there.

[00:05:12]
And then I'm going to return a fragment again, because we don't wanna add a bunch of useless markup. Set a header. We're gonna link to the homepage, and we'll just call this a Jamstack app. And then we're gonna set up a main component, and that is going to contain our children.

[00:05:35]
And at the bottom here, we're gonna export default layout, so that we have access to import that elsewhere. So that's the full component there. And just recapping, we've got just a header and a main. And then whatever we put inside of our layout component will show up here in between this main tags.

[00:05:59]
So back in our page, we can just import that way out. And that's up in our Components folder, Layout, and then I can use it here. And because the styles were prewritten, it picks all that up. And we have just a nice simple overlay for our Jamstack app.

[00:06:25]
When I click through to go to the dashboard, it breaks, because we haven't created that yet. So let's create our dashboard page. And we do that by just creating dashboard.js. And we're gonna import react from react, we'll import that layout again. And then we can set up the dashboard as a component.

[00:06:54]
That doesn't need any props yet, and it's just gonna return our layout. And inside the layout, we will return just a todo. Export that as our default. And now we should be able to visit our dashboard. There we go.