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

https://2.bp.blogspot.com/-OJdmWlVcEzA/VyEvnw8ggzI/AAAAAAAABec/QLmEe0x9HYMgpUkyVgiZiphd3m4kLO9UACLcB/s1600/Azure_almir_vuk_git_vscode_bosnia_msdn.png

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 control

As we know Visual Studio Code he 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:

• Installed Git source control on our Windows/Mac/Linux machine
• Visual Studio Code
• Azure account (DreamSpark, MSDN, BizSpark ...)

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.

This is how my Visual Studio Code Explorer view with folders and files looks like:

https://2.bp.blogspot.com/-Ovaht3t2n1Y/VxJNlSr11tI/AAAAAAAABbg/XA4V3b8jceIo0MGj-y42vybokn87L6cmgCLcB/s1600/first_almir_azure_git_vscode.png

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

https://4.bp.blogspot.com/-Coub1fESXEY/VxJM5dt7cZI/AAAAAAAABbY/mfKmoEjZcFQ8mxK6AI9r7Dd6C384t1RjgCLcB/s1600/second_almir_azure_git_vscode.png

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.

https://3.bp.blogspot.com/-GNJ0q68sW48/VxJNMTrXIzI/AAAAAAAABbc/zKax90pI6Mgn4eBzB_RO-Bhyt5mAXNACQCLcB/s1600/third_almir_azure_git_vscode.png

We confirm this commit with combination of keys CTRL + Enter or with check mark above text commit area.

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.

https://1.bp.blogspot.com/-3tEnP1tyzIE/VxJKbyW-S2I/AAAAAAAABbE/wG6qvOEVDwU9dYZdEZqNP7Fd1JnJ7URoACLcB/s1600/four_almir_azure_git_vscode.png

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

https://3.bp.blogspot.com/-rgLO5nUnQEo/VxJLkGykBiI/AAAAAAAABbQ/wr5noOsCzEky0PDsJCC0nS_rk66Nzr2mACLcB/s1600/fifth_almir_azure_git_vscode.png

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

https://4.bp.blogspot.com/-ycXTWscPe_8/VxJPWDOq8BI/AAAAAAAABbo/u6n3OptcrTYUL-5BND33-zuebpS7ItEigCLcB/s1600/sixth_almir_azure_git_vscode.png

After that we can see this message:

https://2.bp.blogspot.com/-uhk03wRA0wQ/VxJP8TtB4NI/AAAAAAAABb0/9JuWxGb6JUEdCV9RgWbzNMovEp5X8qFoQCKgB/s1600/seven_almir_azure_git_vscode.png

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.

https://2.bp.blogspot.com/-JJCIDe1ktrk/VxJRvNn57hI/AAAAAAAABcA/hUthmBLpH0Etg4UpUZeWcAq3Z1P2jWO-ACLcB/s1600/eight_almir_azure_git_vscode.png

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

https://3.bp.blogspot.com/-c01UTnF381Q/VxJSOokMN_I/AAAAAAAABcE/u07eKL-GMXcNOuuLEW5n29oyuLE83E3TgCLcB/s1600/nine_almir_azure_git_vscode.png

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

Step 4:

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)

https://3.bp.blogspot.com/-PtoMdqUspQc/VxJUMKaYijI/AAAAAAAABcU/n_xj8Hc-aEsgMaMmOR6sinQFCghs-0AJACLcB/s1600/ten_almir_azure_git_vscode.png

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.

https://2.bp.blogspot.com/-DGmdoJlsFGA/VxJV1dklJsI/AAAAAAAABcg/pw3k4aVRzpMTIj-qLmj6uEE1P6jOTmEwQCLcB/s1600/eleven_almir_azure_git_vscode.png

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

https://3.bp.blogspot.com/-vkdRXGwz65E/VxJWwDf_5iI/AAAAAAAABco/xGIoAz1ThUMM2uBZc3KJw7xrPh1l1ES8QCLcB/s1600/twelv_almir_azure_git_vscode.png

Confirm with enter and we can go to next command, which will do push our local files to Azure:

 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.

https://1.bp.blogspot.com/-YhqsgpH0WrE/VxJbBGbJhFI/AAAAAAAABc4/XYuks9PZa8sylHg9weD8tzE3AA2zN_4egCLcB/s1600/13_almir_azure_git_vscode.png

Step 5:

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

https://1.bp.blogspot.com/-slKv4ihk0Ss/VxJb_BjcAzI/AAAAAAAABdA/ne1SCs04rpk6zMEbzLhgjfQPUnR_CMCzQCLcB/s1600/14_almir_azure_git_vscode.png

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.

https://4.bp.blogspot.com/-_ZoCptD12-0/VxJdXEgN9JI/AAAAAAAABdM/2efRuqRVlVcZvbu52uz-L0mjLwsD4jrowCLcB/s1600/15_almir_azure_git_vscode.png

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:

https://4.bp.blogspot.com/-WlG_B_zkNws/VxJeAZLAz6I/AAAAAAAABdQ/RsK72aQtmEEM4vC8iKYgpsu8hqres5TMQCLcB/s1600/16_almir_azure_git_vscode.png

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! My blog: http://almirvuk.blogspot.ba/