How to host a React App on Azure

hello everyone this is Antonio and today we're gonna learn how to deploy a react app using Azure web services What specifically we are going to create an static web app and then create a repo on GitHub I'll show you how to create repo upload repo from your local machine and then create the resource on Azure to deploy your app so let's get started [Music] thank you so as you might know I react or react yes whatever you can call it it's just um elaborating for building user interfaces actually it's really important to to know the use cases for react uh this is not a front end or backhand lesson in fact what we are trying to achieve is just to know how to use Azure to deploy your your app I will assume that you know how to use VI if not uh you can find any verses or documentation or tutorials on YouTube or any other website so without future details let's get started um I just have created on a empty folder right here on my desktop you can create the empty folder and we are going to use a Powershell to create the react app uh in fact the first step is that you have to install no DS and then select the appropriate tools so in order first to create the react app we have to do an MPX create create react app and the name of your app this is going to be a hello world this is just going to be a pretty straightforward application simple application just the one that we receive on the on the tutorials and then let's uh press enter let's proceed with yes it might take just a couple of seconds till it's completed let's wait meanwhile I will recommend you to open your act to your Azure account if you haven't create the the Azure account I will suggest you to to create a new one or try the the Azure account for starting I'm just going to use my student account now do one that I use for production this is the one that I have received when I was just starting so once you have created the account then we'll move forward let's verify if the if the react app is already uh in place not yet so let's pause the video and let's go back once it's ready let's do something let's open Visual Studio right here using the code that command and it will open the visual studio now the visual studio is open we can just close the the Powershell CLI now here's the whole project I want give details about this just this is the the entry point for your app and what uh are we going to do the next let's open a new terminal let's do a CD hello world and then let's run the app for that we are going to use the npm start command okay once we have run the app you're going to see this yeah up right here or the the application running on localhost you can actually edit this configuration right here let's do something let's do demo for Azure demo let's remove all of this demo for Azure website okay let's save it that's very fine okay perfect this is something really straightforward there's not much to say about this now that we have uh created the app and it's uh running on your Local Host let's create the the repo the repository on GitHub for that there are two ways I I prefer to first of all create the login repo and then create the reaper on GitHub so first let's create the the local repo okay to create the repo we can actually do it from our Visual Studio we have to go to new terminal CD to our current project and then do a git init let's verify let's get status on all the files are already here so let's do a git r dot and then let's do a git status on all of them are green are ready to be a stage The Next Step will be to create a new repository right here on GitHub let's create that one let's call it um demo react and let's create a grip right here it will give you some commands the ones that actually we are going to use are git commit to add the message let's paste it let's do our git Branch to add a new branch on a repo then the mode add let's add the remote Repository and let's push push the changes right here let's put this online let's push the changes okay perfect let's see the the repository in GitHub okay the files are right here this is the demo and now the next step is to create the application on azure okay so far so good we have um created the local project for or react application we had commit changes to the remote Repository and now we need to create the resource on azure so for that we have to come here in to the portal select create a resource select well and now let's select the static web application I'm starting web app let's select create let's enter our details um actually uh let's like uh shoot demo apps I will create a new Resource Group call it website demo let's add a new name for it let's call it demo I should app here this is something to make sure we consider as as part of the of the deployment we have several options to deploy your app we have GitHub Azure devops and order here I'm just going to use the the repo that I already created on GitHub you can select your account and then once you have signing into azure let's select the organization that's my organization the repository Azure demon react and the branch the main branch here this is the the chord of our heart of our actually tutorial we have to select the build presets we have several options we have angular Blazer next Nooks react spelled a ton of options we are going to select react the application we can just select or leave the product as it is or if you have for example any application you can select the application or any other configuration right here but thus here we're going to make this tutorial straightforward not too much to speak about it so Let's do an review and create it might take a couple of minutes or it will depend on point your configuration of internet connections and then let's do create here the deployment it's in progress as you know usually Azure resources uh take just a couple of minutes to be deployed so now let's move forward let's go to the resource let's close all of this and let's try to browse it here there is something to take into a consideration the first time that you open the the application it won't show you your your current application because it might take from three to five minutes to be deployed so don't worry if you don't see the application in the first start of your of your journey so let's wait but you already see that actually it's giving you something it means it's working as you can see it shares with you one specific URL that is um provided by azure so this is the overall configuration you can see the resource Group the subscription the subscription ID the location the SQ that URL your source and the deployment history you can select that one and it might show you the the status of the deployment that is actually doing the build and deploy it might check till five minutes to complete and you can also edit the workflow this is for CI CD configurations so we have to wait let's wait a couple of minutes till it's complete right here one in once it's completed it will give you here any green I don't remember to be honest that the successful message but once it's ready it will change them the main page so let's wait and came back once it's ready okay let's see if the resource has been deployed successfully okay perfect looks okay let's see Deluxe okay complete and now let's try that for another application okay awesome okay guys we have already added the application to a repository we can browse the the repository word application itself we have the the same resource that we have locally so what will be the next step here um when you have a custom site what do you you actually do if this is a personal project you can just keep the the URL as it is but if you're going to use this for um for any production side uh I would suggest you to add the custom Main what the custom domain is for the custom domain will enable the users to access your website easily it's really hard to look for this instead of using for example mydomain.com so that's why we have to select the custom domain for our users to access the website easily so what will be the the next step to add the domain I do own a domain here on this domain provider they are not paying me any penny for this tutorial so it's not related with them I'm not doing any marketing campaign here but if they want to pay me I'll be great to to do so but now um this is not marketing so what we're going to do I do have these domain infrared columbia.com the one that we'll use to access the the website from outside the internet if you let me see if if you try to access right away it will let you access the domain so the next tasks will be to to make sure we can access the website so to add a custom domain we have to come here into custom domain select add custom the mate on other DNS we have to provide the domain with three with www.thead of my name.com that will be my domain select next select cname and we have to add this before you do any changes here in Azure I will recommend you to add this and wait a couple of minutes so let's do let's copy this value will be type c name Let's uh let's come here to Alban's DNS Let's uh let me see Advanced DNS yep here we go Advanced DNS let's add a new record CMC name B chord the house W and the value for the TTL we're going to select 60 minutes let's save the changes let's wait a couple of minutes let's do something okay let's try to to our domain right now here it will fail because as I mentioned a couple of minutes ago before adding the domain we have to create this value so I will cancel this operation let's try to refresh the the portal and now let's try it out again custom domain let's paste the domain let me copy it from here okay let's let me copy the value dot com let's do next see name let's add the value and now it's working it's adding the value it might take between uh 5 and 10 minutes to complete this operation so once it's completed you can just close it it will show you here the close button and then uh we are going to refresh the console or the portal just to make sure we have added the value properly so let me pause the video I'll take a coffee and I'll be back so um actually it's taken a couple of minutes so no worries if it's take longer than expected but you can see that my name the main mention the hostname or record type and here are the details the same details that we have provided to our domain to our Advanced DNS configuration so if we try to navigate this side let me see let me copy and let me open I don't have any Incognito let's try and let's paste it so here we go haha pretty cool right isn't it let's try to refresh the value let's try to refresh the end portal yeah it it might show here that it's adding because it will be replicating across the word the the records so no worries but actually you can see that we can access or react application and in fact if we verify the details you can see that Azure provides um a certificate and SSL certificate so if you have reached this point let me tell you something congratulations it's not an easy task to learn any new tech but it's worth it so let's let's do a quick uh verification so what we did we create and we a real application if you already have any react application you can do it with your own application so we create the react application we create a new resource right here and we create a great bone then we create the static web app on azure we configure a new custom domain and we were able to access our application as you can see if you update this configuration you can see the new URL or the new name for your application so this is everything for today see you on the next time thank you and if you like the video uh please subscribe and share it and like bye for now why are you running or for the environment or for animals they just couldn't believe that somebody would do all that running for no particular reason why are you doing this I just felt like running

Channel: Jose Antonio

Views: 3,362

Keywords: reactjs, react, javascript, js, svelte, vuejs, vue, azure, az900, tutorial, learn, new

Id: qZzhumd2E-U

Length: 20min 47sec (1247 seconds)

Published: Thu Jan 12 2023