The Best Way to Host & Deploy a React Application

did you build an amazing react application but you have trouble making it accessible from the web or maybe you find the deployment process to be tedious in any case this video is for you i'll show you two different easy fast and efficient ways to deploy your react apps the first way takes less than 30 seconds which is crazy and the second one includes continuous updates to your deployed app through github that approach isn't going to take more than a few minutes as well stay tuned [Music] other youtube channels will just tell you how to deploy the app and quickly demo the process i on the other hand want you to learn how to replicate this process by yourself on your own apps that's why we're going to create a new react application where you will be able to follow along 100 of the way to start off let's create a new empty folder we can name it something like react underscore app great now you can open your visual studio code or any editor of choice and simply drag and drop your empty folder just like this once you're inside of here you can hover your mouse to the top of the screen go to view and then terminal that's going to open the integrated visual studio code terminal and then in there we'll be able to initialize our react application to do that you can simply type mpx create react app dot slash this is going to initialize an empty react application in the current directory this is going to take some time so feel free to pause this video let this run on your device and we'll be right back and that's it our demo react application has been initialized and you simply need to run npm start to start the application let's see how does it look like in the browser and there we go this is the react demo application it just has the rotating react logo and some text so let's go to src app.js to edit it you can go into the src app.js and right in here i'm going to delete all the text below the image and say something like deployment is happening here something like that just so we know that we changed it and that this is the app that we want to deploy let's head back in the browser to see if this change appeared there and there we go deployment is happening so the main goal of this video is to take this project from the local host 3000 that only we can see to the internet so you can share it with your friends potential employers really anyone as mentioned before we're going to use netlify for our deployment as you can see on the top right the only thing you have to do is create a free account so go ahead and click sign up or click login if you already have one once you're logged in you should be able to see something that looks like this as you can see i have a lot of deployed apps right there for you this list might be empty in any case the thing that we need right now is this empty box it says want to deploy a new site without connecting to get drag and drop your site folder here so let's do that you can head back to visual studio code open the terminal and right there we're going to stop the application from running by pressing ctrl c after you do that we can now build our react application and you can do that by typing mpm run build this is going to create a built version of react that we can freely deploy on the web while react is doing its thing go under this video and leave a comment saying what websites did you use for the deployment so far was it github pages netlify heroku or something else and explain your choice most likely you're going to start using netlify from now on once this is done running you should be able to see the build folder right here if you don't see it initially just click this refresh explorer button but there it is now click reveal in finder or open in file explorer on windows and then simply drag and drop it into that window there we have it i just opened the react application on the right side and the only thing i have to do is drag and drop this build folder in here that is it after a few seconds shouldn't take more than half a minute oh there we go it's already done as i was speaking the application is deployed on the web it was given some random url but there it is now this is a real url you can share with people and they will be able to access this page you can see this page is pretty simple right but this process works for absolutely any front-end react application it is that simple and that is it the app is live in less than 30 seconds but now let me show you the second way of deploying your apps which is going to give you more functionality one problem with the current approach is that if we change something in our code like if i remove this word right there and if we save it the changes are not going to be reflected on the deployed version and that makes sense because we ran the build before the changes were applied now how do we deploy our applications so that all the changes are reflected on the deployed site each time that we push this to the github to do that we have to add this project to a github repository so let's open our browser and feel free to head to github.com there you can log in and on the top right of your screen you should see a plus icon there you can click new repository in here i'm going to say deployment demo just like that you can give it any repository name and now we're going to make this public and create a repository once you do that you'll be given instructions on how to add your existing code to this github repository i'm going to pull this side by side with my code just like this and then there we'll be able to copy and paste all the commands so in here i'm going to open my terminal and let's collapse this make this just a bit smaller and there we have it we can use these commands to initialize a git repository first thing we have to do get init then we have to do git add dot this is going to add all the files then let's do something like git commit and then m first commit just like so it is dash m and then you need to put this in quotes make sure to do that then we do get branch dash m and then main github recently added that they changed their master branch to main branch and then you can copy this whole line git remote add origin simply copy and paste it right here after you do that press enter and then the last step is to copy this line and simply paste it and click enter that is going to push our new react application right in here and in a matter of moments you should be able to refresh this site and then see the code of your project there we have it that's it this is our react application now how do we take that and deploy it to netlify now that that is done we can head back to our netlify page if you're logged in you should be able to see all your pages this is the one we deployed previously and as you can see here it says manual deploys so we have to do continuous github deployment for that we're not going to do this not going to drag and drop your site here rather you're going to scroll to the top and press new site from git after you do that it's going to ask you to connect with your account so just type github it's going to ask you to authorize and then you can search for your specific repository amongst all of your github repositories and just click right there after you do that all of these options are just fine the only thing you have to do is click deploy site and there we go that should be it this deployment is going to take just a bit more because right now netlify is also building all of your files remember we did that manually previously so let's wait just a bit and we should be able to see our site and there you have it the app is now live as you can see deployment is happening now let's try making a change to this text and see if it is reflected on the live site let's go back to our visual studio code and then in here let's change this text to something like breaking changes just like that we want to see if this text is going to be reflected in the live site now in the terminal the only thing you have to do is push the changes to github to do that do git add dot git commit and then in here we're going to type something like changes not all that meaningful and now you have to do git push that is it in no time you should be able to see your changes reflect in your netlify website as you can see on your netlify page right here it says building and there we have it it's published as i was speaking so now if you go back to your link refresh you should be able to see breaking changes before we finish the video here's one extra tip for you you can also change the url of your deployed website to do that you simply have to go in here to domain settings and now you have to change this to a custom domain you can go options and then edit site name in here let's change this to something like demo deployment react just like that save it and now the site is going to be deployed right there you can also add a custom domain but you would have to buy it for that so now if you go to site overview and go to demo deployment react we should be able to see our site and that was it if you liked the video feel free to leave a like if you didn't leave a dislike subscribe for more and more importantly join our mailing list to stay up to date with newest trends in javascript and react world link is in the description stay safe and see you in the next video [Laughter] [Music] you

Channel: JavaScript Mastery

Views: 69,071

Keywords: netlify, netlify tutorial, react netlify, react netlify deploy, react deployment, react deployment netlify, deploy react app, deploy react app to netlify, deploy react application on netlify, how to deploy a react app, how to deploy a react website, how to deploy a react app to netlify, deploy a react app, deploy a react app to netlify, how to host a react website, deploy your react app, react app deployment, react hosting, react app hosting, hosting react app on netlify

Id: Ey_90l9GaAw

Length: 10min 59sec (659 seconds)

Published: Thu Oct 22 2020