How to Setup Git Deployment of Azure Web Apps

The Azure Portal (https://portal.azure.com/) has had me stumped on an apparently simple task for the past couple of days. I became lost in the UI of are trying to create a new Azure Web App that I could deploy changes to by pushing to a git repository. Here are the steps you actually need to get this done…

  1. Login to https://portal.azure.com/
  2. Top left of the screen click “Create a resource”
  3. In the search box type for “node empty” and pick the “Node JS Empty Web App”
    2018-04-20 07_47_22-Everything - Microsoft Azure

  4. Fill in details for the new web app and optionally click “App service plan/location” if you want to change the size, and therefore cost, of the instance, and where it is located in the world

  5. Press “Create” and wait for your app to deploy
  6. Open the app and click the URL to make sure the deployment is actually now serving web pages
    2018-04-19 07_55_02-Dashboard - Microsoft Azure
  7. This is where I became stuck. Just how do you get the git deployment working from here?
  8. In the “Deployment” sidebar menu click “Deployment credentials” and make sure you have a username and password set up
  9. Click the “Deployment options” two menus down. Pick “Choose source” then “Local Git Repository”. You may have to disconnect any existing options using the button on the top menu of the deployment options tile
    2018-04-19 07_58_45-Choose source - Microsoft Azure
  10. Now you need to scroll halfway down the sidebar menu to find the “Properties” title. In that tile is the git url for your web app
    2018-04-19 08_01_01-Properties - Microsoft Azure
  11. On your local PC git clone that git url. You’ll need the username and password you created earlier to login
  12. Git should then clone you a directory structure something like this:
    2018-04-20 07_39_48-sleepsuntil-web
  13. Edit the file server.js changing the text res.end('Hello, world!'); to something of your choosing
  14. Commit the change in git then do a git push
  15. Reload the URL of Azure app and you should see your changes

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s