Deploy MERN app to Azure App Service | Step-by-step tutorial

what's up you guys it's Marina from sex Muse and finally I am publishing a new tutorial which is very cool because I learned how to deploy a full moon stack application to Azure app service and I think it's very useful because um the tutorials that I was looking for they mostly used the virtual machines and stuff it was very complicated I went through a lot of documentation and articles to actually learn how to deploy it in a very simple way only 10 steps to Azure app service for free okay hope you like it subscribe to my channel and let's go [Music] okay so I prepared a project for you you can go to my GitHub the link is below the video here it is called the Merle Azure tutorial okay I'll just briefly walk you through the folder structure so I know it can be confusing here we have our main server.js file in The Roots folder learn Azure app inside the root folder we have our clients folder like this inside which we have our source folder with all the other stuff including the base URL okay let's move on to actually deploying it to Azure app service let me just create a steps.gxt file here so we can write it down here I'm also new to Azure so um kind of need some notes so the first step we're gonna do is create a resource Group this is assuming that you already have an Azure account and if you do then you have already your default Azure subscription oh and what what's left to do is just to create a resource Group create um app service plan and create app service or web app okay we need to create a GitHub repository we need to connect our GitHub to azure we might need to write not might we must write some mini script to for production in our server.js file and then we're gonna change the base URL to Azure URL after that we can build our client static files and push our code to GitHub and finally um set up EnV variables in Azure so these are basically only only 10 steps to deploy it and it's very easy let's do it now I'm gonna go to my Azure portal okay so here's my Azure portal this is our home page of azure portal I don't have anything here I literally just created an account and this is a default subscription that they create for you I don't have any resource groups or anything so let's see our first step is to create a resource Group okay let's search in the search bar for the resource Google Groups here it is research resource groups and these are default resource groups we are going to click on create and yes it will be linked to our Azure subscription the default one and here we're gonna uh we're gonna have we're gonna provide a name for our Resource Group learn Azure and I like to call it RG at the end just because the latest stages it can be very confusing all these names and usually I use the region West Europe as it's physically closer to where I am West Europe where are you Europe threes it ah here it is okay West Europe and that's it that's all we need to review and create a validation pass so we can click again the create button and here you can see in the notifications the best status of your requests in a room of your actions NDC Resource Group is created go to Resource Group but we don't have actually any resources here so let's go back to our steps this is done create app service plan so let's go back to Azure and look for app service plants and we can create a service plan so again subscription is the default one the resource Group is the one we just created we're in Azure RG the name of this app service plan is going to be learn azure app service plan and the operating systems is Windows region as previously I've chosen West Europe here it is then we have pricing tier tier and I'm just gonna use the free one for now okay and we can click review and create so let's create let's click create again and see the status of our request it's created super easy peasy okay so this we can say is done create app service web app um okay let's search for app service and we're gonna choose this one up services and here we're gonna click on create app service again the Azure subscription is the same the resource Group is the same we created name is going to be mered Azure app this is the actual app publish code because we're gonna push codes through GitHub runtime stack is so I'll backend this node so I'm going to choose the latest one available here operating system Windows region West Europe and Windows plan is going to be also the free one where we have the shared infrastructure click review and create okay so we can just click another another time a create button and see the status our deployment is succeeded that is amazing so we can cross it out of our checklist done the next step is great GitHub repo I meant create not sure if it's great okay so for this let's go to our GitHub no GitHub okay sign in why are you so slow today and I'm gonna sign in as Madina came for four by the way I just noticed that I have 15 followers on GitHub that is cool okay let's click on this small arrow and create a new Repository and we will call man Azure tutorial create Repository and here it is I'm just gonna copy this slide here and let's go back to our vs code now we need to connect GitHub to Azure so we're going to to head to our um let's say let's just click on Microsoft Azure we have our app service here let's go let's go there and what we have here is our overview tab so if you click browse here it will actually open the uh our web application but at the moment it will not display anything because we didn't connect to Azure or to our code so let's go to the deployment Center and select the source of the code it's going to be a continuous deployment with GitHub but we will change the provider to app service build service okay then we're gonna check that the GitHub account is the one we want to use and I'm sending as Marina kill so it's fine I'm gonna select the organization which is Melina Kim the repository we just created is mer Azure tutorial and the branch and we will only have our Master Branch all what's up here oh interesting we just have a repository maybe that's why let's push our code to GitHub so for this we're gonna say get add everything and then we do git commit with a message I don't know first commit and we're going to add our remote origin that I just copied from when we create the Repository and if we check the status it's working three clean so we can just get push origin master okay looks like it has pushed let's check and uh yeah here's our code let's go back to Azure and maybe now we will have this kind of Branch but I think maybe we need to reload yeah yeah reload let's do it again select code Source GitHub change provider to app service build service select organization select Repository and select Branch Master nice okay save here we can see the status it's enough deployment a successful set of deployment so actually it will appear here maybe when I refresh yeah spending for now once you're gonna see the status here if it's successful or not and actually every time you push the code to your remote GitHub repository it's going to be as kind of a deployment item in here let's refresh again and oh it's written success okay nice let's see so we connected our GitHub to Azure this is done we pushed code to GitHub and we we've done it in advance so now what I would like to do is to write the script for production in survey.js file let's go to the server.js file and somewhere I don't know after all the API routes we're gonna have a production script which will say app.use Express dot static because we can deploy a little the static files and they will be located at client slash builds folder we don't have this folder yet in the client folder but we're going to build our clients files and all the static files will be available in the builds folder and another small script we have to write is app.get all routes so all routes of the app should be using now this kind of static file we're gonna send the HTML index file here and actually for this it would be useful to import uh we don't have to install it but we can just import the path from the path package so const path equals to require with choir path right pause okay and here as a general API call we have function we have a callback function of request and response arrest dot send file which is located at pass DOT resolve here we can provide first our current location so double low Dash dear name and then we can provide um a further route which is client folder and then we go to build folder and then we go to finally we go to index.html so we send we are sending these engines.html file on all routes okay that's it for the production script we can save our server.js file and go to back to our steps and this is done the next step is to change the base URL oh yeah this is important because right now if you go to the source our base URL is the localhost 3000 3001. but actually if you go to your web app to overview section and you click on browse you're gonna see that our URL has uh Azure URL it's actually why what's happening let's do it again browse well okay nevertheless this is our default domain we can just copy it here and this will be our base URL right here save um yeah but we need to write it like with https like this okay save okay change base URL done I don't know why we cannot get okay we need to do a few more steps in order for our content to be actually displayed for our app to be displayed so let's proceed with step 8 which is build class static files okay open up the terminal I'm gonna clear everything and what we're gonna do is um we are going to CD into our client folder and run the script and PM run build to build the static files and now you'll see that the builds folder will be created here okay so our build has finished and we can say it's done so finally we have to we have to push push the code to GitHub once more because now we have this static folder so let's do this uh let's see the out of the client folder and say git add git commit with a message of I don't know updated uh base URL and build static files okay and we can get push remote origin master and that's it that is done we have only last step left and because we just pushed and we connected our Azure to GitHub in the deployment Center you're gonna see this last push that we just made running deployment commit or whatever it is success so I think now if we go to overview and we actually browse for the app it's going to open up our app but I'll tell you let's just check that it's opening and you see it's working but if we click on create the navigation is working but it's not actually going to save anything because uh I'll show you a secret uh you have not set up environmental variables let's do that how we go to the configuration where is it in the settings under the settings we have the configuration tab and here we can let me close it for now and this and this we can just add new application setting and we should call it the same as we called our environmental variable in the dot EnV file so URI and copy paste the value from your dot EnV file of the URI again I have a password here so I'm not going to share it but you know what I mean okay and click ok and now we have a new environmental variable here it means that now if we go to the uh no we have to save it first very important save and changes to application settings we'll restart your application that's fine continue successfully updated web app settings nice now if we go to the overview and browse our app and it's working and you see it's even connected to the database because it can read from it and I assume it can also create let's do the test from azure test save to one go TP back and we have it here it means everything is working just fine and thank you for watching I hope you liked it and let me know what other tutorials you want to see

Channel: Marina Kim

Views: 8,585

Keywords: deploy mern app, deploy react app, deploy react js, publish react website, publish react app, deploy to azure, deploy to azure app service, deploy to azure from github, deploy to azure web app, azure app service, azure app, azure app service tutorial, azure app configuration, mern app, react tutorial, react tutorial 2023, react tutorial project, node js, node js tutorial, node js express, mongodb express react node js, azure, azure tutorial, azure tutorial for beginners

Id: zMbXMSma5hg

Length: 19min 59sec (1199 seconds)

Published: Wed Jun 07 2023