Deploy Production React App to Netlify (Github and CI/CD)

Key Takeaways

hi everyone in this video we're going to learn about netlifly and everything that you need to know to deploy your reacts application from localhost into netlifeby server everything concerning ci cd um not continuous integration and continuous depth deployments we're going to use github we're going to use the network cli we're going to build and create like a new configuration for that we find we're going to understand those configs and of course we're going to use some environment variables and we're going to use the super powers that the netflix cli is going to basically provide us to interact with our network hosting as you were our own vps hosting so we're going to all cover it in this particular video and for the basic websites or the whole application gonna deploy in the react application screw see this one uses react typescript webpack and everything um for this this is actually being deployed to uh basically to run on the servicing website so if i take a look so this is the define here if i go to the deployed version this one is localhost if you deployed version that's basically the same that still works and everything works in here so if you do like specialized login you can log in sign up the other login browsing services they keep looking on services and this is all running on network files creation here on the domain name in here and it's being linked out into an external api and it works flawlessly we're gonna also have this and it's like learn how to you know push to github and link it with network using this cli and everything and it's all gonna work absolutely fine so hope you guys enjoy this one and without further ado let's go ahead and get started [Music] so let's go ahead and get started and first let's know for for those of you who doesn't know what netflix is so nail file is basically just a cloud hosting but it's a kind of a special cloud hosting because they are like the regular cloud hosting which provides you with something like a vps then you have to go ahead and manage that particular vps by yourself but when it comes to netfly it's pretty much like pre-managed for you it just gives you like super powers like ci cicd and pretty much like continuous integration and continuous deployments which is pretty great and it works really really well with like bitbucket github and it allows you just like to push the code and it's gonna redeploy and everything and this is all gonna happen for free so you get a free tire tryer uh to basically go ahead and try neglify try it with your website if it works with you you can of course later on upgrade to that to the build or professional uh version of that sort of plan so you can get the full feature set but the pro the point in here why not find is so popular because it's super fast i've been working with this like i mean more than three years now deploying my website deploying production websites and it's been doing absolutely great the configuration is so good it has a really really nice and clean documentation so if you ever get stuck on something you can easily find it out by just looking at the documentation of their website uh just using the search bar you can easily find what you're actually pretty much looking for so another line here is pretty great so this is the website for is it supports basically any language and we're going to be using it with react.js for today and the reason they see why you need nettlefly is basically going to just like unify everything for you in a single platform so you can just like set up a github actions with it which is going to be done automatically by notify and whenever you push a new change to the devmaster or the master branch all that's going to happen is basically it's going to rebuild automatically as soon as you push that it's going to redeploy so you won't actually wait a lot and of course you got like full configuration so it's gonna like do the whole rebuild you won't worry about servers or like what is the server running the linux district this trails or any kind of stuff you won't worry about any of these you just need to go ahead and set up a network and you're good to go and with react applications it works so so flawlessly and it's pretty great you can do like query react up or even a custom webpack react application you can do it it supports csr client-side rendering which we're going to be like like doing in this particular video or it supports ssr which i will hopefully just cover up in another video it supports like next.js or gatsby for static site generators and this kind of stuff so i'm going to start with my like you know logging in and everything so you need to go and sign up and to get an account i already did that so this is this is what it looks like for dashboard so you're gonna have like a team then you get all the settings in here like the sites and the builds and everything for now i have no signs and they give you like a free 300 minutes to build and a bandwidth of 100 gigs you can of course upgrade to get um you know a better plan and here you can professionally use it and also we're going to need a github profile here just to create a repository and push the code into so for the projects we're going to be like building or deploying internet fly is actually this react project so this is a called uh servicing so this is actually just the front end because the front right now is actually running on react i got the back end server running on a completely separate server not on netlifly or not like a vps and this api server is actually for providing the functionality and the api to basically make this servicing front-end react application to bind into that whenever we deploy this react application whenever we deploy the front end into netlifly so that's what i'm going to be doing and here basically i already run that i run this in development just to test it out so if i take a look on my google chrome here um localhost 3000 so this is the website we're going to be doing this this is a full website just for services uh for people to offer custom services and other people can basically purchase or buy these kind of services uh per hour for example there's actually a car printer in here you get into it it just takes you to a multi page so it works with that it works with the api currently uh the api is hosted i said before completely separately from that um for for particularly this one it works really well uh you can do sign up login like specialist login and everything it works so if i try to do this uh right here i think i can do uh mail and i can i can basically use a my password here and access so this is the dashboard of of how basically you can use that as clearly this is especially best dashboard especially it's basically a guy who can offer services uh so this is the services that he is basically offering so if you take a look and uh the dashboard security your services you get two services and you've got uh you can update this kind of services and and do this kind of stuff so it works really well uh so that's gonna be trying to do is i'm gonna take this particular project this react application and deploy it into another file and we can you know later on when we finish double check if the website still works absolutely fine with the api or not and of course we can go through all the deployment step and see how it goes so basically before getting started with anything you first need to actually create a new github repository and push your code into this so while doing this particular step because as i said before netflix is going to use github so whenever a new change is pushed to your github repositories it's going to trigger the deployment and it's going to act like github is the full or the main source of truth for your code and basically for deployments so else i'm going to try to do in here on github so i'm going to just go into my repositories in here i'm going to creating a new repository and we're basically um good to go so i'm gonna name this like servicing network fly all right so servicing front end uh i can name this reacts up that the fly i'm going to make sure that this is a public you can choose private of course and you're good to go so i'm going to create a new processor over this it's going to be an empty repository so i'm going to make sure i'm going to copy that whole thing in here the you know the basically the repository url to do that and you're good to go so you can use the https or ssh if you're having a private repository i would rather use ssh because it's much better but if you're having like a you know a public repulsor you can just use https in here okay i'm gonna go with ssh otherwise i'm gonna first gonna do like get remote i'm gonna add i'm gonna add like a remote thing so i'm gonna add origin or uh let's go ahead and say github network so this is the origin name and here i'm going to give it the url so for this if i do remote dash view i got two in here so this is the one i'm going to be using for negative flying this one is is completely dependent so you can completely ignore that but for github network so this is the ones i am going to be using for pushing and everything now to get started of course you need to go ahead and add all your pass stories and get and you can of course commit so i can add a simple commits uh like initial release or something and that should be committed you can just gonna run get status no you know working tree is clean no changes in here on the on the source control vs code or everything everything is pretty great now we're good to go what you simply need to do is go ahead and do like push then you choose the origin name which is github alify and you choose like the you know the branch name here we have master so if you have a different brush name but mainly how nitify works it triggers your listings for web hooks on the master branch of course you can change that on the netify settings by default it listings for on the master branch so i'm going to do git push in here now it's going to ask me about my you know ssh key and everything and it's going to have like okay so i can't i can't do that because i have a different ssh key so that's pretty great so now you learn that this this kind of stuff happens i'm going to go ahead and do this again i'm going to do remote and i am going to do updates or basically sets i think um i think network and i'm gonna change the url so i'm gonna i'm gonna use git remote set url and it's gonna be github network and i'm gonna choose or put the new around now if i do remote dash v to view that there you go we got the new https things okay now the last thing is github or push to github network and um you're going to basically choose that get another fly i'm going to choose master branch click enter and this will do the push for us it's going to like you know take everything to the next step and it's going to push everything into our github web page or basically our github repository so we can use it for deployment so to get started with netflix there's actually two ways there's actually the regular way you can just go through github and link your github through the ui of course through the netify ui and you can you can do that so for example if i go back here to 95 i can do a new site from get and it can choose github in here it's going to authenticate me into my github account basically and it's going to allow me to basically choose a repository to add to that you'll find here it's going to like access or basically link both of these repositories so whenever an action like this happens or something um this will work perfectly so whenever you push and you change the devmaster or the the master branch on github it's gonna automatically just trigger deployments on that you'll find it's gonna like update this uh sap so you can do it this way but the preferred way is actually and the more robust and kind of you know the nerdy way that as us developers we love to interact with is actually using the netly fly cli so i'm going to try to do that real quick in here and i'm going to open up a new terminal i'm going to go ahead and do an install this i'm going to use npm install g and make sure to install this cli globally because you can be using this cli across multiple projects you don't want to just like save it on the local project and i can do uh for like neglify dash cli you click install and you're basically good to go so this this should be pretty good for you you can go and install this i already did install this so it got here after installation is finished you can just you know type in the flying you're going to get this help message in here you can read about the version and everything going on behind the scenes about nullify so this is actually the type of commands that you can run and you can manage your whole network thing but to get started we need to first run this init command in here to basically create a login or authenticate our client here with our netlify account and you know create the binding and authenticate with github so we can have full control of our netify accounts and deployments builds uh add-ons plugins and all this kind of stuff through the cli itself so for that we need to go ahead and first do this and netly fly init so just type in this you're going to have this it's going to take you redirect you to your basically your netifly account here on your browser and it's going to tell your application if i say cli is asking for permission to access the network on your behalf so are you ready to do that yeah or not so you can you can basically choose that and you can just go in and authorize this uh now you've rendered this you know if i can access all this kind of stuff i need to go back and it's going to just ask you a couple of questions to get you started so now that notify is actually authenticated with our network fly accounts um you can go and do connect this directory to an existing netfly site of course we don't have any existing sites so i'm gonna choose the second one to create and configure a new size so i'm gonna choose this particular one and now it's gonna ask me what is the team this theme is basically your native flight team in here for me i already have like a single team so if you have like you create another team you can choose between both of these so i'm going to choose this by default and now it's going to give me what is my website name and the website name is very very important because it's going to like give you this dotnetly fly domain name unless you basically buy into a separate domain and just like link it up but if you go with a free tire you can just go ahead and use it this way as i'm doing right here so for that i'm going to just do like servicing i'm going to choose this this particular name so it's going to be servicing.nilofly.com i'm going to choose this name um so already exist okay so i'm going to do servicing up i don't need to fly the up okay maybe yeah that's good now size is created so that's the admin url um that's the one of the slides so servicing dashop.netflight.up and now the actual cli needs access to my github account to configure webhooks and what i mean by web hooks is basically like it triggers like an action and this is just like a connection or an establishment between github itself and your netify accounts so when you actually link both of these repositories what happens is whenever you push a new change like a new commit to the repository web hooks was going to act is going to like do a notification and send this notification to a web hook url of netifly and another file from there is going to take it oh there is a new commit push to this repository i need to trigger a new deployment as part of this like latest change and that's what nail file is going to basically do uh per using this web hook so now we need to authorize github with network in order to just make that possible basically so i'm gonna do personal make sure to choose the first one so you need to go ahead through the the i would rather go through the browser just the second one is going to allow you to you know grab the custom access token from your personal github account and paste it here which isn't really great so choose this one another one is going to take you to another pop-up and now it's going to ask you to you know choose one to go ahead and get started with forever else i'm going to use github and here it's going to start like looking for your github now exclusive you're now logged into an l5ci your github credentials please close this window so we're basically ready to get this window now it's going to ask you what is your build command basically for this now you can of course change any build command but for us if i take a look on the pack.json uh let me collapse this real quick now there's actually a bunch of scripts but the script that is responsible for building if you're using this with query x app you're going to probably just build it uh find it as build as i'm having it right here so my script is build and you can just run it right over here i'm going to use yarn because they have yarn.lock in here but if you have like package dashlock.json uh which is which is this one which i i don't know why it does exist i'm going to really get rid of this because i personally love to use yarn and i love to use yarn.lock so that's why i'm going to use yarn to basically run the build and installation and everything so for that i'm going to just like do this particular command my command is yarn run build so that's my command um so the directory to basically deploy what is the directory that we want to deploy the directory is actually the build directory that i want to deploy for us it is called build which has the whole bundles that are built it has the index.html has all the css stuff it's basically the final bundle when you run the build command right here this particular folder is going to be created for you in this particular folder is going to be like you know bundled and created and everything so i'm going to just go ahead and choose this one so the the build command is is called build okay so make sure to put that sometimes you're going to find it as this so choose just basically what is like perfect for you uh choose build now if you're using that fly functions which is lambda functions and aws lambda functions which we are not just i'm going to leave this by default and here there's like no netlife.tamil and this one is actually a netflix configuration file so there's no file in here i would love to create this so please go ahead and create me this i'm going to put yes and now it's going to deploy key added it's gonna create a netify thing and you're basically good to go now whenever you get push and everything this actually is gonna be working and it's gonna it's gonna work absolutely fine so you're gonna have everything uh working absolutely fine so that's pretty sweet that's pretty good uh we are we're basically good to go for this particular step now after creating the net of light you know configuration and initialization and you deploy your website and you basically initialize with the github repository if you go back to your netify dashboard you're going to basically find you know information about the deployment you're going to find a new song has been added to your basically your dashboard if you click on this and go to take a look on it has you know get like sun has not been deployed yet so now this is this is a site and it's being deployed right now so right now uh the deployment is actually happening so it's being like fetching packages he uses some urine stuff to do that particularly thing and it's going to be like using all of this kind of stuff so for this to basically work since we already put yarn there's one thing that we need to put which is like a yarn environment so most of the things in here because they already added to my env thing but you need to specifically tell nellyfly that oh we're not going to be using npm for deployment or installation or anything like that we're going to be using yarn as stand so for doing this particular thing is we need to use the netflix cli if you go to the netflix cli help you're going to find this env which is on beta right now that can control the environment variables now if i do again nullify enva due list the list command basically in here and it's going to like an environment variable sets for servicing up so for this we need to go ahead and set this particular environment variable so what we can do is actually netly fly env and we can just like for example say set so i think i think if we take a look on the mv thing uh the helper thank you there's this set and you give it the variable name and the value so that's going to be to win so let's fly env again set and for the name of that there's actually a specific network environment variable you need to tell it to specifically use yarn instead of npm so this is called netlify use yarn and make sure to send this to true so a key value pair click enter and this should set you the new environment variable now if you take a look on that if you do it netlify environment list and it's going to basically give you you know the list of the environments and everything so there's like netflix use yarn and it's being set to true okay somebody sweet now we got the environment now if we go back to the deployments go back to our website we're going to find that is you know it works perfectly because sometimes it fails when you try to use npm instead of yarn but for now so it's clearly a 92 percent chunk asset optimization so that is working it's building it's running the webpack build basically so you can just do fix that so it always sticks on the you know down in here so you're always going to take a look on the log and one thing i really really enjoy about netflix basically gives you this full log that you can clearly tell what is going on and it's so so good i love it when it just basically gives you the log and everything so you can easily uh find it out and it's very very interactive so you need to just do a a couple of seconds before the build actually takes on and it has finished now so netflix built complete so we're good to go if you go up you're gonna find you know a summary of the build it's gonna tell you oh there's new two files uploaded like the assets change uh there's no redirect rules processed i'm going to come to this point a little bit later on there's no hitterish rules processed and the build time took four minutes and of course you got like uh you know a thirst hold on a bandwidth of build time that you can't pass per month and of course you can upgrade the plan to get more build minutes per month but that should be good it won't be any any problem for you uh to worry about if you're using you know the free plan just to play around with this okay now if you're going to preview the deploy it's going to take us to our website to preview if that is basically working now just servicing dash app95.up boom there you go we got our website live and it's basically working so it's cruising here it works as good as as it possibly could be it is being deployed and everything they can just you know do that specialist login you can go here you can go there uh there's the login thing in here works so it's basically working absolutely fine without any issues or something so that's that's pretty sweet now if you're using create react app which basically uses the push state api to trigger web pages now for me right now actually when i when i go to another page it works absolutely flawlessly without any problems and but for sometimes it doesn't work so sometimes when you use like the react router which most of us does and we like use it with a query react app or something you're going to have a huge problem not you know going we're having a multi-page setup in here to work with netify so the actual kind of fix for this is actually to go ahead and configure this to tell it specifically that oh i'm using the push state api so always redirect anything that comes after the url to the index.html right here and it should work for you so for that to happen i need to go ahead and comment this creation here in common to use for the react redirect single page applications like query laptop which which is basically our same thing in here we have in here uh so that should be the thing that we need to do okay so i need to remove this that and we are basically um so good to go in here so if you need just like to push that i need to put that down a little bit and that should be good to go now after doing this change all you've got to need to go ahead and do is basically let me go ahead and have this i can go and do git add so just like submit this and commit the new changes and of course push it to your github repository so uh updates identify redirect rules so this is what the right direct or redirects rules of neglify to tell it to use that so we can use multi-page setup now last thing is actually go ahead and push this to get up now fly and push to the master branch okay so it should be quick we got that working if you take a look in our application in here we should have a new change and if you go back to the network dashboard there you go so there's a new production thing from master and it's actually being built in now the website what i love about netflix particularly is actually it doesn't take you off your website while there's actually a new build on the way it just basically keeps serving the old build so right now this current you know the previous production bill that went successfully is currently live so that's what our users or our clients are basically viewing and there is actually a new build that is being built behind the scenes which any no clients or anything like that knows about that so that's that's pretty sweet so that's what's happening behind the scenes in here and as soon as this one finishes the load balancers of netlify which i'm pretty sure it uses aws it's going to take off the previous version or the old version that has been deployed earlier and it's going to replace it with a new version in here and it's going to work absolutely flawlessly so that's that's going to actually ensure zero downtime for your users or your websites and always going to have like you know blindingly fast deploys and builds and it's always going to work absolutely fine so you need to of course go ahead and wait for the build a little bit to finish up in order to see what's actually going on now the super powers of the netlify cli are pretty pretty good now if you take a look on the help messaging is there's tons of commands and of course i'm not gonna go through all of them but what i like about this is actually there's this beta thing which i absolutely enjoy which is the build and you can use your own local machine to run the network build as you were to be running on any other linux server or their own servers and since right now i have in linux in here i can i can definitely run this and i can definitely upload it and it would work absolutely great no environments issues or errors or any of that kind of inconsistencies it will work absolutely flawlessly so for this all you need to do is actually go ahead and do like netfly build and you're going to find like this message it's going to come up it's going to give you all the info for example the you know vanilla 5 version that's actually running the flags uh the context is running this in production and it's of course going to run our yarn build command it's going to start doing this using webpack and everything so as it were to be running on a regular network so if you take like you know the logs in here just a quick look on this you're gonna see a huge kind of you know they look pretty much the same whenever this runs either locally in here or on the server itself they are both the same which is absolutely great so as soon as this kind of built in everything you can take this build folder build destination folder and you can absolutely just push it to the network file then if i won't trigger the rebuild again because it already got basically the build destination folder and you're good to go so this is it now actually has been built successfully i got the new build folder in here now all i'm going to need to do is actually go ahead and do netlify deploy and if i take a look quickly on the whole message of deploy there's tons of stuff in here going on but what i want is actually use this network deploy to prod and which is to deploy directly to production and deploy this this new folder that is built for us directly to your production so to do this network deploy dash dash prod click enter and this will start the procedure to upload this destination folder so you see it's uploading everything and there you go you put that and it was so so quick now if i take a look on the website itself in here it's gonna find this new website if i take a look on uh the builds in here refresh real quick i'm gonna find a new deployment that just happened and no no deploy message because that has been just you know we just deployed it from our local machine if we take a look on this i think this is the one uh i don't know i remember is it yeah it's this one and yeah it still works absolutely fine you can log in you can uh sign up you can do a specialist login and like it's still working so if i try to do that real quick in here uh for logging in so there you go it still works i still gets into here so it can get to my dashboard so that's still with with the api it works absolutely sweet uh you can actually access everything so this is a fully fledged website this website is is a fully fledged website it works with an api back-end api graphql react router typescript redox everything and that has been all deployed into netify in just a couple of seconds you've seen it by yourself without any issues so that's that's the main point what i love and a lot of other people tons of them love to use nelly fly as they do right here so hope you guys enjoy hope you guys know you can deploy with ease without any problems to your netify you know host and everything you can take your reacts applications from localhost to an actual web server and you know publish it with other people and this works really well especially the free tire if you want to like showcase your website to a client if you're doing freelance just like with your buddies even has on the cli this live kind of feature that allows you to select to tunnel it live without needing to deploy which is absolutely tremendous and i absolutely appreciate that so as i said before thank you guys for watching hope you guys will enjoy it and catch you all hopefully in the next ones [Music] [Music] you