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:- An Azure Subscription (get one here)
- Visual Studio Code (install instructions)
- Git (download)
- Curl, used to create your GitHub repository (install)
- 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.
- 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.
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.gitNote: 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 store9. 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
Note: you will be prompted for your GitHub user name and password.
azure site create NAME -- githubNote: 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.
