How to upload your website to Azure using Visual Studio Code + Git

Step 1:

In Visual Studio Code I will make new project folder with simple HTML page, if you have already your website you can skip this step. In my website I will have one div container with h1 and h4 tags for simple text message and I will add one style.css in which will be style for my index.html page.

Step 2 :

For this tutorial we will use local Git repository, so first thing that we need to do is to initialize local git repositoryfrom Visual Studio Code.



On left side of Visual Studio on Viewbar we select "Git" and we initialize git repository









After that we need to make init commit, so we can make sync of our local files with repository that we make in last step.





After that we need to make init commit, so we can make sync of our local files with repository that we make in last step.

Step 3:

If everything is ok at this moment, we can go at Microsoft Azure portal. This tutorial you can follow if you have any Azure account such as: DreamSpark, BizSpark, MSDN... After we sign in successfully on our Azure portal we need to make new Web App:



On left side we choose New -> Web + Mobile -> Web App ... after that in Web App dialog we enter information about App Name for new Web App (this name will be a part of the URL), subscription, new or existing resource group and last one is location, the best location is nearest to your clients and user of web app/website.









web app will be on the dashboard (if we choose pin to dashboard option).





After few moments our new web app is created... we will get notification about successful created app andwill be on the dashboard (if we choose pin to dashboard option).



When we find our app on the dashboard and if it is in running mode, we can click on it and see settings about it... and following this path we can use Deployment Source option which is very important for this tutorial. So to the Deployment Source we can go with these steps:



Web App -> All settings -> In publishing section we choose Deployment Source -> Local Git Repository -> Ok







After that we can see this message:



















In our web app we can see that Microsoft Azure is created authentication data: Git/Deployment username and Git clone url... we don't need to use default credentials, I will go to All Settings and under Set deployment credentials I will set new username and password.





After that we can see that now we have our custom username for Git/Deployment:





Now all you have to do is to sync our local git files with Azure portal and our Web App



Step 4: When we find our app on the dashboard and if it is in running mode, we can click on it and see settings about it... and following this path we can useoption which is very important for this tutorial. So to thewe can go with these steps:->-> Insection we choose->->After that we can see this message:In our web app we can see that Microsoft Azure is created authentication data:and... we don't need to use default credentials, I will go to All Settings and underI will set new username and password.After that we can see that now we have our custom username for Git/Deployment:Now all you have to do is to sync our local git files with Azure portal and our Web App

On our machine we need to open terminal or command prompt and we navigate same context as our project files. Fastest way we can navigate to our project is to right click on Explorer view in Visual Studio Code and in dropdown menu select Open in Command Prompt (or Terminal)











In command prompt we type this command:



git remote add azure PLACE_FOR_URL

Place for URL will be our Git clone url from Azure portal for our Web App and we can find it in settings... the best and easiest way is to use Click to copy so that we can be sure complete url is copied.







We can paste it in command prompt, and with this command we are connecting local git repo with Azure cloud.





git push -u azure master

After this command we will need to enter password which which we have defined in Deployment credentials we enter password and confirm it with keyboard Enter key.



In our command prompt we can see that some data is listed and after everything is done we can see message: Deployment successful.









Step 5: Now we must to navigate to our Web App -> Settings -> Deployments ... and we can see that our web app is successful uploaded.









Now we can go to URL of our web app/website and make sure that everything is ok and same as we created on local machine... now our website is online on Microsoft Azure cloud.



For those who don't now, URL of our web app is App Name + .azurewebsites.net in my case it is on this url: http://vscodeazuregittutorial.azurewebsites.net/



Or you can simply go to URL which is available in part of Web App settings.





Right now we have our website uploaded and we can continue to work on it locally, edit it and when we are ready to publish it we can do commit and push and all our changes will be synced with Azure and the best thing is that all of this we can do from Visual Studio Code.





To prove that this tutorial is successfully one I will navigate to URL of my Web App:







If this was helpful for you share it with your friends and colleagues so that this blog post find the way to more people.



Best regards! Almir Vuk | AV Development | http://almirvuk.blogspot.ba/ In command prompt we type this command:Place for URL will be ourfrom Azure portal for our Web App and we can find it in settings... the best and easiest way is to useso that we can be sure complete url is copied.We can paste it in command prompt, and with this command we are connecting local git repo with Azure cloud.Confirm with enter and we can go to next command, which will do push our local files to Azure:After this command we will need to enter password which which we have defined inwe enter password and confirm it with keyboard Enter key.In our command prompt we can see that some data is listed and after everything is done we can see message:Now we must to navigate to our->->and we can see that our web app is successful uploaded.Now we can go to URL of our web app/website and make sure that everything is ok and same as we created on local machine... now our website is online on Microsoft Azure cloud.For those who don't now, URL of our web app isin my case it is on this url:Or you can simply go to URL which is available in part of Web App settings.Right now we have our website uploaded and we can continue to work on it locally, edit it and when we are ready to publish it we can doand all our changes will be synced with Azure and the best thing is that all of this we can do from Visual Studio Code.To prove that this tutorial is successfully one I will navigate to URL of my Web App:I hope this blog post tutorial was useful to you, and I hope that you learned something new about Microsoft Azure, Visual Studio Code and Git source control.If this was helpful for you share it with your friends and colleagues so that this blog post find the way to more people.Best regards!

How to upload your website on Microsoft Azure using local Git repository. It is subject of this blog post tutorial. I will demonstrate how to do it using Visual Studio Code and Git source controlAs we knowhe does not have implemented publish to Azure functionality, but VS Code has great support for Git source control so we will use Git as mediator between for this process of uploading website to Microsoft Azure.First of all it is important to specify what you need to upload our website successful following this tutorial:This is how my Visual Studio Code Explorer view with folders and files looks like:We confirm this commit with combination of keysor with check mark above text commit area.