Supabase Tutorial #2 - Connecting to Supabase

all right my friends so in this lesson we're going to set up a new super bass project and we're going to connect to that project from our front end react application so the first thing you want to do is head to superbase.com and you want to sign up for a free account by clicking sign in now when you do that it's going to ask you to sign in with github so you do need a github account to do this so once you've done that you need to authenticate with github and then when you've done that it's going to redirect you to your project dashboard now at the minute you can see i've got one project here you will have anything and in fact he might ask you to set up a new organization so just fill out that quick form and save it and then you want to select new project choose the organization and then we can select a project name so i'm going to call this super smoothies like the website name a database password we can generate one and copy it if you like and then down here choose a location after you've done that the free tier create new project and then when you've clicked that it's gonna in the background create this project for us it might just take a few minutes all right so we can see it's still setting up the project but if we scroll down here we need a couple of things we need our api keys which is still generating but also this url so we can copy this url and paste that into notepad or something like that for now and also copy this public api key right here all right so you want those two things we're going to need those two things to connect to this project from the back end and if we scroll up we can see yeah it's still setting up the project but probably within about 30 seconds it's gonna complete this and you'll see a few more details about your project but for now the only things we need are this a non-public key and this url right here okay so copy this and this okay so those two things we just copied the api key and the url we're going to use both of those to connect to the project from this react project now we're going to store those in environment variables so let's create over here a new file and that's going to be a dot env file to store the environment variables in now we're going to call these two different things so we have react underscore app underscore superbase underscore url so all of the different environment variables in a react app have to be prefixed with this and we set that equal to something and then down here react underscore app and then this one is the a non underscore key and i'm going to set that equal to something as well now i'll paste in the key we have that and then if i just open up my notepad i'm going to copy the url and paste that in there as well so now we have those environment variables which we can use in other files now inside this project and we'll do that shortly all right then so now we've done that the next thing we want to do is install superbase the client library and we're going to use that then to connect to the back end so to do that open up a terminal and type npm install and it's at super bass spell this correctly and then forward slash super bass hyphen js now as i'm recording this they're releasing a new version of super bass and it's just a release candidate at the minute so it's not fully done however if you want to try out that new version you can add at rc right here and press enter i'm going to use version one but i will be mentioning where there's changes and differences with version two as i go along so that you can follow it if you're using version two as well but those changes are minimal so for now just press enter to install this version of superbase now while that's installing i just wanted to come back over here to the project dashboard which should look something like this now when it's finished initializing so you can see all the different services that we can use but more importantly i wanted to show you how we can connect the front end to the back end using a bit of code and that client library so if we go over here to the left to where it says api and click on that it's going to give us a code snippet at the bottom of this page to do just that and it's this thing right here so first of all we import this function create clients from the super base library then down here we have our super base url and super bass key those are the two things that we're storing in environment variables and then we pass those into this create client function as arguments first the url then the key and we're storing the response inside this superbase constant and that's what we're then going to use in the future to communicate with superbase on the backend to do things like interact with the database okay so then let me copy this code snippet right here and then back in our project we can close this and go to our source folder i'm going to create a new folder over here called config now you don't have to do this this is just my preference but you can put this file wherever you want but inside this i'll create a new file called superbase client dot js and then i'm going to paste in this code so we import that function first of all then we have our two things the url and the key now what i'm going to do is just rename this thing because we didn't call it super base key so let me go to the environment variables and we called it the react app and on key so let me grab that and i'm going to paste it in here and then same for this i'll get rid of this which is hard coded and i'll say process dot env dots and then let me grab the react app super bass url and paste it in right here so now we're invoking this function and passing those two things in to connect to the back end and we have this super bass constant now which we're going to use in the rest of our project later on so what i'm going to do is one more step i'm going to say export default and then super base now at the minute this file is not going to do much it's not going to connect to anything because we're not running the file so inside the home component what i've already done is i've imported that super base constant from the superbase client file you can see come out of the current folder pages into the config folder and then into the superbase client file and we grab that export superbase and then when the home component is rendered i'm logging it to the console this superbase object just so we can see in the console so now we've done that let's check it out in a browser so i've just tried doing that and i got an error and that's because inside superbase clients i misspelt superbase so correct that and also by the way you will need to restart your development server down here so you can cancel out the process by pressing ctrl c and then run npm start again purely because we've installed that new library super base so if you get an error because of that restart the server and then it should be fine so over here in the browser we can see this superbase client object right here and inside that all these different properties so we're going to be using this super base client object to interact with the back end later in particular we're going to be interacting with the super base database and i'm going to show you how we can set that up and fetch data from it in the next lesson

Channel: Net Ninja

Views: 42,829

Keywords: supabase, supabase tutorial, supabase crash course, tutorial, supa base, supabase vs firebase, react supabase, react supabase tutorial, supabase database, supabase postgres, postgres, supabase setup, install supabase, supabase client library, javascript supabase

Id: Gz9bvYybaws

Length: 6min 55sec (415 seconds)

Published: Wed Aug 31 2022