Visual Studio Code and Azure App Service - a perfect fit

If you're like me, you were excited to see the announcement of Visual Studio Code last week and immediately started to think about how cool it would be if you could hook it up to your projects deployed on Azure App Service. So, between sessions at //build2015 and on the way back home from San Francisco (with the help of my awesome colleague David Ebbo), I was able to put together a great starting point. A Node.js app running on Azure App Service that I can develop in Visual Studio Code and publish to the Azure Cloud by doing a Git Push. The artifacts created by the steps I will describe below are:

• An Azure App Service Web App implemented in node.js
• A GitHub repo that is synchronized with the Web App (every commit to the master branch publishes a new version of the Web App using a GitHub hook)
• A local git repo setup to push to the GitHub repo as a remote
• A Visual Studio Code workspace configured to use the local git repo
• The end result? When I hit the git push menu item in Code, my live Azure Cloud application changes!

 

System Requirements

To make the magic happen, you will need to have to following components installed \ available to you:

1. An Azure Subscription (get one here)
2. Visual Studio Code (install instructions)
3. Git (download)
4. Curl, used to create your GitHub repository (install)
5. Azure CLI (install instructions). Note: The Azure CLI is an optional component, you can choose to create your Web App and configure it with GitHub by using one of the Azure Portals or Powershell.
6. GitHub account Note: for this initial version of Code, the GitHub account I used is not using SSH or two factor authentication.

 

Putting it all together

For the purpose of this demo we will build a very simple node.js application comprised of only one file, server.js. Steps are: 1. Create an empty folder, this will become the location of the Code workspace. In my case I have chosen to go with “C:\websites\CodeWebApp” 2. Launch Code, hit the File | Open Folder menu and select your new folder 3. In Code, create the server.js file and paste the below java script snippet:

var http = require('http');
http.createServer(function (req, res) {
    console.log('Got request for ' + req.url);
    res.writeHead(200, {'Content-Type': 'text/html'});
    res.end('<h1>Hello Code and Azure Web Apps!</h1>');
}).listen(process.env.PORT);

Hit Save. Make sure that you name the file server.js and that you save it in the folder created in step 1.

4. Now it is time to create a local git repo that you will later sync with GitHub. In Code, hit the git icon on the left nav bar and hit the “Initialize git repository” button. Note: you may need to hit the File | Open Folder… menu item and select workspace folder (created in step 1) if the Initialize git repository button doesn’t show up. 5. Commit the server.js file by typing the commit comment and hitting the enter button. You now have a local git repo with server.js checked in. 6. You will execute the next few steps in Git Bash. You will create an online GitHub repository and map your local repository to it. To create the GitHub repo, type the below command to the Git Bash window

curl -u USER https://api.github.com/user/repos -d '{ "name": "NAME" }'

Note: replace USER with your GitHub user name. Note: replace NAME with the name for your new GitHub repo. You will be prompted for your GitHub password. The process will return a bunch of JSON after execution. 7. You will now map the local repo to the newly created GitHub repo. In Git Bash type:

git remote add origin https://github.com/USER/NAME.git

Note: replace USER with your GitHub user name. Note: replace NAME with the name of the GitHub repo your created. 8. Now you will configure git to save your credentials locally and automatically append them to push commands generated from Code (I suspect the Code team will improve auth support in future releases). Type the below in Git Bash:

git config credential.helper store

9. This step will be the initial push to GitHub, after that, you will be able to do all the push commands from Code. In Git Bash type:

git push –u origin master

Since you have configured the credentials helper in the previous step, you will not need to provide the credential next time you push from either Git Bash or Code. 10. By now we have a local repo synchronized to a GitHub repo. It is time to create an Azure App Service Web App! There are several ways to create Web Apps, you can do that in the Preview Portal (“Ibiza”) or the “Classic” portal. Powershell commandlets are also available. If you use one of the portals, create a new Web App and pick GitHub from the Continuous Deployment UI. You will then pick the repo you have created in step  6 (master branch). In this example, we will use the Azure CLI to create an Azure Web App and link it to your GitHub repo. In a command window (running as administrator) type:

azure site create NAME  -- github

Note: replace NAME with a unique name for your Web App Note: you will be prompted for data center and GitHub repo. 11. You are now ready to use Code to make changes and push them to your Web App. In Code, make a change to the output line of the server.js file. 12. Hit save and click the Git icon on the left nav. 13. Commit your change in Code.               14. Push to the GitHub repo.             Note: to see the output of your git operations, hit the View | Output menu item             15. You can now browse to the Web App you created and see the change you just made. Congratulations! you can now use Code to publish an Azure App Service Web App.            

Conclusion

The scenario above is just the tip of the iceberg in terms of what can be done. If you have a more sophisticated project where you work as a team or where you want to stage your code before you release to production you can have your GitHub repo linked to your Web App staging slot and do some testing before you swap your code into production. Alternatively, you can leverage GitHub workflow and have your two sites, one synchronized with your master branch and one synchronized with a staging branch, you can then use pull  requests to gate production releases. There is much more to do and learn and I will be updating this blog as new stuff shows up.