Getting Started with the React.js Starter App

Sebastian Scholl (00:03)
Hey everyone, this is Sebastian here from 8base. Today, I'm going to be walking you through the 8base React Starter app, just to show how quickly you can get up and running for building a ReactJS application that is using an 8base backend. Let's dive into it.

Sebastian Scholl (00:17)
Cool. Here I am in GitHub at the React 8base Starter app repo. Now, inside of this repository, we have a readme that will walk you through the steps of setting this up. But I'm just going to walk you through it and then point out some things in the repository or in the code files that will help you understand contextually what you're working with.

Sebastian Scholl (00:38)
The first thing I'm going to do is copy the URL and clone it down to my computer. Let me open up JS code here and I'm in my temp directory. I'm just going to write git clone and I'm just going to leave it with the default name. I'm going to move into that file, so change directory here.

Sebastian Scholl (01:02)
Now the first thing we're going to want to do is there is a .env file that shows all the different information that we need to set as environment variables. I'm just going to do that into a... I'm going to make a local.env or env.local file for the same stuff.

Sebastian Scholl (01:26)
I'm just going to throw that into a .env .local, just good practice. Now I'm going to open this folder up on my computer. Cool. Let me go to my... I'm just navigating my file structure here so I can get it. Cool.

Sebastian Scholl (01:46)
Awesome, here we are. Close everything. I spelled that wrong, .env, good. Now what we're going to do is we're going to jump back into the 8base console to start collecting all these different environment variable values that we need to set, starting with the workspace endpoint.

Sebastian Scholl (02:05)
Let me go to a backend that I have opened. It could be any 8base workspace, it doesn't really matter. I'm using my super task backend. I'm going to go here and copy my API endpoint and then drop that into there.

Sebastian Scholl (02:20)
Next is just three different off profile relevant keys. Let me go to App Services, Authentication and set up React Auth Profile. Call it whatever you want. We're going to leave as 8base authentication for now and then say that this is open to all. So that meaning that anyone could sign up through this application, and we'll point out what that means in a little bit, and then just assign a random role to that user when they sign up.

Sebastian Scholl (02:52)
Add the profile. Cool. Now I'm going to take that profile ID which is right here and I'm going to set it as the auth profile ID. I'm going to take client ID, which is right here and I'm going to set that as the auth client ID. Then I'm going to set the auth domain here as well. Cool.

Sebastian Scholl (03:17)
Now we can run npm run start. Actually no, we can't. We still have to install running[inaudible 00:03:25] install our dependencies. So that is going to run for just a minute and I will be back when it's done.

Sebastian Scholl (03:34)
Cool. A lot of logs but no errors, so we're good to go. Now we're just going to run npm run start, and start up our application. Cool. Now it is loading, and one second. Let's see. Cool. Compiled successfully. Awesome.

Sebastian Scholl (03:56)
So here we are with our app. We can see that there's a router installed, so we have these two different pages. We're on the home page and the sign in button. This is already set up with off module with a API connection to the 8base backend, as well as like some other stuff that we're going to look at.

Sebastian Scholl (04:15)
However, let's do a test run. Let's click Sign in. It's going to take me to my hosted login page. I'm going to click Sign up. Here, I'm going to just use my random email account I have: SS, super secret password, and click Sign up.

Sebastian Scholl (04:36)
Someone already exists with that. Let me just go into my backend really quickly, and here we can go... Oh, here. No wonder. There we go. Here's my backend. I'm going to go to Users, Data, delete this here. Awesome. Now let's go back to our app, and awesome.

Sebastian Scholl (05:12)
Sign up, go through the steps again. We're going to do... Cool. Loading, awesome. We're authenticating our app now. Now we see that when we go to the Profile page, it's actually doing an API call to the backend, which is authenticated because it's getting back our name and ID and our email address. Awesome, so that all works.

Sebastian Scholl (05:39)
Let's take a quick look now back at the code. So pretty straightforward ReactJS application. So first thing, if we go into the source and we look at our application.js file, we can see that we are importing a component called the AppProvider from the 8base React SDK. Essentially this is what we pass our off-client to as well as our workspace endpoint, and it knows to communicate then with the on the base API.

Sebastian Scholl (06:10)
We also have our routes, which if we pull from the route file here, we can see the different routes that we had set up. We also have a component which is a protected route. This is essentially handling the check of whether or not we are authenticated or not authenticated to protect against accessing certain routes in the application.

Sebastian Scholl (06:28)
But pretty straightforward if we are authorized, which is coming from this useAuth function, which is coming once again from 8base React SDK. It checks, it will render the component with the properties if we are authenticated on a protected route. If not, it's going to redirect us to our auth path, and so we make a sign in. Pretty straightforward.

Sebastian Scholl (06:54)
That's really it. I think that's what we have to cover on this one. As a React developer, I'm sure that you can jump in here and use it however you want, reformat however you needed. However, hopefully this is a great little starting point for you, to start developing a new application using ReactJS and and a 8base backend.

Sebastian Scholl (07:14)
Cool. I hope that this got you excited about starting a new project with ReactJS and 8Base. 8base is really an amazing backend technology for developing with these modern frontend frameworks as in a few minutes you can have this really scalable and awesome backend to start developing against and using that graphical API just has a great developer experience.

Sebastian Scholl (07:36)
If you found this helpful, please give it a thumbs up. If you want to get updates when new videos come out in the future, please subscribe to the channel. Happy developing and looking forward to seeing you in future episodes.

‍