React Router 6 – Full Course

Key Takeaways

this course will teach you to build real world apps with react router 6. you will Master essential react router features such as layout and index routes nested routes search parameters route protection and the new remix inspired data router apis Bob's role teaches this course he is one of the most popular react instructors ever and is also the head of education at scrimba hi there free code campers and welcome to this interactive scrimba course where you are going to learn how to use the react router library to build single page applications in react since this is a course dedicated to a specific third-party react package it's going to be pretty important that you already know react if you haven't yet learned to react or you just need a refresher I've got you covered I've got another free course here on free code camp and on scrimba that's a complete introduction to react you can check the video description below for a link to that course and then when you're ready you can come back to this course it'll still be here for you I promise now the special thing about this course is that it is fully challenge based which means you as a student are going to get your hands on the keyboard again and again to really practice the topics that we're learning and if you're feeling a little bit concerned at all about following the challenges of this course on your local development environment don't worry that's why we've created an interactive version of this course over on scribba.com there you can solve all of the challenges directly in your browser without having to worry about anything with your local environment If instead you do want to follow all of the challenges on your own local environment that's great too I've got a GitHub repository with all of the code that you'll need in order to follow any of the challenges that we have throughout the course again check the video description below in order to get links to that GitHub repository one final thing if you are enjoying this course I ask that you please give it a thumbs up here on YouTube and if you have any feedback for me you can always reach me on Twitter at bobserol so with all that said let's get started welcome to this course on react router 6. I am so excited to guide you through one of the most popular and impactful libraries that exists in the react ecosystem now react router is a library used for enabling something called client-side routing and understanding what client-side routing even means is just one of the many things that we're going to learn in this course from a really high level we're going to be learning about the basics of using routes and routing we're going to learn about how to navigate between our routes we'll learn about layout and index routes nested routes we'll dive pretty deep into learning about search params and how to filter results and we'll be creating protected routes so that you can allow only authenticated users to visit certain parts of your page along with those there's a ton more that we're going to be learning and of course in the typical scrimba fashion we'll be doing tons of Hands-On practice in order to drive the curriculum forward we're going to be building a really cool app called van life which is a way for people to rent out camp Vans for their next road trip adventure this app will have over 10 routes we'll be able to filter the Vans by their type we'll learn about active nav link styling so we can very easily tell in the user interface where we are in the current APP as I mentioned we'll be including protected routes so that certain pages will only be accessible if you're logged in and will be hitting hard the concept of nested routes because this app goes multiple levels deep into nested routes then towards the end of the course we're going to be shifting Focus briefly to learn about how we can migrate our fake data into a real database using Firebase and periodically throughout the course we're going to update a live version of our site by deploying it to netlify here on the scrim I do have the final version of the code for the app that we'll be building so you're welcome to poke around the app get a feel for it you of course are also welcome to look around the code don't let it be intimidating because jumping into a new code base is always a bit intimidating instead be excited that you're going to be learning everything you see here now this should be really relatively self-explanatory but the things you should know before starting this course are of course react I would expect before you start this course that you have a pretty solid foundation in react if you are feeling Rusty or you have not yet had a chance to really learn react this course will not be a good starting point for that it will assume that you already have the basics in your tool belt so if you do need to spend some time learning react or just brushing up on certain topics I have a free course here on scrimba it's over 12 hours long it's got tons of practice tons of projects and is completely free you can click the screenshot here which will take you to that course on scrimba if you'd like my name is Bob zerol I'm going to be the course instructor for this entire course the most active place you can find me online these days is on Twitter you can click this little Twitter icon to go to my profile page on Twitter and without any further delay let's jump in and start learning about react router version 6. I mentioned that react router enables us to do something called client-side routing however that might not make a whole lot of sense on its face if you're not familiar with the history of multi-page applications versus single page applications so let's spend a second talking about the difference between these two in a more traditional website you have multi-page applications or mpas on the left side of this diagram we have a client it's showing a computer but more accurately the client is really the browser in our case and on the right side we have a server which really is just a computer that lives off-site usually somewhere else so when you go to your browser and you navigate to a website let's say mysite.com a simplified version of what happens is a request is made to the server that's associated with the domain of my site.com and it's requesting the HTML page that is needed to display the web page at that point the server will do some processing it will grab the HTML page but it also might be evaluating some CSS or some JavaScript it could potentially be reaching out to a database or making API calls to other servers in the end with the ultimate goal of putting together a completed home page to send back to the browser in the form of an HTML file that HTML file is then sent back as a response from the server to your browser and your browser then loads that page for you to view so then once you're looking at that home page you might go ahead and click on the about page the URL for this would be my site.com about which would then perform another request to the server the server again would go through similar processes where it would be searching for the about page to then deliver up to the browser your browser would then replace the old home page with the new about page from the browser's point of view it might look something more or less like this not including this actual animation when you're on the home page you can see all of the homepage content including a header let's say and a footer and when you click on the about page the entirety of that page is disk carded and replaced with the entirety of the new page of course it's usually not a sliding motion like this instead it will appear more like a Flicker and that Telltale flicker is a good way to know that you are currently looking at a multi-page application so how does a single page application differ well don't be confused by the name single page application it doesn't actually mean you can only have one page on your website but instead it means that your browser is only loading a single web document one time and then your app will make incremental updates to that existing document through different methods like internal react State changes or fetch requests to an API it all starts in a very similar fashion in your browser you navigate to mysite.com that makes a request to the server the server will then process a few things but this time instead of its job being to process and build an HTML file it's going to send back an entire react application so that application is sent back to the browser it's loaded into the browser and when new requests like going to the about page are made oftentimes portions of that new page are able to load directly inside of the react app without any new requests being made out to the server that said the about page might still need some extra information or data from a server or an API and so a request could still be made out to a server at which point it would do its job and this time instead of sending a new page back because remember that view already exists inside of the react app itself it's likely only going to be handling sending back something like Json data that Json data gets sent back to your react app which then loads into the react app gets consumed by it and changes whatever view you're looking at to include the new Json data that you just loaded from the server all that said on the client side the real difference that you'll see is there won't be the same flicker of the entire page when you're going from one page to the next because remember we're not reloading the entire document it's just one document one page but the content on that page might change in essence what that does is it might swap out the home page content for the about page content because the react app was loaded on the initial render of your website it already knew what content the about page was going to contain and it may or may not have had to reach out to a server to get some additional data in fact in our van Life app we're going to see this where we can transition to the about page without any delay without any of that flicker that happens with the multi-page application and the about page doesn't request any additional resources or Json data from the server instead it's already loaded on the initial render of our site however when we go to the Vans list page the beginnings of that page will load in sort of a skeleton UI you could say while in the background a request is being made to the server to ask for the specific data about the vans that we need to list then once that data comes in it will update the page to display the Vans this will make a bunch more sense once we actually start developing it so that's a very high level overview of what will be happening as we're building a single page application using react router now it's time for us to actually dive in and start learning the code hey free code campers this is a special message just for those of you that are taking this course on YouTube when you're following this course on YouTube you likely will want to complete the challenges and write the code alongside me in your own local environment and so I wanted to make a quick note about developing through this course locally at this point in your Learning Journey I assume you're already familiar with some kind of editor like vs code and at least know your way around the program in order to create new files and open a new project and so forth well the code for every lesson in this course exists inside of a GitHub repository that I really want to encourage you to go follow using this GitHub repository will give you the starting code for every single lesson in this course not only that but it will have a really important readme down here that will give you specific instructions for how to set this up on your local machine and any gotchas that you might run into while you're developing locally as well as any updates to this course that you might need to be aware of of inside of scrimba I have the power to record new lessons and insert them anywhere inside the course that I want but with the course being here on YouTube I don't have that same capability so this GitHub repository and the readme therein is going to be a really important tool for you as you work through this course to make sure that you're getting the most up-to-date information so even if you don't plan to use the code from this GitHub repo and you just are going to start the project up completely from scratch on your own still make sure that you come to this GitHub repository start it watch it bookmark it whatever you need to do and make sure to check it regularly in case there are any updates that will be important to you as you learn react router in this course the link to this GitHub repository should be readily available in the description down below if for whatever reason you get stuck developing locally while it is a great experience to debug those local development issues I don't want that to become a demotivator for you and stop you from your progress in the course so if at any point you do feel like you're getting stuck you are of course is always welcome to head over to the scrimba platform and just pick up where you left off in the react router 6 course okay that's all I have to say about this for now let's keep moving forward in the course okay we're gonna start this app from the almost bare bones we have a very basic react project here you can see that all we really have is a simple hello world there's one thing I do want to point out and that's something that I haven't really talked much about before and you might have noticed it real quick over here in the index.html you'll see that our script tag is pointing to index.jsx when you're working in a react project you can specify any files that have react components in them specifically ones that are using the jsx syntax as having a DOT jsx extension now under the hood in scrimba we've made it so that it's using Veet in order to compile the language if you were to download this onto your local machine and run it and Veet expects any components you make in the jsx syntax are using the dot jsx file extension now here on scrimba it's going to work just fine if you decide to make these as dot JS files but I did want to introduce you to that in case you had never seen it before so throughout this section and this project we are going to be using jsx files when there's a react component involved okay let's move on to react router setup you can see I have react and react Dom included as dependencies I need to include another module called react router Dom and that's react Dash router Dash Dom so I'll add that here you can see the current version is 6.4.3 now for a little extra information react router Dom 6.4 introduced a whole new set of tools that you can use in react router I'm planning on touching on those new additions to 6.4 a bit later in the course however in this section I'm only going to be focusing on the basics that come with version 6. we will not be going into the data layer apis that come with 6.4 okay let's start out with the most basic thing in order to set our project up as a single page application with routing using react router we need to import a few things and in this screencast the only thing we're going to be worried about is importing something called browser router and that comes from react router Dom now we just learned about context recently in this course so I think this will be interesting to you what browser router is doing under the hood is it is a context provider and so in order to give our app the power to include routing in its functionality we need to wrap our entire app with this browser router so I'm going to put browser router around the app like this we'll hit save and nothing much should have changed we should still get our hello world text right there but by simply adding browser router we now have a whole Suite of tools that come with react router Dom that we can use to control our app now just in case you see this in the wild sometimes people will rename browser router since it's a bit of a mouthful and so they'll import browser router but then rename it to something like router now we're also going to be seeing that there is a routes component and a route component so I'm not going to rename it as router because those are all very similar so we'll just call it browser router for now awesome this is a great start like I mentioned there's a few other components we're going to be importing so that's what we'll be working on next as we mentioned browser router is a context provider and it provides context to all of its children components very similar to what we were doing in our reusability section so browser router is the provider we need to set up a way to define the routes that we want in our application we're going to start with a really simple Home Route and an about route and there's two components I need to pull in in order to start setting that up the first one is one called routes the routes component goes as the first child inside the browser router so I'll set up routes here and I think to avoid confusion I'm actually going to stop rendering our app component so we just have the browser router and this empty routes element notice here it has a separate closing tag and that's because inside of routes will need to go a series of new components that is just called route now just in case you don't know a route is just part of your url that specifies where on your website you are so let's say you have a website like example.com example.com would be your home page and oftentimes it has a trailing slash so that route might just be called the slash route but if you wanted to create an about page on example.com you would maybe have a route called slash about and then this part of your url is the route for your site maybe you have a contact page that would be slash contact or maybe you have a Blog Page slash blog now routes can be nested and we're going to cover nested routes later but if you had a Blog you might want to specify that you have another route as part of this URL that leads you to blog article one you hopefully have more interesting titles than that oftentimes blogs will use the title of the blog as this part of the URL although you might see sometimes it's just an ID number where it specifies for the database under the hood which blog ID number it should be looking for currently over here in the mini browser you can see that it says slash index.html and when we're just serving up a single HTML file that might be true but once we set up our routes we're going to just see the route portion of our mini browser it's not going to say something like example.com it's just going to say slash or in our case slash about it'll also say in the app we're building it'll be slash Vans it'll be a Vans route and then we're also going to have Vans slash and then some ID number for the van okay we're getting a little ahead of ourselves we don't have any routes to find so now we have a place to put our routes we need to start using this route component to actually Define our routes and actually we've covered enough material I want to get your hands on the keyboard so we're going to have a quick challenge before we move on before we get too far I want to make sure that you are practicing some of this so you're basically starting from scratch I've actually removed the app component because in this case we're not actually going to render anything to the page yet and I've already included the react router Dom dependency over here so all you need to do is to render our browser router with a routes component inside of it so pause here and work on this challenge okay first things first let's make sure we import the browser router and the routes components from react router Dom again the browser router is a context provider so we are going to wrap everything that we have Below in the browser router and for now we're just going to put one nested child component in there and that's going to be the routes component all of the rest of our work with react router is going to happen inside of this routes component okay hopefully everything has made sense so far we haven't gotten too deep yet so when you're comfortable with what we've done here we'll move on next to creating our route definitions the next component we'll talk about is the route component which we also need to import from react router Dom and this is really where the meat of what you'll be working on will happen it's within these route components the most basic way to use a route component is to render it as a self-closing element here and the route component can take a few different props the most common of which are the two that we're going to learn now and that is path which is where we specify what the path to this route should be remember I mentioned that the Home Route is going to be called just slash well that's what we're talking about here we're talking about the route path if I wanted to create an about page I would make this slash about or a contact page slash contact for now let's create a home page and secondly we need to tell it which react element we want to render if the path in the URL bar matches the path that is defined here on this route component now you'll see that I put a set of curly braces that's because inside the curly braces I need to render some kind of jsx in this case we'll say when the home page is loaded or rather when the path is just a plain old slash we want to render our app component that we have up here now I haven't quite shown you this yet but I want you to see if you can figure out what we need to put here I mentioned that we need to render our app component see if you can read between the lines and figure out what it is that's going to happen inside my curly braces here this is the kind of thing that's fun just to play around if it doesn't work that's completely fine you're not breaking anything that can't be undone so notice that our mini browser is currently at slash see if you can make it so that when you fill in this element and then hit save that your hello react router H1 will show up here on the page pause now and see if you can get that to work one thing you may have tried was to pass a component as a function like this and actually in past versions of react router you actually could do something very similar to that however I did mention that we need to render the app so I'm going to surround it with the angle brackets like we see here okay let's hit save and there we go we are at the slash route and we're rendering the app component when we're at the slash route out of curiosity let's see what happens if I add a slash about here and hit enter okay it sends us to the slash about page but there is no slash about path and so nothing is showing up this seems like a great place for another challenge okay your task is to create an about component just right here underneath our app component and it can render whatever you want I mentioned an H1 that says about page but then I realize that's probably pretty boring so choose whatever you want to render there and then you need to create a new route so that it will render the about component when the path is slash about I've already put it here at slash about so you will know that this worked when you hit save or refresh over here and your H1 or whatever it is you render in your about component is rendered to the page pause now and work on this challenge I'm feeling a little bit boring so I'm not going to be super creative and I'm just going to copy my app component and we'll put this as an about component and we'll just say about page goes here okay maybe we can make it a little more interesting we'll put a little Tada symbol there okay now down here where my route definitions live I'm going to just copy my route this path will be slash about and the element will be the about component getting rendered I'm already at slash about let's hit save and there we go about page goes here and if I get rid of Slash about in the mini browser URL bar and hit enter it sends us back to the home page or maybe more specifically the slash route let's clean this up so we can see a little bit more awesome work now you might have noticed it's quite annoying to have to click up into the URL bar in the mini browser and type out slash about usually that's not how navigating around the website's going to work so in the next lesson we're going to briefly cover another component from react router Dom called link that will help us navigate through our routes in a much easier way okay before moving on I actually want to do a very quick reorganization I didn't just want to do it behind the scenes because I was worried that you might get a little Jarred by me having changed the code so quickly but right now it's I guess a little wonky maybe it's just me but I have this app function or app component that's being rendered as the home page but I have an about component that's being rendered as the about page I feel like I'd rather keep the names a little bit different and then instead of rendering the entire browser router inside of this render method I think what I'm going to do is treat the app like the top level so I'll just render app and that means I'm going to take this entire browser router put it inside of app and then I'll create a separate component just called home that represents the home page then instead of rendering the app as the home page will render the home component that we just made and down here we need to render our app and maybe let's move this onto its own line okay that feels a little better to me let's move on like I mentioned it's a bit annoying to have to go up to our menu bar just to change which route we're in so if I want to go back to the home page I have to hit slash and then if I want to go back to the about page I have to type in slash about we also can see that when I do that the page is actually blinking which means it's refreshing it's doing a complete full page refresh it's not that big of a deal when you only consider about the blink but if you have any kind of state living in your app that needs to be passed to the about page or well really any state at all doing that page refresh is going to completely wipe out any state that you were maintaining if you really think about it a react app is a little bit delicate when it comes to State because if that page refresh happens then all your state just completely disappears unless you're saving it in local storage or something like that it will just completely reset now the way to solve this problem in HTML is to have an anchor tag the problem with an anchor tag is when you click it it will do another page refresh so we need some way to navigate between our different routes within the ecosystem of react router Dom Unfortunately they give us a component to do that and it's called link so I'm going to import the link component capital L link and if you actually look at your Dev tools when you render a link it's just rendering an anchor tag but it's intercepting the path that the anchor is sending you to and making sure it doesn't do that page refresh so you can maintain your state now this isn't the real way that you would do this but to avoid having to put links in both the home and about Pages I'm just going to stick a link element right here and the way that link works is very similar to an anchor tag so it will have an opening and a closing portion to it whatever you put inside is what will be the text that shows up on the page but instead of an href property a link takes a two property and this is actually kind of nice because it reads like English this is a link to the following route and so I'll say equals slash to go to home we'll duplicate that and we'll say it goes to slash about to go to the about route again you aren't going to usually stick your links just inside your browser router like this we're going to see a more robust way to have this navigation element that will appear on every page later but let me hit save it's going to be poorly styled it's just kind of shoved together because they're inline elements but when I click the home button it takes me to the slash route and when I click about it takes me to the about route and if you look closely you'll see that there's no page refresh happening between the two if I were to create some state in my app and pass that as props to my home and about components whatever state I created even if I decided to change it maybe like a counter that I had a button that said incremented and it counted up to 10 when I go back and forth between the about page and the home page both of those will still have that state of 10 as opposed to using an anchor tag or typing into the URL bar because that would refresh the page and refresh my counter State back to zero because it would take quite a bit of code I'm not going to bother actually showing that example hopefully it makes sense if not that's okay the main thing to take away is that if you want to link from one place to another or navigate from one place to another inside your react app using react router you have to use the link element now if I want to style these links I could either give each one of them a class name and select that class name in my CSS or if I need to use the element selector then I can go into my CSS I can say select my nav or maybe if I had some kind of class on my nav then I would put it there but to select the element of the link remember it's rendering an anchor tag so I need to select the anchor so maybe I don't like the underline we would say text decoration none and there goes the underline we are going to be revisiting the links a little bit later in this section but for now this is good enough for us to more easily navigate around our app without having to type into the navigation bar or use these little back buttons and lose our state in the meantime as always feel free to play around with everything we've learned here and when you're ready we'll move forward before we move on we're going to apply what we've learned so far by creating the first two pages of our van life project so your challenge is to do exactly that I do have the react router Dom dependency already installed in this project so you don't have to worry about adding the dependency but you'll see that I have no Imports I'm not using anything with react router yet and so that's going to be your task as a part of that I want to make sure that you also include a navigation bar so that you can at least get to the home page by clicking this van life logo or the about Page by clicking the about route if you want you can add a Vans route but we're not going to be dealing with that quite yet as a part of that you'll notice that both the home page and the about page have the same navigation bar we haven't learned sort of the official way to handle this but I did show you one example in a recent scrim so I wouldn't worry too much about it if you want to copy and paste the code you use for the navbar on the two pages that's totally fine if you find a way to use the same code on both Pages that's fine too we're going to learn learn a more official way to handle that situation in an upcoming lesson now this isn't something I'll say super often but I do trust you to know where your strengths and your weaknesses lie if you do feel like you struggle with CSS then I would encourage you to actually do all of the CSS by yourself it's not an insignificant amount that you would be spending trying to get this designed this way so I just wanted to give you a heads up since I have already designed this on the side we're not going to be spending our time actually thinking through and writing all the CSS I'm just going to copy and paste what I already have but since this isn't school I'm not going to be giving you a grade so if you have a weakness in CSS then practice it exercise it actually do this yourself you can click on either of these screenshots which will take you to the figment design where you can grab all of the spacing and fonts and colors and everything you need however if you do feel pretty confident in CSS and you really are just here for the react then I totally understand if you just want to make a Bare Bones white background black text page that will link you between the home and about page to practice react router specifically and not necessarily to practice the CSS so I'll leave it up to you just do whichever will be best for your own education okay that's enough of an intro pause now and work on this challenge okay let's import some of the things that we already know we are going to need we know we need browser router that's going to be the context provider that will set up everything with router we'll need the routes component and some routes inside using the route component the naming is a little confusing and we're going to need the link component and all of this will come from react route or Dom there's a few different ways that we can set this up let me buy myself some space here we could either put all of our react router stuff here inside of app or we could put all of the react router stuff right here in the render I'm going to prefer that my app act almost like a table of contents for my react router stuff and so I'm going to render the browser router right here in my app we'll create our set of routes and inside there we will have a route we'll have two routes and these are both going to have a path and the second one is going to be about but we'll handle that in a second and then it will be rendering an element and let's have the first one do a home element the second one do an about element this will be slash about and then that is going to lead us to some errors where we don't have a home or about element so let's import those even though they don't exist yet and actually you know what I think I'm going to put all of my pages into a folder called pages so we'll say that I'm importing this from dot slash Pages slash home and about okay that means I'm going to have to create those so we'll create a Pages directory and I'll create a home dot j let's see jsx because I'm going to use jsx in this project and we'll also create an about.jsx okay import react from react hopefully by now this has become kind of second nature just being able to spin up a quick react opponent like this let's do our classic H1 that says home page and then I'm just going to copy this whole thing and put it in the about we'll change this to say about page okay this is good it's now displaying home page here so let's go back to index and I guess let's test to see if we have our different routes so for now because I don't have any links we'll have to type in slash about okay we got to our about page cool now like I mentioned in the challenge I didn't want you to spend too much time looking into how you would include the navigation bar only because there's a sort of this designated real way to do this in react router and we haven't learned about that yet obviously when we have a site with a lot of different pages it's not very maintainable to copy and paste the navigation bar into every one of our Pages if that's the way you solved this challenge of getting the navigation bar up there that's completely okay I specifically mentioned that that could be something that you do but one other thing we could do is before we start rendering our routes I could stick the navigate education bar right here under my browser router above my routes so that's what I'm going to do for now but we'll be learning the real way to do this very soon so let's maybe put this all inside of a header element and that's where we will have our navigation and let's see to be honest I'm not sure if the logo that is clickable and sent you to the home page should be a part of this nav element because it's also kind of serving as the site logo for now I think I'm going to just consider what's on the right here part of the navigation and I'll call this maybe its own link so in the nav I'm not going to use an a tag because that is not how we transition from one page to the next in react router I'm going to use a link element but I need to import this so oh I already did import it okay awesome this one will lead us to the about page I need a two prop that goes to slash about and then as part of the header but not part of this nav we'll say that we have another link this is the one that will say hashtag van life and this is going to send us to the home page or slash okay I'm sure this isn't going to be pretty but let's see if it works that takes us home that takes us to about okay now this is kind of what I was talking about the rest of our efforts would really just be into putting some content on the page and then dealing with CSS however because we're learning about react router I'm not going to spend our precious time making you watch me do CSS so I'm going to snap my fingers and just like that we have a project that is designed now don't be thrown off this is basically what we had before just with a few changes and I'll walk you through them so it's not so disorienting our home page and about page I've really just put in some CSS classes and some content same with the about page over here one thing you can see is that I also added these images I put them inside of a folder called assets and then images so we have the two Heroes on the two pages I have some styles that I plan to use throughout like this button right here I called a link button just because it is actually a link but I wanted it to look like a button and there's a few places where that exists I think over on our home page we also have this one I think right now this might be sending to the slash Vans route yeah but we don't have that yet we're going to get there soon so feel free to poke around the CSS if you'd like it's really just 145 lines on top of what we already had so it's really not too bad so the next thing we're going to start learning about is something called nested routes so once you feel good about what we have here let's move on you know it may not look like much but darn it it is worth sharing so let's talk about continuous deployment using netlify the terminology may sound complex but I promise it's easier than it sounds in this lesson we're going to walk through every step that you'll need to accomplish in order to get your project deployed up on netlify and have an Associated repository on GitHub but once you go through all of these steps as you'll see at the end of this lesson it is dead simple to update your app and have that change automatically deploy to netlify so the idea behind continuous deployment is that as you make changes to your code you will push those changes to GitHub which is an online place to hold your code and when you push something to GitHub it will automatically deploy to netlify and netlify being a web host makes it so that people around the world can access your website from their browser in the end the idea is we will be able to have an actual URL that you could send to a friend family member or post in a tweet and that person could go see the actual site that you have built in deploy again this will happen in three easy steps first we're going to push our project up to GitHub then we're going to tell netlify which GitHub repository we want it to deploy and it will automatically watch for changes to that repository and the truth is it's only two steps then you're done now there's a few things we need to take care of before we begin and actually I'm going to walk us through creating a netlify account so in reality you just need to make sure that you have a GitHub account and that you install GitHub desktop there's a bunch of different ways to use git and GitHub of course I've found that for somebody first learning git and GitHub it's easiest just to use GitHub desktop if you are already familiar with using git then you don't have to do that at all you can use command line git or whatever method you feel like using so before moving on ensure that you have a GitHub account make sure that you have GitHub desktop installed or you are already familiar with how you're going to push your code up to GitHub so for creating a netify account you can click netlify account here and that will take you to the account page or you can even click this logo here and you'll go through the steps of setting up an account just like you would anywhere else it'll ask for your email and password you can hit sign up that should send you a verification email you'll go and you'll click that link clicking that link will take you to a sort of getting started page for me I chose that this would be primarily used as a personal account and I identified myself as a hobby developer I don't think it matters much what you say your first project will be I just put a personal portfolio site and for naming your team because this is a completely personal account I just put my own first name as my team name then I hit setup and continue we get to this page for now I'm going to skip this step because we're going to come back to this later that said if you're already familiar with Git and GitHub and you've already pushed your code to GitHub then you can skip the next number of slides and at this point just say that you're going to import an existing project for the sake of completeness I'm going to go through those steps and just skip this part for now so that brings us over to GitHub desktop I'm going to open GitHub desktop and in the upper left I see a drop down for adding a new repository and I'm going to create a new repository clicking create new repository will bring up a modal I can give it a repository name everything else I'm just going to leave the same and for now I'm going to put it on my desktop but I would recommend organizing it somewhere that you actually want to keep it then click create repository that will bring you to the main page for your repository that you just created and next we need to actually put some files inside of this folder now depending on how you're following along this next step will look a little bit different for you I'm going to show you how you could do it directly from scrimba in the current scrimba interface there's a little gear icon in the lower right that you can click and choose download as zip and in fact you can do that right from the scrim here it basically has everything that we just saw where we left off in the last lesson do be aware that in the future as the scrimp interface changes the location for this option to download the project as a zip may change so just search around until you can find the option to download this project as a zip now that will create a zip file you'll have to unzip it which will have a folder with your project files in it and because we've already created a new folder that is a git repository I've found that the simplest thing is just to take all of the files from the project that we just downloaded from scrimba and drag them over to the new folder that we just created with GitHub desktop then you can take that van life folder and open it in vs code now this next step is going to be pretty important we haven't yet run an npm install on this project as you can see we don't have a folder called node modules but it's pretty imperative that we don't commit our node modules along with a few other things that are really good to never commit to your GitHub repository so I would highly recommend at this point immediately before doing anything else to create a DOT get ignore file in this file each line will contain a folder or a file or some kind of naming structure that you are telling Git You don't want to ever include in any commits that you make if that doesn't make a lot of sense that's okay just know that it's important to have a DOT git ignore file and to include at least a few basic items now if you were just following along and you downloaded this project I did create a DOT get ignore file already mostly so that anybody who isn't downloading this can actually come in here and copy the items that I have listed here and paste them into your dot get ignore file that you just created I also made this a little bit larger so it's a bit easier to see now that we've made a change to our project we can go over to GitHub desktop and we will see that it is already tracking the changes that we've made including dragging all those new files over and creating a new git ignore file manually so let's go ahead and commit these changes we can do that by adding a summary down here in the lower left I'm just saying adding files and git ignore and then I can say I want to commit these changes to the main branch so I can click that button and after a few seconds that will be done if you're relatively new to git and GitHub it might be important to note at this point that you have only committed to your local git repository but you have not yet pushed anything up to your online GitHub account so that's what this published repository button is for we'll go ahead and click this at this time we'll get a modal here it should already have a name filled out you don't necessarily need to change anything else unless you feel like adding a description or making this a private repository and you can click publish repository and once that is done it will send us back here to the GitHub desktop dashboard at this point you can click the button to view on GitHub which will show you that your code is now live online the stock readme that we get from scrimpa is a little bit ugly but that's okay for now okay now that our project is live up on GitHub we are primed to go back to netlify and sync up our repository with our netlify account so back on netlify we are greeted with this dashboard page and we can click this button down here that says we want to import an existing project from git when you click that button it will ask you to connect your git provider in our case we're using GitHub so I'll click the GitHub link which will send me to an oauth page where I can authorize netlify to access information on my GitHub page and when I do that I'll have the ability to search through my entire list of repositories I've here searched for Van Dash life that pulled up my new van life repository so I'll select that repository doing that netlify will try to figure out the best way that it can deploy this project and it usually does a pretty good job so for me I was able to keep all of the stock options here exactly the way that they were the most important thing is that we run npm run build as the build command and that the publish directory is dist unless you have gone out of your way to change the Veet config settings for the package.json so that this is different so this is what popped up for me I'm just going to keep it that way and hit deploy site doing that sends me back to a dashboard page for this specific site and we can see that it says it's building a new production build after a pretty short wait we'll see that board building change to published and at this point it's just chosen a random URL which is going to be good enough for us for now that we can click on and see our site live on the web super cool now oops it does look like we have a little bit of an issue here on scrimba of course we pretty much develop everything as a mobile style but even when I turn on the mobile view in my developer tools we can see that the styles are not really looking like a mobile styled site to be honest this is something I almost always forget to include when I'm spinning up a new project completely from scratch and that is to include this line of code which is a viewport meta tag so the reason I'm showing you this process is not because I actually forgot to do this but because because I want to show you how once you have deployed your site live you can make changes and update the live version really really easily this is where the benefits of having continuous deployment setup really shine now if you are actually following along and you want to add this line of code you can actually click this screenshot it will take you to a page on mdn which has a quick way to copy this line of code and you can paste it into your index.html page right below the start of the head tag like I did here now once I paste this in we can go back to GitHub desktop and see that it is tracking some changes here I think my formatter might have changed the way that things were lining up which is why it's showing a little bit more green than what we actually added and just like before I can add a little summary up here if I want I can also add a description and hit commit to main again this is only committing to my local repository and doesn't automatically make changes to my GitHub repository in order to do that I do need to remember to push these changes this commit up to my origin which is the Repository that lives on GitHub and from GitHub desktop I can do that by just clicking push origin then without doing anything else I can go over to netlify and see that it has noticed a new commit to my main branch on my GitHub repository and so it starts rebuilding my site and after a few seconds again it will have a new published site that includes my changes awesome so again the process for updating the deployed site in just three easy steps one we change our code to we commit and push those changes to GitHub again it's just two steps that's how simple it is now that you have a live site that you could share with family and friends I'd recommend jumping in both feet with the build in public mentality if you have a Twitter account you can cli