Host Your React Website on Netlify for Free

Hello What's up guy, today in this video we will see how to host your react application for free in tiff. Yes guy, so this react application of ours which you are seeing is so awesome, we have made the latest version of 19 re router and the latest version is 6.4. With the help of this we created this in which we have this a movies and if we click on it then we get the individual data of that person. To get this guys we used all the latest technology which I guess you have not seen till now. So please check out this playlist completely, you will become a master. Okay, now the website you have created is on your computer screen, but if you want to share it with your friends in the world, you will have to host it live. So yesterday I told you how you can host it in a paid server, using hosting, definitely check out this video once because hosting it in your own server means all the power in your hands, but when you talk about You can host for free but you will not get all the power, so let's go with a Netlify. So guys, we are going to host our website in Netlify and now we start the video without any delay. First let it be any React application whether you are using mine or whether you are watching the video to host your website now the number one step is to guys build your website okay the first step is to know how to build your website. I will tell you that but before that I would like to tell you a small thing and that is guys, when I created this website in our react application and when we were hosting this movie, I did not have any problem while hosting paid hosting. Came in yesterday's video and here also I am able to run it very easily but when I went to host in netlify you can see I got an error here okay I will tell you if I run here if I go to the movies If it runs on pe then the page you are looking does not exist it is telling ok the reason behind it is this and that is if it is somewhere then here on pe na this problem is visible see what is that problem that problem is that your Whatever API is there, it should be secure. This is an important rule in Netlify. If you are using any API then do not look at it. HTTP means it is not secured, so here it is necessary to put an 'S', so that's all I want to say. This is very important and very important, rest of your API key is also here, you have to keep that in mind as well, but now the very first step is to build your react application, so control and then I select it in this way. Also first of all I am clearing so I am doing make share that I see first of all we have our main project which is our main folder on which we are working on our react application, you have to come there and what we are working on. That was the development, now we have to make it production ready so that it can be hosted, for that you have to write npm run and then build and hit enter. Simple, ok, okay, so you can see this is it, this is my build, now if I If I go here, see the moment. Earlier, if you had used Create React App or whatever, then a build folder was created for you, but now after using it, instead of getting build folder, we are getting disk folder. You can see that this is your disk. There is a folder inside it, we have these assets, we have this html5 and these are my images, just keep this in mind, no matter what framework or library you create a website through, but when you host it live, it will go to your index. Meaning, it is in HTML4 only, it is in CSS format because the browser does not understand this reactive sub-all. Okay, so this is the disk folder, now select this folder, whether it is your paid server, whether it is your free server or it is your Git Hub. Whatever it is, you just have to share this dist folder everywhere, okay, my work is done, one important notice tip, let me tell you, many of you probably have no idea on which folder you are working. You are doing okay, so if you want to find out the name of that folder, then you need to right explorer and then dot and then hit enter. So the moment you did this you can see that you have got your complete root, now how easy it is. Okay, I am coding inside the A drive, this particular folder inside the coding, inside that is our dist, so this is the dist folder, now I need it, okay, so alright, my part is over here, my part is over, now I will come. It's fine on my Netlify so this is what your Netlify home page looks like if it is not visible it's fine because you have never hosted a website but I have hosted too many here so let me tell you in a simple way There are all the options out of which one of the simple options is We Have This Add New Site If You Can See We Have This Add New Site And in this total we have three options out of which Deploy Manually is a child option in which you just have to click Which was that disk folder, you have to paste it by dragging and dropping it there yourself, so I am gonna click on this particular deploy manually button and this is it, so this is the interface that you are seeing, you do not have to do anything, just click on it, okay. Look at this in the center, now I am already on the same folder, it is okay because I have already hosted it here, so this is what you make sure, yes guys, this is very important, this is the particular disk folder that you can see in so many folders. This is the disk folder that is visible, guys, you just have to select it, okay, so I have selected it, I am here now, no, you guys are not able to see the button, but let me show you something at the end. In this method we get two buttons, out of which this is the upload button, you have to click on it, so I clicked on it, at the moment it is behind me, behind my image, so you get the option of this method, upload six files. Okay, I clicked on upload, so I clicked on upload, so guys, I guess, if I count, five, four, three, two, and oh, my God, it is already completed, there is no cut or cut anywhere in the video. Just click on the 'And I guess preview' or 'Here we have this preview' button, then simply click on it, now you can see how your website 'Bam Guys' has gone live, how did you like it? A like is made on this matter, guys, a like is made because I too may not know but you came to know but there will be a problem, okay look, I did not even create an about page, the contact is all correct, movies oh my God o My but guys I can't believe that I am getting my data here but still I would like to tell you one thing which is very important it may be possible because I have already hosted the same website three-four times in different ways I was finding out one thing, I would like to tell you that here we are using nav file, you can see that I have kept the API key secure, using nav file is okay, so for the first time, if you do. This is your page not loading or this is the error you are going to get, it can come in this way also but you have to make sure guys, if your page is not loading then what do you have to do, stay back there, just on the On the left hand side we have some menus out of which this is the site configuration you are seeing just click on it the moment you click then again on the left hand side you can see over there we have This environment variable, this is your Navi variable, so you click on it, the moment you click on it. On the right hand side we have this add variable button and the moment you click on it, then again we are getting to. Options out of which, either import the entire file or write a single variable yourself, so we have a single, okay, so here you need to type its name and over here you need to type the value, so I go here, my env. You can see the file is my its a name and over here I will copy and I paste here and I create variable this is it guys that's it this is very important and many people come here stuck if they created env variable If it happens, then in what way should you host it for free, then how should you add it? In this case, if it would have worked without adding it, then it would be icing on the cake. Then what is the tension. If in this case, it does not work, then you can achieve your development in this way. There is a variable, you can add like to it, that's it, your work is finished, okay, so one second or I guess, this is what the movies are, watch it, the loading is also perfect, and you know, to create this, a complete version of the video. You have used all the loader form access of 6.4, that means you will enjoy, here you have the complete dynamic route, everything, see is it ok or guys, I think my work is done or this is it, so guys, what is the source code of this. I will provide it to you absolutely free in the description and comment section below, it was free, obviously it must be coming in your mind that if I could change its name because it is a very poor name, whatever Red Unicorn is, all that, so guys, what can you do? You can again set confine, you have to come over here we have this option to change the site name so we can click on it and then here you write your name na react a router react router let me check it out oh my god name Already present react router, I do only 64, I do one thing, I don't want to delay, no one would have ever taken this, my work is done, so now you see, how cute it looks too, hari rera. .in life.com I mean, the only disadvantage is that you don't have your own domain, but if you do it through your own server, then guys, everything gets done, okay, guys, this is yesterday's video. Do check it out. I have added a special coupon for you. 10% discount on Hostinger. Do check it out. How did you like today's video? Let me know in the comment section. And if you have hosted, then share the link in the description below. Whatever I liked, I will definitely give a thumbs up or recommend. So guys, don't forget to check out this playlist. There is a final mega project yet to come, so I do n't want you to miss those awesome videos, so please like the video. If you have not yet subscribed the channel, please share it with your friends, I will meet you next time till then guys, thank you so much take care.