├── media ├── mslearn.png ├── 01-setup.png ├── 17-drop-file.png ├── 22-loggedin.png ├── 33-sub-menu.png ├── 12-git-commit.png ├── 20-devicelogin.png ├── 21-paste-code.png ├── 24-create-site.png ├── 32-select-sub.png ├── 34-select-app.png ├── 03-find-express.png ├── 08-code-command.png ├── 11-copy-clone-url.png ├── 13-code-displayed.png ├── 18-vscode-login.png ├── 19-login-result.png ├── 23-notification.png ├── 23-select-account.png ├── 24-app-services.png ├── 25-new-site-name.png ├── 27-select-region.png ├── 35-app-selected.png ├── 40-save-and-queue.png ├── 41-queue-window.png ├── 43-build-running.png ├── 45-app-deployed.png ├── 46-enable-trigger.png ├── 48-edit-view-code.png ├── 49-commit-to-git.png ├── 04-express-selected.png ├── 10-new-vsts-project.png ├── 14-click-the-button.png ├── 15-start-with-gulp.png ├── 26-new-site-created.png ├── 37-paste-build-file.png ├── 44-build-completed.png ├── 50-new-build-queued.png ├── 02-install-a-generator.png ├── 16-name-select-hosted.png ├── 26-new-resource-group.png ├── 26-resource-group-name.png ├── 29-resource-in-portal.png ├── 31-select-node-version.png ├── 33-app-service-created.png ├── 28-new-app-service-plan.png ├── 28-search-resource-name.png ├── 30-start-page-in-browser.png ├── 32-app-service-creation.png ├── 36-copy-build-file-path.png ├── 47-edit-controller-code.png ├── 51-new-changes-deployed.png ├── 27-browse-resource-command.png ├── 30-tier-of-app-service-plan.png ├── 38-need-web-config-changes.png ├── 39-specify-app-js-filename.png ├── 07-express-generator-options.png ├── 29-new-app-service-plan-name.png ├── 42-build-queued-notification.png └── 31-new-app-service-deploy-task.png ├── LICENSE └── README.md /media/mslearn.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/mslearn.png -------------------------------------------------------------------------------- /media/01-setup.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/01-setup.png -------------------------------------------------------------------------------- /media/17-drop-file.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/17-drop-file.png -------------------------------------------------------------------------------- /media/22-loggedin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/22-loggedin.png -------------------------------------------------------------------------------- /media/33-sub-menu.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/33-sub-menu.png -------------------------------------------------------------------------------- /media/12-git-commit.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/12-git-commit.png -------------------------------------------------------------------------------- /media/20-devicelogin.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/20-devicelogin.png -------------------------------------------------------------------------------- /media/21-paste-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/21-paste-code.png -------------------------------------------------------------------------------- /media/24-create-site.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/24-create-site.png -------------------------------------------------------------------------------- /media/32-select-sub.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/32-select-sub.png -------------------------------------------------------------------------------- /media/34-select-app.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/34-select-app.png -------------------------------------------------------------------------------- /media/03-find-express.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/03-find-express.png -------------------------------------------------------------------------------- /media/08-code-command.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/08-code-command.png -------------------------------------------------------------------------------- /media/11-copy-clone-url.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/11-copy-clone-url.png -------------------------------------------------------------------------------- /media/13-code-displayed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/13-code-displayed.png -------------------------------------------------------------------------------- /media/18-vscode-login.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/18-vscode-login.png -------------------------------------------------------------------------------- /media/19-login-result.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/19-login-result.png -------------------------------------------------------------------------------- /media/23-notification.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/23-notification.png -------------------------------------------------------------------------------- /media/23-select-account.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/23-select-account.png -------------------------------------------------------------------------------- /media/24-app-services.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/24-app-services.png -------------------------------------------------------------------------------- /media/25-new-site-name.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/25-new-site-name.png -------------------------------------------------------------------------------- /media/27-select-region.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/27-select-region.png -------------------------------------------------------------------------------- /media/35-app-selected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/35-app-selected.png -------------------------------------------------------------------------------- /media/40-save-and-queue.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/40-save-and-queue.png -------------------------------------------------------------------------------- /media/41-queue-window.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/41-queue-window.png -------------------------------------------------------------------------------- /media/43-build-running.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/43-build-running.png -------------------------------------------------------------------------------- /media/45-app-deployed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/45-app-deployed.png -------------------------------------------------------------------------------- /media/46-enable-trigger.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/46-enable-trigger.png -------------------------------------------------------------------------------- /media/48-edit-view-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/48-edit-view-code.png -------------------------------------------------------------------------------- /media/49-commit-to-git.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/49-commit-to-git.png -------------------------------------------------------------------------------- /media/04-express-selected.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/04-express-selected.png -------------------------------------------------------------------------------- /media/10-new-vsts-project.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/10-new-vsts-project.png -------------------------------------------------------------------------------- /media/14-click-the-button.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/14-click-the-button.png -------------------------------------------------------------------------------- /media/15-start-with-gulp.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/15-start-with-gulp.png -------------------------------------------------------------------------------- /media/26-new-site-created.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/26-new-site-created.png -------------------------------------------------------------------------------- /media/37-paste-build-file.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/37-paste-build-file.png -------------------------------------------------------------------------------- /media/44-build-completed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/44-build-completed.png -------------------------------------------------------------------------------- /media/50-new-build-queued.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/50-new-build-queued.png -------------------------------------------------------------------------------- /media/02-install-a-generator.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/02-install-a-generator.png -------------------------------------------------------------------------------- /media/16-name-select-hosted.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/16-name-select-hosted.png -------------------------------------------------------------------------------- /media/26-new-resource-group.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/26-new-resource-group.png -------------------------------------------------------------------------------- /media/26-resource-group-name.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/26-resource-group-name.png -------------------------------------------------------------------------------- /media/29-resource-in-portal.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/29-resource-in-portal.png -------------------------------------------------------------------------------- /media/31-select-node-version.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/31-select-node-version.png -------------------------------------------------------------------------------- /media/33-app-service-created.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/33-app-service-created.png -------------------------------------------------------------------------------- /media/28-new-app-service-plan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/28-new-app-service-plan.png -------------------------------------------------------------------------------- /media/28-search-resource-name.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/28-search-resource-name.png -------------------------------------------------------------------------------- /media/30-start-page-in-browser.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/30-start-page-in-browser.png -------------------------------------------------------------------------------- /media/32-app-service-creation.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/32-app-service-creation.png -------------------------------------------------------------------------------- /media/36-copy-build-file-path.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/36-copy-build-file-path.png -------------------------------------------------------------------------------- /media/47-edit-controller-code.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/47-edit-controller-code.png -------------------------------------------------------------------------------- /media/51-new-changes-deployed.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/51-new-changes-deployed.png -------------------------------------------------------------------------------- /media/27-browse-resource-command.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/27-browse-resource-command.png -------------------------------------------------------------------------------- /media/30-tier-of-app-service-plan.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/30-tier-of-app-service-plan.png -------------------------------------------------------------------------------- /media/38-need-web-config-changes.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/38-need-web-config-changes.png -------------------------------------------------------------------------------- /media/39-specify-app-js-filename.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/39-specify-app-js-filename.png -------------------------------------------------------------------------------- /media/07-express-generator-options.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/07-express-generator-options.png -------------------------------------------------------------------------------- /media/29-new-app-service-plan-name.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/29-new-app-service-plan-name.png -------------------------------------------------------------------------------- /media/42-build-queued-notification.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/42-build-queued-notification.png -------------------------------------------------------------------------------- /media/31-new-app-service-deploy-task.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/My-Azure-Projects/Configuring-CI-CD-for-Nodejs-Application-with-Azure-Pipeline/HEAD/media/31-new-app-service-deploy-task.png -------------------------------------------------------------------------------- /LICENSE: -------------------------------------------------------------------------------- 1 | MIT License 2 | 3 | Copyright (c) 2020 AZURE PROJECTS 4 | 5 | Permission is hereby granted, free of charge, to any person obtaining a copy 6 | of this software and associated documentation files (the "Software"), to deal 7 | in the Software without restriction, including without limitation the rights 8 | to use, copy, modify, merge, publish, distribute, sublicense, and/or sell 9 | copies of the Software, and to permit persons to whom the Software is 10 | furnished to do so, subject to the following conditions: 11 | 12 | The above copyright notice and this permission notice shall be included in all 13 | copies or substantial portions of the Software. 14 | 15 | THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR 16 | IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, 17 | FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE 18 | AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER 19 | LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, 20 | OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE 21 | SOFTWARE. 22 | -------------------------------------------------------------------------------- /README.md: -------------------------------------------------------------------------------- 1 | --- 2 | title: Configure CI/CD for Node application with Azure Pipelines 3 | layout: page 4 | sidebar: vsts 5 | permalink: /labs/vsts/nodejs/ 6 | folder: /labs/vsts/nodejs/ 7 | updated: blank 8 | --- 9 |
10 | 11 | ## Overview 12 | 13 | 14 | In this lab, we will present a scenario where Visual Studio Team Services (VSTS) can enable Node.js developers with continuous integration and deployment features. The scenario demonstrates how a Node.js developer using [Visual Studio Code](http://code.visualstudio.com) and various Azure-related VS Code extensions to create a new Azure App Service and use Git-based deployment. You'll learn how a Node.js developer can use VSTS to ensure that their code is deployed automatically to an Azure App Service when code is committed to a VSTS Git repository. 15 | 16 |
MS teamsWant additional learning? Check out the Automate Node.js deployments with Azure Pipelines module on Microsoft Learn.
17 | 18 | ## Prerequisites 19 | 20 | 1. If you don't already have a Visual Studio Dev Essentials and Visual Studio Team Services account, create one at [my.visualstudio.com](http://my.visualstudio.com). 21 | 1. If you don't already have an Azure subscription, create one [here](https://azure.microsoft.com/en-us/free/). 22 | 1. Install Git if you don't already have it installed. 23 | 1. Install Node.js either by using the downloadable installers from [Node.js](https://nodejs.org) or using various command-line tools. Mac users can install Node.js using [Homebrew](https://brew.sh/) using the command `brew install node`. 24 | 1. Install [Visual Studio Code](http://code.visualstudio.com). 25 | 1. Install the [Azure App Service Tools](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azureappservice) using the VS Code Extensions Palette (search for *azure*). 26 | 1. Once you have installed Visual Studio Code and the App Service Tools extension, open Visual Studio Code. In Code, use `Ctrl-Shift-P` (or `Cmd-Shift-P` on a Mac) to open up the command palette. Type the word `path` to filter the command menu, and then select the command **Install 'code' command in PATH** to make it easy to open Visual Studio Code from your command line. 27 | 28 | ![Installing code to your path](media/01-setup.png) 29 | 30 | ## Demo Steps 31 | 32 | [Express](https://expressjs.com/) is a minimal, flexible web application framework for Node.js developers that provides a robust set of features for both web and mobile web developers. The [Express package](https://www.npmjs.com/package/express) is available via [NPM](https://www.npmjs.com/), easily installable into any Node.js application using the command `npm install express`. In most cases Express needn't be installed as a global package using the `-g` NPM switch, as the convention is that Express is installed independently into each Node.js app during development. 33 | 34 | This demo will walk you through the process of creating a new Node.js web app that uses Express. Then you'll create a new Visual Studio Team Services project to use for storing the code and continuously deploying the app to Azure App Service. 35 | 36 | ## Scaffolding a new Express app using Yeoman 37 | 38 | To ease the process of bootstrapping a Node.js Express application, developers can use the [Yeoman](http://yeoman.io) template engine. Yeoman - known as **yo** from it's NPM CLI command name - has hundreds of scaffolders for all sorts of projects. Luckilly, Yeoman is easilly installable as an NPM package just like Express and many other Node.js components. 39 | 40 | ### Install Yeoman and the Express generator 41 | 42 | 1. Run the command `npm install -g yo`. 43 | 44 | 1. Type `yo` at the command prompt. 45 | 46 | ![Installing generators](media/02-install-a-generator.png) 47 | 48 | 1. Type `express` at the prompt and hit enter to search the Yeoman template database for Express-related scaffolders. 49 | 50 | ![Searching for Express](media/03-find-express.png) 51 | 52 | 1. Scroll through the list of results until you see the generator named, simply, **express**, and then hit enter. 53 | 54 | ![Selecting the express template](media/04-express-selected.png) 55 | 56 | ### Generate a skeleton Express app 57 | 58 | 1. In the command prompt, enter the command `yo express` to create a new Express application. 59 | 60 | ![Generating an Express app](media/07-express-generator-options.png) 61 | 62 | 1. Enter the command `code .` to start Visual Studio Code with the new Express app's folder open. 63 | 64 | ![Open VS Code from the prompt](media/08-code-command.png) 65 | 66 | 1. Edit `gulpfile.js` to turn off local hosting during the Gulp build. The code for the `default` task should be commented out: 67 | 68 | ```javascript 69 | gulp.task('default', [ 70 | //'develop' 71 | ]); 72 | ``` 73 | 74 | ## Create an Azure App Service using VS Code 75 | 76 | There are a number of various extensions for VS Code that provide Azure functionality. Extensions like the [Azure CLI Tools](https://marketplace.visualstudio.com/items?itemName=ms-vscode.azurecli) make it easy to write scripts that make use of the [Azure CLI](http://docs.microsoft.com/cli/azure) to perform administrative tasks in your Azure nn. 77 | 78 | The [Azure App Service Tools for VS Code](https://marketplace.visualstudio.com/items?itemName=ms-azuretools.vscode-azureappservice) provide a series of convenient features for creating new Azure App Services. 79 | 80 | ### Login to your Azure subscription 81 | 82 | 1. Expand the Azure App Service Tools pane. Click the `Sign in to Azure` gesture in the explorer pane. 83 | 84 | ![Login command](media/18-vscode-login.png) 85 | 86 | 1. Click `Copy and Open` to open the browser and log in to your Azure subscription. 87 | 88 | ![Device login](media/20-devicelogin.png) 89 | 90 | 1. Hit `Ctrl-V` or `Cmd-V` on Mac, or use the context menu to paste the login code into the textbox. 91 | 92 | ![Login code](media/21-paste-code.png) 93 | 94 | 1. Click the **Continue** button to perform the login routine. 95 | 96 | ![Click continue](media/22-loggedin.png) 97 | 98 | Once you click Continue, you'll be able to select which of the organizational or Microsoft accounts you want to use to login to your Azure subscription. 99 | 100 | ![Click continue](media/23-select-account.png) 101 | 102 | 1. Once the login page loads, flip back to VS Code. You should see all of your Azure subscriptions in the App Service pane. When you expand the pane, all of your App Services are visible. 103 | 104 | ![App Service in VS Code](media/24-app-services.png) 105 | 106 | ### Create the App Service Web App 107 | 108 | To setup continuous deployment to an Azure App Service, an Azure App Service resource must be created into which code can be deployed. Luckilly, Visual Studio, Visual Studio for Mac, and Visual Studio Code all make this a rather easy task directly within the various IDEs. 109 | 110 | 1. In VS Code, right-click the subscription you want to use and select the `Create New Web App` menu option. 111 | 112 | ![Create a new site](media/24-create-site.png) 113 | 114 | 1. Type in a name for the App Service. Note, if an existing App Service with this name exists you'll be informed with an error message. 115 | 116 | ![Give the site a name](media/25-new-site-name.png) 117 | 118 | 1. Create a new resource group for the App Service. 119 | 120 | ![New resource group](media/26-new-resource-group.png) 121 | 122 | 1. Give the new resource group a name. 123 | 124 | ![New group name](media/26-resource-group-name.png) 125 | 126 | 1. Select the geographic region from the menu. 127 | 128 | ![Select region](media/27-select-region.png) 129 | 130 | 1. Select the option for creating a new App Service Plan. 131 | 132 | ![Create a new App Service Plan](media/28-new-app-service-plan.png) 133 | 134 | 1. Give the new App Service Plan a name. 135 | 136 | ![New App Service Plan name](media/29-new-app-service-plan-name.png) 137 | 138 | 1. Select the tier of service. 139 | 140 | ![Select the Basic tier](media/30-tier-of-app-service-plan.png) 141 | 142 | 1. Select the Node.js version your app will need. VS Code will try to determine this for you but you have the option to choose your version. 143 | 144 | ![Select Node.js version](media/31-select-node-version.png) 145 | 146 | 1. Visual Studio Code will provide a stream of information as the resources are being created in your subscription. 147 | 148 | ![App Service creation](media/32-app-service-creation.png) 149 | 150 | 1. Once the App Service is created, it will appear in the App Service Explorer pane 151 | 152 | ![Alt](media/33-app-service-created.png) 153 | 154 | ### Viewing the new App Service in the Azure Portal 155 | 156 | 1. In VS Code, right-click on the App Service to open the context menu. Select the `Open in Portal` option to open the new App Service in the Azure Portal. 157 | 158 | ![Browse the resource](media/27-browse-resource-command.png) 159 | 160 | 1. Once you select an App Service to view within VS Code it'll open directly in the Azure portal in your default browser. Click the link in the portal's overview section to open the new App Service in a separate tab. 161 | 162 | ![The resource open in the portal](media/29-resource-in-portal.png) 163 | 164 | 1. The App Service should open in your browser, displaying the default App Service start page. 165 | 166 | ![App Service start page](media/30-start-page-in-browser.png) 167 | 168 | ## Use Team Services to Enable Continuous Deployment 169 | 170 | Now that the app is ready to be deployed we'll set up a new Team Services project and set it up with Git so the code can be easily committed and continuously deployed. 171 | 172 | ### Create the new Team Services Project 173 | 174 | 1. Browse to your Team Services account at [https://{youraccount}.visualstudio.com](https://{youraccount}.visualstudio.com). Give the project a name and click **Create**. 175 | 176 | ![New VSTS project](media/10-new-vsts-project.png) 177 | 178 | 1. If you haven't already created Git credentials click the **Generate Git credentials** button, then provide a username and password to be used when interacting with this project. Then, click the **Copy clone url to clipboard** button as shown below. 179 | 180 | ![Copy Git URL](media/11-copy-clone-url.png) 181 | 182 | 1. At a command prompt in your project's folder, type the command `git init` to initialize a new repository locally. Then, type `git remote add origin {copied URL}` to add the remote to your local repository. Then, `add` and `commit` the files to the repository. Finally, use `git push origin master` to push the Express app code up to the VSTS project's Git repository. 183 | 184 | ![Pushing code](media/12-git-commit.png) 185 | 186 | 1. Click on the **Code** tab in your Team Services browser. 187 | 188 | ![Code tab](media/13-code-displayed.png) 189 | 190 | ### Create the Build Definition 191 | 192 | 1. Click the **Set up build** button in the **Files** page in the browser. 193 | 194 | ![The new build definition button](media/14-click-the-button.png) 195 | 196 | 1. Find the build template named **NodeJS with Gulp** and click the **Apply** button. 197 | 198 | ![Start with Gulp](media/15-start-with-gulp.png) 199 | 200 | 1. Give the build definition the name `DevDeploy` and select **Hosted** from the **Default agent queue** menu. 201 | 202 | ![Name the build](media/16-name-select-hosted.png) 203 | 204 | 1. Click the **Copy Publish Artifact: drop** build task to see the details of this task. 205 | 206 | ![Drop file](media/17-drop-file.png) 207 | 208 | 1. Click the **Add Task** button under the list of build tasks. Select the **Azure App Service Deploy** task and click the **Add** button next to it. 209 | 210 | ![New App Service Deploy task](media/31-new-app-service-deploy-task.png) 211 | 212 | 1. Note that the **Azure subscription** and **App Service name** menus are both required. 213 | 214 | ![Set up the deploy parameters](media/32-select-sub.png) 215 | 216 | 1. Select the Azure subscription in which your destination App Service is housed. 217 | 218 | ![Select an Azure subscription](media/33-sub-menu.png) 219 | 220 | 1. Select the App Service you created earlier within VS Code to use as the deployment target for your Node.js source code. 221 | 222 | ![App selected](media/35-app-selected.png) 223 | 224 | 1. Click the previous build task (the "Copy Publish Artifact: drop" task) and take note of the **Copy root** and **Contents** text boxes. 225 | 226 | ![Copy the build file path](media/36-copy-build-file-path.png) 227 | 228 | 1. Once you've copied these two value and pasted them both into the Deploy build task, the value of the task's **Package or folder** textbox should represent the full path the ZIP file being built by your VSTS build. 229 | 230 | ![Paste the drop file path](media/37-paste-build-file.png) 231 | 232 | 1. Check the checkbox labelled **Generate Web.config** to enable that section of the task window. Then click the ellipse button next to the text box to open up the **Web.config parameters** dialog. 233 | 234 | ![Web.config file changes](media/38-need-web-config-changes.png) 235 | 236 | 1. Select **node** from the Web.config parameters screen's **Application framework** menu. Then, change the **NodeStartFile** value to be `app.js` since the Express app's default filename is `app.js`. 237 | 238 | ![Specify the Node.js start file](media/39-specify-app-js-filename.png) 239 | 240 | ### Run the Build 241 | 242 | Now the build definition is complete running it will result in the code being deployed to the Azure App Service. 243 | 244 | 1. To kick off the manual build, click the **Save and Queue** spin button in the build definition page. Then, select the **Save and queue** option to save the definition and trigger the build. 245 | 246 | ![Save and queue](media/40-save-and-queue.png) 247 | 248 | 1. Click the **Queue** button on the **Queue build for deploy** dialog. 249 | 250 | ![Queue window](media/41-queue-window.png) 251 | 252 | 1. Click the queued build link to drill into the running build. 253 | 254 | ![Queue build notification](media/42-build-queued-notification.png) 255 | 256 | 1. The build log is visible in the browser. 257 | 258 | ![Build running](media/43-build-running.png) 259 | 260 | 1. Wait until the build has completed. 261 | 262 | ![Build completed](media/44-build-completed.png) 263 | 264 | 1. Open up a browser (or refresh the already-open browser tab) on the App Service URL. 265 | 266 | ![App deployed](media/45-app-deployed.png) 267 | 268 | ### Enabling triggered builds 269 | 270 | 1. Click the **Triggers** tab in Team Services. 271 | 272 | ![Enable build triggers](media/46-enable-trigger.png) 273 | 274 | 1. Edit the code in `controllers/home.js` so that the `articles` variable in the `get` method is instantiated using the code below. 275 | 276 | ```javascript 277 | var articles = [ 278 | new Article({ 279 | 'title': 'First Article', 280 | 'text' : 'This is the text of the first article' 281 | }), 282 | new Article({ 283 | 'title': 'Second Article', 284 | 'text' : 'This is the text of the second article' 285 | }) 286 | ]; 287 | ``` 288 | 289 | ![Edit controller code](media/47-edit-controller-code.png) 290 | 291 | 1. Edit the code in `view\index.handlebars` to add a `dl` list containing a presentation of the articles in the view model. 292 | 293 | ```handlebars 294 | {% raw %} 295 |
296 | {{#each articles}} 297 |
{{title}}
298 |
{{text}}
299 | {{/each}} 300 |
301 | {% endraw %} 302 | ```` 303 | 304 | ![Edit view code](media/48-edit-view-code.png) 305 | 306 | 1. Commit the code to the repository. 307 | 308 | ![Commit to Git](media/49-commit-to-git.png) 309 | 310 | 1. Go back to the build definition in Team Services and take note that a new build has been queued. 311 | 312 | ![New build queued](media/50-new-build-queued.png) 313 | 314 | 1. Refresh the site in the browser. 315 | 316 | ![New updates deployed](media/51-new-changes-deployed.png) 317 | --------------------------------------------------------------------------------