FZpleLUtCKo

Create an App's Frontend with AI

Watch on YouTube ↗

Transcript

[00:00] you read the title correct we are never going to pay for a single website ever again whether you're currently hosted on WordPress Shopify webflow anything we're going to make it completely free if you just found this video or found me hello I'm Corbin and this is lesson two of never paying for a website again now what is super cool about this series is that I'm going to provide you with a ton of resources so now that we're jumping into lesson two this is what we're going to go over in today's video taking a step back if you have zero to little coding experience don't worry trust me I got a ton of resources and on top of that this isn't 20 16 y'all you're not

[00:31] going to see me sit here and code for an hour 2 hours 3 hours there's a new way to code you're going to learn how to do that therefore in this video we're going to do these things now if any of that doesn't make sense to you don't worry as I'm going to explain it to you and on top of that you're going to get a couple things in the description down below the first thing I'm going to put in the description is this Google doc which is actually going to walk you step by step of everything that I do in today's video on top of that you can just copy stuff over which is really really cool the second thing I'm going leave in the description down below is a Chad gbt link that is specialized for this specific context what do you mean by

[01:02] that Corbin let me show you the whole purpose of this chat is for lesson two so everything you're going to learn today if you run into an erir you can of course comment it down below see if anyone else can help you out but alternatively you can talk to Chad gbt now I've specialized it to really help you in this specific use case because we all know what's very frustrating is you follow a tutorial online it's 30 minutes in 40 minutes in you get an air and you're like how the heck do I get past this air well guess what I gave you the solution here both are going to be put in the description below both are going to be free so make sure to leave a like

[01:33] right off the bat right off the bat because you already know you're gonna get a ton of value and this is only less than two let's jump in welcome back to lesson two of never having to pay for a website again and I'll be honest with y'all based off the reaction I'm getting from lesson one two things have become very clear to me the first thing that's become very clear to me is that people like this kind of content and people want to watch this kind of content I was actually kind of hesitant doing this kind of content because of the fact that it is going to be a little code heavy but I think the way I teach and I think the way I'm going to show you to get around the code stuff is going to make it so easy that you're going to feel like like how am I even coding right now but you are coding and then the second

[02:03] thing I realized is that yeah if this goes the direction I think it's going to go I can see that there's a lot of people that want to see very high value content like this where basically I'm eliminating an entire expense from your business or alternatively creating an opportunity to create a website for free Corin you're speaking too fast what's going put me down to 75 speed a lot of my viewers like me speaking fast past that though it's made it clear to me that yes an AI software playlist will come out where I show you how to build out a front end and a back end and basically create your own AI software like not a gbt rapper because that's lame I'm sorry if any of you'all made a gbt rapper but like an actual

[02:34] specialized use case for a Ai and software so keep in touch with this channel make sure to subscribe this isn't always a code heavy type of Channel although it seems like I need to Branch out a little bit in this sector because there is a lot of like people not really making content in this realm so I guess I'll fulfill this need in this video though we're just going to show you how to set up so the end goal this video is I'm going to get a website like this I'm going to go and make sure I I can't really zoom in here but basically you're going to have it so so it's pushed to a very specific URL that's your own hosting URL on top of that we're going to be able to launch it

[03:04] within our own local machine this will make more sense as we go by the end of this video you're going to have an understanding of how to set up a project within VSS code that's going to allow you to basically add text and that's going to show up on a on a web page may sound simple in the surface and honestly it kind of is once you see the the steps towards it but you're going to learn a lot here last little thing here if you want to see lesson one this goes over the what how and why I'm even doing all this and gives you an indication of the cost you save and any other cost that would be associated with creating out a website of this manner I'll link it up there let's jump in the first major

[03:37] thing that we're going to do together right now is create Chad gbt custom instructions this is imperative this is going to give you the ability to if you run into walls if you run into issues if you're like what the heck does this mean you can paste it into your Chad gbt it will already be lasered in for your specific context and you'll get better answers in the Google Doc I provide example instructions and these are going to be the ones I use personally let me go over them line by line so you can really understand why we do what we do it goes without saying you're going to need a Chad DBT Plus account that's just part of the game in theory you could use

[04:08] this on a free plan it's just going to take you a lot longer if you have more questions when dealing with this kind of stuff for now though let's go to custom instructions we're going to go up to our profile here hit customize CH gbt I'm going to go ahead and clear this and then we'll add it one by one together first thing you need to understand about custom instructions is that if you are running to issues with chbt when it comes to why are you talking about this right now you get into R random rabbit holes like don't go that far Chad gbt I wasn't even talking about Pluto we were talking about Saturn this is what you need to leverage so the first thing we're going to go over is what would you like Chad gbt to know about you to

[04:38] provide better responses let's go and paste this over and that's the reason I'm leaving this Google doc is because it's easier for you just to paste them you know copy and paste it's annoying when people use like sign up to my free newsletter and then get this Google doc no no no no no no it's just there this is the instructions for my specific context if you don't know my specific context and you just ski a lesson to basically I'm taking this entire landing page and I'm making it my own and I don't have to pay 18 bucks anymore ch-ching for you you're going to basically fill in your context but let's go line by line for me I am creating a

[05:09] web Cafe AI landing page using visual studio code on Mac OS primarily with react for the front end in Firebase as the back end for you simply put in the use case of the type of website you're creating this can be long this can be short for me straight to the point number two using visual studio code on Mac OS put in your operating system are using using Windows this is actually important because of the some of the short hands and short Keys is going to be really relevant to your operating system for me it's Mac OS also the actual area you're putting the code in

[05:39] which I think all y'all would just use visual code Studio or Visual Studio code next we're going to identify what we're using for the front end and what we're using the back end corion what's a front end this is a front end like what we're seeing right here and what we interact with is the front end what's a backend if I were to save this that communicates to a data thing or database or data structure in the backend end a lot of these lessons are going to be dedicated to the front end but it's still good to identify the back end for example in this context we're going to use Firebase for hosting what do you mean hosting Corbin basically where websites going to

[06:10] exist on the internets so we're going to identify we're using Firebase as the back end the primary goal is to make an optimized landing page that's the goal what's your goal by coding style preferences remain the same with the parentheses around parameters and arrow functions and minimal spaces inside object Braes the reason I add that personally is I noticed that at least in the past there was issues when it came to coding with j6 and react and CAD gbt was giving some bad code in the sense that they weren't giving the correct brackets so I added that that's also good for you to know that if you're ever getting bad outputs or the code and

[06:42] you're noticing a reoccurring issue you can go ahead and identify stuff like that but for the most part you won't ever have to deal with bad code the new project directory is CD coffee fuel what does that mean Corbin don't worry this is going to be where you reference it in terminal when we reference it later what do you mean terminal basically terminal is how we're going to you know send commands to to GitHub send commands to vs code send commands to Firebase what do you mean by that don't worry we'll get into it all you need to know it's your directory what's your directory where we store our code branches what's a code Branch basically all the files of code then finally put in your GitHub

[07:13] username and for me it's coffee fuel bump now before I go to how would you like Chad DBT respond let's just get some stuff out of the way real quick make sure to download vs code onto your system for me it's Mac OS for you it might be Windows download it go to github.com put in an email choose your profile name that's what I referenced in the chat gbt custom instructions choose a profile name and that's all you have to do for now github.com VSC code all for now okay now let's go over how we want Chad DBT respond so let's going to copy over my current directions of

[07:45] course this is interchangeable as well personally this is how I like it begin with one sentence summary of the main goal for clarity I appreciate concise stepbystep instructions tailored on to the specific code or files I'm currently working on this is helpful so it doesn't just start rambling and doesn't lose track of the underlying code we actually care about please provide code Snippets or configurations that are directly relevant to visual studio code good Mac OS react and Firebase input output depending on whatever your situation is adhere to my coding sty preferences when referencing external resources or

[08:16] suggesting Solutions consider the context provided about my project and its current state and Firebase Integrations this is important you don't want to be 3 weeks down the road and a it's asking you to install Firebase again chbt I already install Firebase what are we doing here that's annoying this solves it before providing any step-by-step instructions first ask for clarification on the specific updates or changes I'd like to make avoid making assumptions that's big about installed packages or completed steps unless explicitly mentioned and then just as a

[08:46] phone one talk to me like Jarvis from Iron Man with an emphasis on maintaining code consistency and Clarity that's our custom instructions those are valuable set them for your use case save our custom instructions are done now let's start the fun so stop talking Corbin been talking tooo much just get going all right I got it I got it one last thing I want to point out before we get going here is make sure to kick that Google doc slclick the link that you'll see for this Chad jbt chat why are you telling me that Corbin because if you get stuck if you get stuck with anything I'm about to show you today use this ask it questions put in a specific errror

[09:18] and give it context of your specific situation and if it gets really bad send a comment down someone to help you out let's jump in here we go we got a brand new vs code here nothing happen to it let's create our directory this is how we're going to reference it on our local machine and on top of that how we're going to reference it later on when going get or GitHub don't click off I know I I know you're seeing terminal you're like I've never even opened that before Corbin what are we doing don't don't worry don't click off this is actually really easy I know I know

[09:49] terminal can be scary sometimes all right let's just first go ahead and create our project all relevant terminal commands can be found within that Google Docs so I'm going to go ahead and copy and paste using the ex exact same step flow explain the context and proceed so obviously our first thing here is the directory we're going to use mkdir squiggly slash and your directory so let's go to name it this is important I'm going to name my directory web Cafe land whatever you name it this is going to be it forever you could change it it

[10:20] gets difficult just name it something you like for me webcafe land boom now let's go ahead and actually reference that in the terminal to do so we're going to do CD squiggly SL webcafe land command C delete delete delete delete command V now before I hit enter here copy it why are we copying it we're going to use a little cheat sheet for our terminal commands we get used to them understand them copy paste them over this will make more sense on Mac OS it's called stickies on Windows I have no clue someone in the comments let them

[10:51] know but for now we're going to paste this as this is our directory I'm going to remove that little Bolding which means that we're going to be referencing this a lot in the future so it's always nice to step have a little cheat sheet boom first thing in our cheat sheet hit enter notice how within our terminal command now it actually leads to that specific directory so far so good once we're in this directory we're going to go ahead and make a vs code project with it and this is how we're going to import all of our stuff so all we need to do is do code dot hit enter and then watch this or it's going to pop up here not there so there we go though we are so

[11:23] far so good we are in our new vs Cod project which is web Cafe land step two here is done you just completed step two that's it set up vs code project boom good to go now let's go ahead and install react to install react it's pretty simple we're just going to copy this make sure we're in our directory how do I know if I'm in the directory Corbin it's right there if you're ever out of a directory let's say you create a new terminal window go ahead and grab that original command CD hit paste enter and you're back at it let's install

[11:55] react though what is react react is going to be our front end this is how we're going to create designs and visual elements within the actual website itself going hit past here hit enter and this is going to get load in here nice little load bars I know this looks crazy no this is not the Matrix no I'm not I'm not hacking something right now feel like if we were watching like some cliche hacker movie they would probably run this on like the screen and you'd be like oh this person's up to something it's like n it's just it's just downloading let it download with all this downloading you'll see it up there and funny enough look at that little

[12:25] message just left me happy hacking no no no chill chill chill chill we're just making a page we're not doing anything crazy boom done we've successfully installed the framework for our front end what's next Corbin let's create this GitHub and the reason we're creating GitHub or we're not creating GitHub but we're creating a repository on GitHub is that we can push this and put our code in the cloud which becomes very useful in a lot of different context here we go okay so we're in GitHub you're logged in you made your profile you have like a your name which for me is coffee fuel

[12:56] bump coffee fuel bump UPS bump ups.com check it out we're going to go ahead and create a repository names this is how we're going to reference it when we are making our entire git flows for me i' just like to keep it the same name so we're going to do web Cafe landan for you would be whatever yours is we're going to paste it in here and because of the fact that this is going to be your website for your business you're going to want to select private here you don't want you don't want anyone else to see your code create new repository so far so good now we need to actually set up our underlying repository and connect it to our vs code project now all this kind

[13:26] of looks crazy but don't worry we'll make it simple start off with the simple command of get in it no we're not Australian no I'm not from the UK in it in it kind of crazy mate shrimp on the barie I haven't been to Outback Steakhouse in a long time I think I need to go back they have like a really good flaming Yong once we do get in it our Google doc ask us to do a very simple commit here so we're going to go and do Echo this is going to create a readme file also I'll go and explain this a little bit more so this is going to create a read me file we're also trying to basically create our first commit

[13:57] here which shouldn't work right away because basically because it's a private repo we need to add a little bit of like Hey we're the actual person that owns this and no one else can push to it this will make more sense first off just grab that code or terminal command and paste it once we've done that we've added our readme file the readme file is like their kind of like how do you start using react like what's going on here in reality I can go like this and be like I want some coffee all a read me file is is that if you pass this to another developer you

[14:28] can use it as like reference basically like if you've installed stuff you probably know what a readme file is like the one I use for my main software is pretty funny what we have in there let's go ahead and actually connect to K though from now now for this next command we're going to do a little bit of copy and pasting I'll explain why we didn't copy this and for now I'm just add it to the bottom I'll delete this once like this video comes out but just make my life easy you're going to go and paste it and notice what it's asking for so the first thing it's asking for is your username your username is your GitHub username which is is over here so

[15:00] for me it's that for me it's coffee bump or coffee Fu bump so I'm going come over here I'mma paste don't worry about the link or I'll make it unlink paste now the git or your repo we come back over here is going to be the web Cafe land or your name so that was what we identified as the repo when we created the repo like when I hit that little crate repo button that's what it is paste now we got to add an origin for where this is coming from so we're going to go ahead and add our username here again coffee

[15:31] fuel bump whatever you are we're going to go ahead and add your personal access token this next part I know for a fact is going to get the most amount of replays months if not years from now because what I'm about to show you get annoying if you forget how to do it but don't worry we're going to come up to our developer profile here and we're going to go ahead and hit settings in our settings here we're going to go down to developer settings here we're going to go ahead and go to personal access tokens we're going to go to find grain tokens for some Clarity all we're doing here is basically making it so that

[16:02] GitHub understands that on our local machine or our laptop or your desktop it understands that you actually own the ability to access that code within the cloud think of it as quite literally your password quite literally a key to a door if you didn't have access to this personal fine grain token then you wouldn't be able to access your repo so we're going to go ahead and hit generate new token put in your password now this is why I know this is going to be the most replayed part of this video because the way the security works when it comes to this is that this token will expire therefore we need to reuse or create a new token and then put it back into our

[16:33] terminal knowing this you can set to 30 days 90 days 60 days or indefinite choose your amount for me I'll go with 60 token name what do web Cafe land token description add it if you want for the repository access let's choose the repository that's relevant to for us it's going to be the web Cafe land this is the repository we just created on today's video scroll back if you forgot for the permissions everything everything Corbin everything so every

[17:04] single one of these I'm not going to show you show me doing it but we're going to go ahead and just put the max amount of access why are we doing this Corbin this is because this is your code this is your this is your project so you want to basically be able to do everything that can be done when accessing your code therefore let's make this all read and write account permissions same deal read and write by the end you should see something like 27 permissions for your want repository 14 account permissions generate token now I might have to blur

[17:34] that out just cuz it's my token but for you you're going to see a huge string here it's going to start with GitHub here you're going to hit copy extremely important don't lose this if you go out of this page you won't be able to see this token ever again so I suggest you copy it and know where you're putting it let's go ah and put it back over to that Google doc well actually I can't because then people can roll back so I'm actually going have to move that entire text to something else so I'm GNA copy this before I add that token let me just add the last thing here so we can push it over so your username same deal your repo again is the name of the repository

[18:04] you made and get so I'm going to paste it here then just paste in your access token you're going to Simply come over here and paste now for me there's going to be a section here that's just like completely white that's because I'm still protecting the access token but just paste it should have all your relevant information in then all you have to do is hit enter I went ahead and hit enter a couple more times so you don't see my access token still but you should get a message like that that basically we have successfully created this new branch and what you'll notice is that all the information that we had in that Branch shows up here as well there we go we have access to everything that we created with that vs code so far

[18:36] so let me just do one push with you so you can understand how you take local code push it to the cloud and I think the easiest way to do that is let's update this read me two major things I want you to note here when you make a change to a file you'll notice a couple things first thing you'll notice is that you'll get a little one here that tells you there's been a change based off the original code so we haven't saved yet to GitHub the second thing you'll notice is that there'll be a little bit of an asteris here that tells us that something's different with the file than our original Branch just to clarify this a little bit more if I command C this and I go back to what the read me originally said which was this notice

[19:08] how hit save notice how that one goes away the main doesn't have the asteris anymore and the read me isn't yellow basically what's happening here is what we see here therefore there's nothing to change there's nothing to push y'all all good but let's go to do a push together so you can understand how to push I'm going to hit command a command V I want some coffee do you want some coffee it's weird I find the best coffee is typically at like diners like really good breakfast areas right corn beef hash maybe some pancakes sometimes maybe not usually it's corn beef hash sour dough toast under easy on the eggs

[19:40] straight coffee it's even better if they give me a pitcher you need a little water on the side too that is the way to start your day with us changing the read me here we're going to come back to our terminal and you're going to do your first commit here if you have never done a commit before you're about to see it here live you're about to see it here live so what we're going to do is this this how we push a new save we do get add dot get commit DM and then quotation marks this is how we're naming it this is how it shows up as like a new push to the

[20:11] branch this will make sense once I push it uh new read me and this can be anything quotation mark tells you that there has been a change etc etc we're going to say kit push origin and this is going to be pushing to the branch and right now you can see the Branch's name is main so I just got to do Main and boom what just happened Corbin come back over here reload this first thing you'll notice is that now the most recent branch is new readme I clicked that what happened to new readme oh we deleted

[20:42] everything in the readme and we just added I want coffee I guess someone wants coffee but there you go we've successfully just pushed a new change to our Branch together now if anything I just described there as like super confusing or you're like Corin what's a branch I one you to think of branches is like we have have our main branch right this is what we're going to use as like the main thing the website's going to see if we ever want to make features past this typically we make new branches we call those new branches a specific feature name such as ad footer then we will merge that ad footer Branch to the

[21:14] main branch so that we have a staple main branch we'll get into it don't worry in this lesson series I'll walk you through step by step and on top of that if there's anything that just happened in that entire flow that you're like what the heck just happened ask that Chad gbt chat I just had or I show you earlier like the one I shared and what you'll notice is that once we push if I click this it all goes away means regular not yellow I want some coffee boom number three is done we have successfully connected our GitHub to our vs code now let's go ahead and install Firebase now before we do that actually

[21:46] let me show you that it works and that we have a front end but just not connected to Firebase and we can do some cool stuff so in order to do that we're going to come back to a terminal usually what I like to do is create a new terminal for the use case of what you're about to see right now and what you're about to see right now is if we run this website on our local machine when I say local machine anytime I say local I'm referencing your actual computer has zero access to the internet and the idea here is that if you basically if I gave you this URL Local Host 3000 you wouldn't be able to see what I see

[22:16] because it's random my machine with any prompt when communicating with your project you're going to start that CD that's why we created this cheat sheet so let's add another thing to our cheat sheet the additional thing we're going to add to our cheat sheet is npm start what this does for us is this is going to launch it in a web page for us to play around with and it's going to be local so I do mpm start hit enter boom starting development server what you'll notice is that in the URL itself which I can't really zoom in well here you'll see Local Host 3000 so let's add to a cheat sheet again anytime you're

[22:48] developing not to an actual website link that everyone can access we're going to do Local Host 3000 as this is going to be our ability to create edits on the go let me show you what I mean now this is going to be our first lineup code together what we're going to go to app.js now right now you might be like how the heck did you know that don't worry this is basically what we're deploying this is how you will deploy the front end this is what's referenced we're going to create other files here but all I want you to look at right now is to understand the utility of a local machine so right now it says edit SRC

[23:19] app.js and save to reload and that's actually quite literally what we're going to do but the idea here is this it says that right now right watch how fast we can make it instantly change me go like this I'm minimize that real quick and if I say n I'm good boom that's the utility here instantaneous changes to see instantaneous reactions of what our front end would look like got it now that you know that in order to stop it from building two Local Host 2000 you either force quit your terminal or alternatively for ma it's control C this will stop any process and we're done

[23:51] therefore if I come back to that exact same URL you'll see the site cannot be reached now let's go ahead and install Firebase copy we're going to go ahead and paste mpm install Firebase this is going to give us the dependencies and the packages that are required to show up here for our use of Firebase as a project what can you do with Firebase storage hosting functions a ton of stuff hit enter we are loading in what you'll notice is that when we install Firebase it's going to show up in our package lock. Json and our package.json it will show up like this this is where we

[24:21] install dependencies for example if you were to install react or sorry if you were to install stripe it would show up here as well well this is the version right here and this is the underlying package we're installing or dependency now that we've installed Firebase let's actually create a Firebase project that we can reference and use within our project now that we're over in Firebase here we're going to create our own new project for you the user interface is probably going to look different because you probably haven't created a project yet for me already got one we're going to hit add project to start off here we need a project name I'm going to keep it simple I'm going to use the same name

[24:51] I've been using across the tutorial which is web Cafe Landing I'm going to hit continue it's going to ask whether you want Google analytics enabled or not I think if you're making a website you probably do so hit continue make sure that is selected make sure you check all the relevant information it's requesting here create project we are loading in to our project that will make it $0 a month and no more website fee oh yeah it's ready to go let's jump in continue we are in our Firebase project here let's go ahead and add some side tabs right here they'll become more relevant in future tutorials so we're going to go to

[25:22] build here let's add fir store database let's add functions let's add hosting don't worry don't worry don't worry right now we're just going to deal with hosting and actually creating this project over here so let's go ahead and select web what's going to be your web app name let's do web Cafe Landing again web Cafe landing and you'll notice there's already an option to set up hosting with it as well because that's the whole purpose of this lesson we're going to do that we do web Cafe Landing web Cafe Landing that's fine Register App once you do that you're going to get a code block that's going to be relevant for you now this is blurred out because

[25:53] obviously this is private information but you'll also be provided with a hosting URL that you'll actually be B to push our code to on a lab live web browser we went ahead and already did the first step here let's do the Second Step coming over to our next command line here we're going to do torch srcf Firebase .js this is just going to create a file for us to put all this relevant information in command V enter boom with this firebase.com

[26:26] which will be your measurement ID and also just analytics kit analytics app that's all you have to do for now though paste it in you'll learn further lessons of how to leverage this make sure to command save now that we have the file structured and we've created our project here let's go ahead and initialize tools to do so we're going to do npm install G Firebase tools these are what's going to give us the ability to do hosting functions in fire store hit enter as I referenced earlier if you run into issues use that chat gbt chat and straight up just copy and paste the entire air Message from that your like

[26:58] the terminal message and it will take you in the right direction okay now that we've installed the tools let's actually log into our Firebase account so we can access it within our vs code all we need to do is this Firebase log in enter I'm actually already logged in so I'm actually going to do Firebase log out so you can see the process here very very very important anytime you plan on coding using Firebase doing anything basically just start your day by doing Firebase login let's add it to the cheat sheet add Firebase login Firebase log out to your cheat sheet real quick in and out

[27:29] Firebase login when to ask all this information you're going to say why which stands for yes once you're here choose the account that you did this entire setup with for me it's contact webcafe a.com make continue enter your password once you're entering your password you're going to come down here and hit allow and you should get a message like that it show has success logged in as your email and you're good to go now that we're logged into Firebase and it understands that this project exists and we have access to it need to initialize it initializing this context is that anytime we want to use a specific spefic feature within Firebase such as hosting functions database you

[28:01] need to initialize it you only need to do this once typically and once you got it going you got it going for me I'm going to do Firebase in it now you have a ton of different options here for us we're going to go ahead and scroll down to hosting because that's what we're doing in today's video we're going to hosting configure files for Firebase hosting and optionally set up GitHub action deploys we're going to hit space then we're going to hit enter we're going to select use existing project we're going to choose our project which should show up web Cafe Landing web Cafe Landing what do you want want to use as your public directory that's going to be this right here we're going to say

[28:32] public so we're going to hit enter configure as a single page app we're going to say yes set up automatic builds and deploys with GitHub we'll say no for now file publicindex HTML already exist over right we're going to say no that's very important and there we go once we've done that you'll notice is that we'll have a new two files here we have the Firebase Json and we'll have the Firebase RC let's go ahead and see this all working together so first off let's come back to our Firebase project we're going to go to hosting going to get started here for the most part this should already be initialized we

[29:03] actually need to deploy so let's actually do that real quick and before we do that we're actually going to build it first to build it is npm run build what does that mean Corbin npm run build means in this context this is like react compiling the front end this is like the visual element we're building first Firebase deploy is like us deploying the backend front end deployment backend development or backend deployment so first let's build our app it's going to be npm run build this is different from npm start npm start is like the local 3000 npm run build means we're building this file into an optimized production

[29:33] build that can then be pushed to our website there we go we've successfully built it this is also the sizing of your app if you're interested now let's go to deploy Firebase deploy early days this is going to be extremely fast for obvious reasons you got a small application as you keep going though this could take a while for now though we've successfully deployed let's check out this website now sometimes you're going to air like this where you're getting a white page here but not in the emulator typically this has to be associated with the index. HTML let me go ahead and confirm this first and while we confirm this we're going to actually do a little trick here you can actually run two terminal commands

[30:05] simultaneously so doing npm run build Firebase deploy pushes your entire application so I'm going to go and paste that hit enter here we're going to build it first and then deploy it and there we go it worked perfectly there is one thing you need to change in order for this to actually happen the issue that was incurring here was that the Json was referencing the wrong area to build the deployment so in this Firebase Json you're going to public here switch that to build and then this should P this should push perfectly to prove it to you all we got to do is come to our Firebase here if you go to hosting these are

[30:35] going to be previous deployments and then you can click either of these links come over here you click either of these links it's going to take us to that page and this is a live URL this exists on the internet now whether we actually let robots crawl it and site ml that's going to be a later conversation but for now there we go we've successfully created a connection between GitHub VSS code Firebase and created all together to the end point of having a deployed Firebase hosting or the website we're going to be building from here on out now I want to point out that if you had questions

[31:06] during this process talk to that chbt chat but on top of that I'm going to go into more detail of what those files represent what it means to do all this as I know this may have been a little bit fast and kind of glossing over some of those facts that's because of the fact that you know you're going to have lesson three you're going to have Lesson Four to set that all up and understand at a deeper level what every single folder means there what every single file means there for now though so we've successfully done lesson two here where we set up a vs code project we've connected it to GitHub we understand now how to install Firebase use Firebase

[31:37] hosting or use other stuff in that as well but for now we're good to go that wraps it up y'all make sure to leave a like if you felt like you learn value today I'm going to make sure I keep this series going I'll have everything that I reference in today's tutorial in the description Down Below on top of that my outros for these videos are going to be a little different as I'm using a different profile to do these videos on my Mac so that you know for security reasons stuff doesn't get crossed wired this is going to be the playlist that's going to be a random video that's going to be my face make sure you subscribe more value to come and I'll see you in

[32:07] the next video