Lesson 2 - Firebase Hosting
Create an App's Backend with AI📅 2024-10-27
Transcript
[00:00] let's connect our web application to a live hosting URL so we no longer see that Local Host 3000 welcome back y'all in this video we're going to be going to part two here number two which will be hosting we're going to be setting up hosting with react so we're going to goad and SL appstack what we did in appstack was as a quick overview as we set up in in GitHub so we can access this through a git in addition we set up our Firebase which is going to be all of our backend logic and if you just found this video we're doing a ton of stuff here check out this series make sure you don't skip part one as that is where we're at right now therefore let's do
[00:30] part two here let's set up hosting to do so go to Firebase the project we set up in the first video go to Project settings here scroll down this code right here is what it's going to allow us to connect our Firebase to our react application obviously some of it's going to be blurred out because that is sensitive information so two things we're going to do in today's video first thing we're going to create an envv is for high-risk variables you'll see how we connect that the second thing we're going to do is we're going to connect that to our application here so we can actually deploy to a live website link make sure you have terminal open make sure you have it in the correct
[01:01] directory for me it's actual backend app if you don't know what yours is reference the cheat sheet we created in episode one for me it's just CD actual backend app once we're here we'll make sure we're in the correct Branch here which we set up earlier which is going to be Firebase ad the first line you're going to do is you're going to need to install Firebase so you're going to do npm install Firebase I've already done this simply hit enter there next step we're going to come over here to Source going to hit new file Firebase JS in firebase.com this code right here simply hit copy paste it over perfect we have
[01:33] pasted over the code here this is still going to be blocked here let's go and create our EnV file right click Source new file. EnV all right let's go ahead and leverage cursor AI make our lives easy I'm going to come over here I'm going to hit command L control L we're going to add our current file EnV we're also going to add Firebase .js we're going to go and say okay let's import thatv all relevant variables from Firebase .js enter this will be blurred out but as you see this is what we want reactorcore Firebase and then the relevant information copy this and paste this into your EMV then it gave us the
[02:04] correct Firebase .js as well notice how we are referencing the EnV in our front end now process EnV react Firebase API key which we notated inmv these two are connected now we're good to go we set up some security measures so far so good come back to terminal before terminal let's make sure we set everything we need to set up in hosting we're going to hit get started you find this you're going to go to build hosting let's just make sure you have all the fundamental stuff required for everything you're about to see from now EG npm install DG fire tools paste that line in there hit
[02:35] enter I've already done it do the same if you ever run into issues with npm that means or like basically it's like what's an npm you need to install no JS which I referenced in the first lesson now that we've done that A good rule of thumb anytime you start a developing day is going to be Firebase login Firebase log out so first I'm going to log out because I am probably logged in this is going to give us the ability to access our project that we created and do a bunch of cool stuff so first off let's log out going to do Firebase login the relevant email that we're going to be logging into is the email that is associated with that Firebase project hit Y here we go so make sure you have
[03:06] the right email Associated your Firebase project hit continue we're going to hit allow and we're successfully logged in based off my experience in the past what I would suggest you to do is anytime you start a new day Firebase log out Firebase log in so you don't get random errors that you're just like that's impossible I know I did this correct just start your day like that kind of like starting your day with some coffee now let's go ahead and do Firebase in it this is going to allow us to initialize hosting we're actually going to use the same type of logic for everything else we do in the back end what you'll notice is that this is where all of our backend functionalities and everything you're
[03:37] going to see this entire series get played out oh yeah and also because I didn't really describe in this video yeah this entire series you're getting full stack backend development if you want front end I have a whole separate playlist for that for now though we're going to go to hosting hit space hit enter use existing project this we're going to go ahead and do actual backend app this is the one that we created together and it looks like it wants us to do a separate command in the beginning so we're g do Firebase init hosting use an existing project we go what do you want to use as your public director we'll say public configure as a
[04:07] single page app rewrite all urls to index.html I'm going to hit no set up automatic bills and deploys a GitHub this is not necessarily to hit no file already exists over right we'll hit yes there we go we have successfully initialized hosting now let's just go and confirm that we don't get that little glitch where it is a blank screen and we got that little glitch let's fix it now how do we fix this now we're a separate Branch here so we could roll back to Main and be like yo we messed up or alternatively let's go to GitHub notice how it's the index.html that's throwing this air in GitHub here we can go to the REM me
[04:39] change which is a previous Branch commit we haven't committed this one yet and coming up here I'm going to hit browse files there going to be all the files found within this commit I'm going to hit public I'm going to go to index.html I'm going to hit command a command C and paste this command save and we're good to go use that as you will this logic is very useful in the context that you don't want to roll black completely to a previous Branch you want to change something very minute that is why GitHub is so powerful and I just fixed that air so if you found like to learn something make sure leave a like let's keep going here all right perfect so now that we have that set up we need to do one last step here to deploy the hosting so we no
[05:10] longer see that Local Host 3000 no more Local Host 3000 to do so we're going to do Firebase deploy hit enter oh actually we're not going to go to the euro we want to have some good practices here so we want to do two lines coming back to the chii here just for good practices we're g to do npm run build this is the front end Firebase deploy this is the back end it's just for good practice run this every single time you want it deploy to an actual live link and paste it again this is not completely necessary but let's just do best practices all right and then we're going to go ahead and gut check this by clicking that link that you saw earlier
[05:42] okay cool hosting URL command C this we got the air again let's fix it anytime you run into errors that are specific to deployment you're going to be looking at adding very relevant classes such as the major app the fire base.js the package.json I'll go to move y'all see what else we can add here I mean if I accidentally add out of there that's not very relevant for the CSS and index.html and this should be good enough here we're going to ask a very simple question I show this so that y'all can do the debugging on your own rather than me just showing you a cookie cutter solution where everything works
[06:14] because as you know with code everything always doesn't work all right so here we're going to do this use this terminology as you will but we're going to say when I deploy a Firebase hosting I get a blank white screen rather than the rendered app.js hit enter and there we go it's actually very obvious what needed to do so we're going to do Firebase Json come down here Firebase Json command a command V command save let's try again we're going to do npm run build we're do Firebase deploy enter there we go it works now so we got our actual backend app. web app URL here we got our nice little UI that we created
[06:46] in the first tutorial here we're going to go now if you're like Corbin I don't like that domain web app is kind of crazy that's kind of C if you release a software with the web app domain let me know that's kind of crazy so if you want to custom domain I show you how to do that within the school Community here it's in the description down below obviously if you don't care about a custom domain you don't have to do it it's only 20 bucks they'll probably go up over time if you're interested check it out all right sweet so now that we've done that though let's go and commit this uh we're going to add this to our G because we've successfully created a
[07:17] nice little Branch here for Firebase ad so get ad commit uh we're going to say hosting good and then we'll say get push origin and it's going to be the branch name if you forgot your branch name you can you just kind of scroll up here and you'll see it's right here plus you can find it at the bottom left here there we go so what this will do is we are then going to have in our code here come back over here we're gonna have a PR pull request what this is is like yo you want to add this to main are you sure so for you to be sure just sayit compare and
[07:48] pull request and then what you'll notice is that we can add more information relevant to what we did here so if you ever need to track backwards but if everything looks good and just for context you can kind of see what's changed what's going on here this is all the stuff we added from the previous video or actually this branch in the other video If it all looks good and you're going to go or say create pull request better UI if you hit file changed here and then you can kind of scroll through the directory that you have here you're like all right this looks good this looks good typically when you work in a team you'll have reviewers over here so I might do some videos on that later on you can check me
[08:18] out here for now though because it's just me myself and I G EZ we're going to say merge pull request confirm merge once we've done that because of the fact that we don't need this branch anymore we can just delete it and of course we can restore it in the future if we get scared and we're like yo I need that Branch back once we do that though this is going to merge to main which means that we can go ahead and go back to main and update our local code or just the code we have here so we go get branch and right now we're in Firebase ad we're going to do get checkout main what you'll notice is that when you delete a branch in GitHub it doesn't delete
[08:51] locally in your machine which actually can be kind kind of cool I'm like some old the old version of bump ups.com like the old software branches I still keep locally so I can can kind of run in the emulator if I want to see them for now though we're going to hit get pull origin main this is going to pull all that relevant code that we just did there we go you'll notice that we have the little pluses the little minuses Etc and for now because of the fact that we're going to go and if I click cursor here we're updated here we can go ahead and do get branch and we're going to do Dash capital D and this is going to
[09:21] delete it locally from our system get Branch DD Branch name boom we've deleted that Branch we're good to go we're in get main we're ready for the next video next video we're going to do here together is going to be off and our ability to have a user sign in sign out this is going to require a little bit of backend logic with the function of creation of the user with some database as well to be honest with you so this is going to be a more complex tutorial when it comes to the backend but don't worry I'll make it easy we'll do it with AI we'll be good make sure leave a like it's completely free and I'll see you in the next video no more hosting we're
[09:52] done with hosting byebye those are two random videos that's my face I'll see you in the next video