{"id":29545,"date":"2017-04-17T11:11:37","date_gmt":"2017-04-17T19:11:37","guid":{"rendered":"https:\/\/blogs.msdn.microsoft.com\/visualstudioalm\/?p=29545"},"modified":"2019-02-14T15:55:35","modified_gmt":"2019-02-14T23:55:35","slug":"deploy-node-js-applications-to-azure-app-service","status":"publish","type":"post","link":"https:\/\/devblogs.microsoft.com\/devops\/deploy-node-js-applications-to-azure-app-service\/","title":{"rendered":"Deploy Node.js applications to Azure App Service"},"content":{"rendered":"<p>This blog post shows how you can deploy a new Node.js application from Visual Studio Team Services or Microsoft Team Foundation Server to Azure App Service.<\/p>\n<h2>Code<\/h2>\n<ul>\n<li><a href=\"http:\/\/download.microsoft.com\/download\/5\/C\/4\/5C4CB575-D022-4BB8-9E95-5A2958C83CD2\/nodejs-express-hello-world-app.zip\">Download our Node.js Hello World sample app<\/a> or Install <a href=\"https:\/\/www.visualstudio.com\/en-us\/features\/node-js-vs.aspx\">Node.js Tools for Visual Studio<\/a> and create a new Node.js application.<\/li>\n<li>Upload your code to Team Services or your on-premises Team Foundation Server: either push your code to Git or check in your code to TFVC.<\/li>\n<\/ul>\n<h2>Build<\/h2>\n<ol>\n<li><a href=\"https:\/\/www.visualstudio.com\/en-in\/docs\/build\/apps\/node\/nodejs-to-azure#expando-begin-create-build-definition-open-team-project\">Open your team project in your web browser <\/a>(If you don&#8217;t see your team project listed on the home page, select <strong>Browse<\/strong>.)<\/li>\n<\/ol>\n<ul>\n<li>On-premises TFS: http:\/\/{your_server}:8080\/tfs\/DefaultCollection\/{your_team_project}<\/li>\n<li>Visual Studio Team Services: https:\/\/{your_account}.visualstudio.com\/DefaultCollection\/{your_team_project}<\/li>\n<\/ul>\n<ol start=\"2\">\n<li><a href=\"https:\/\/www.visualstudio.com\/en-in\/docs\/build\/apps\/node\/nodejs-to-azure#expando-begin-create-build-definition-create\">Create a build definition (Build &amp; Release tab &gt; Builds)<\/a><\/li>\n<\/ol>\n<p style=\"padding-left: 60px\"><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/6\/2019\/05\/BuildDefinition.png\"><img decoding=\"async\" width=\"500\" height=\"82\" class=\"size-mediumlarge wp-image-29595 alignleft\" alt=\"builddefinition\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2017\/04\/BuildDefinition-500x82.png\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<p>&nbsp;<\/p>\n<ul>\n<li>Click Empty to start with an empty definition.<\/li>\n<li>In the repository tab of build definition make sure the repository selected is the one where you pushed (Git) or checked in (TFVC) your code<\/li>\n<\/ul>\n<h3>Add the build steps<\/h3>\n<p>On the<span>\u00a0<\/span><strong>Tasks<\/strong><span>\u00a0<\/span>or<span>\u00a0<\/span><strong>Build<\/strong><span>\u00a0<\/span>tab, add these steps.<\/p>\n<table>\n<tbody>\n<tr>\n<td><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/6\/2019\/05\/NPM.png\"><img decoding=\"async\" width=\"32\" height=\"32\" alt=\"npm\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2017\/04\/NPM.png\" \/><\/a><strong>Package: npm install<\/strong><\/td>\n<td>Install your npm package dependencies.<\/p>\n<ul>\n<li>Command:<span>\u00a0<\/span>install<\/li>\n<li>Set the working folder to the folder where your application code is committed in the repository<\/li>\n<\/ul>\n<p>For example, in case of<a href=\"http:\/\/download.microsoft.com\/download\/5\/C\/4\/5C4CB575-D022-4BB8-9E95-5A2958C83CD2\/nodejs-express-hello-world-app.zip\"> sample app<\/a> it will be nodejs-express-hello-world-app<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/6\/2019\/05\/Gulp.png\"><img decoding=\"async\" width=\"32\" height=\"32\" alt=\"gulp\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2017\/04\/Gulp.png\" \/><\/a><strong>Build: Gulp<\/strong><\/td>\n<td>Pack your files into a .zip file.<\/p>\n<ul>\n<li>Gulp File Path:<span>\u00a0<\/span>gulpfile.js<\/li>\n<li>Advanced, Arguments:<span>\u00a0<\/span>&#8211;packageName=$(Build.BuildId).zip &#8211;packagePath=$(Build.ArtifactStagingDirectory)<\/li>\n<li>Set the Gulp file path. For example, in case of <a href=\"http:\/\/download.microsoft.com\/download\/5\/C\/4\/5C4CB575-D022-4BB8-9E95-5A2958C83CD2\/nodejs-express-hello-world-app.zip\">sample app<\/a> it will be nodejs-express-hello-world-app\/gulpfile.js<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<tr>\n<td><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/6\/2019\/05\/PublishBuild.png\"><img decoding=\"async\" width=\"32\" height=\"32\" alt=\"publishbuild\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2017\/04\/PublishBuild.png\" \/><\/a><strong>Build: Publish Build Artifacts<\/strong><\/td>\n<td>Publish the build outputs, such as the .zip file as we do in the example below.<\/p>\n<ul>\n<li>Copy Root:<span>\u00a0<\/span>$(Build.ArtifactStagingDirectory)<\/li>\n<li>Contents:<span>\u00a0<\/span>$(Build.BuildId).zip<\/li>\n<li>Artifact name:<span>\u00a0<\/span>drop<\/li>\n<li>Artifact Type:<span>\u00a0<\/span>Server<\/li>\n<\/ul>\n<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<h3>Enable continuous integration (CI)<\/h3>\n<p>On the<span>\u00a0<\/span><strong>Triggers<\/strong><span>\u00a0<\/span>tab, enable<span>\u00a0<\/span><strong>Continuous integration<\/strong><span>\u00a0<\/span>(CI). This tells the system to queue a build whenever someone on your team commits or checks in new code.<\/p>\n<h3>Save, queue, and test the build<\/h3>\n<p>Save and queue the build. Once the build is done, click the link to the completed build (for example,<span>\u00a0<\/span><em>Build 1634<\/em>), click<span>\u00a0<\/span><strong>Artifacts<\/strong>, and then click<span>\u00a0<\/span><strong>Explore<\/strong><span>\u00a0<\/span>to see the .zip file produced by the build. This is the web deploy package that your release definition will consume to deploy your app.<\/p>\n<h2>Release<\/h2>\n<ol>\n<li>Open the <span><\/span><strong>Releases<\/strong><span>\u00a0<\/span>tab of the<span>\u00a0<\/span><strong>Build &amp; Release<\/strong><span>\u00a0<\/span>hub, open the<span>\u00a0<\/span><strong>+<\/strong><span>\u00a0<\/span>drop-down in the list of release definitions, and choose<span>\u00a0<\/span><strong>Create release definition<\/strong><\/li>\n<li>In the DEPLOYMENT TEMPLATES dialog, select the <span><\/span><strong>Azure App Service Deployment<\/strong><span>\u00a0<\/span>template and choose<span>\u00a0<\/span><strong>OK<\/strong>.<\/li>\n<\/ol>\n<p style=\"padding-left: 60px\"><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/6\/2019\/05\/CreateRD.png\"><img decoding=\"async\" width=\"500\" height=\"219\" class=\"size-mediumlarge wp-image-29555 alignnone\" alt=\"createrd\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2017\/04\/CreateRD-500x219.png\" \/><\/a><\/p>\n<ol start=\"3\">\n<li>Select the build definition you created earlier as the source of artifact to be deployed.<\/li>\n<\/ol>\n<p style=\"padding-left: 60px\"><a href=\"https:\/\/devblogs.microsoft.com\/wp-content\/uploads\/sites\/6\/2019\/05\/CreateRD2.png\"><img decoding=\"async\" width=\"500\" height=\"335\" class=\"size-mediumlarge wp-image-29556 alignnone\" alt=\"createrd2\" src=\"https:\/\/devblogs.microsoft.com\/devops\/wp-content\/uploads\/sites\/6\/2017\/04\/CreateRD2-500x335.png\" \/><\/a><\/p>\n<ol start=\"4\">\n<li>Configure the <strong>Azure App Service Deployment <\/strong>task:\n<table style=\"width: 100%\">\n<tbody>\n<tr>\n<td><a href=\"https:\/\/www.visualstudio.com\/en-in\/docs\/build\/steps\/deploy\/azure-app-service-deploy\">Deploy: Azure App Service Deploy<\/a><\/td>\n<td>\n<ul>\n<li><strong>Azure Subscription:<\/strong><span>\u00a0<\/span>Select a connection from the list under<span>\u00a0<\/span><strong>Available Azure Service Connections<\/strong>. If no connections appear, choose<span>\u00a0<\/span><strong>Manage<\/strong>, select<span>\u00a0<\/span><strong>New Service Endpoint | Azure Resource Manager<\/strong>, and follow the prompts. Then return to your release definition, refresh the<span>\u00a0<\/span><strong>Azure Subscription<\/strong><span>\u00a0<\/span>list, and select the connection you just created.\n<strong>Note<\/strong>: If your Azure subscription is defined in an Azure Government Cloud, ensure your deployment process meets the relevant compliance requirements. For more details, see<span>\u00a0<\/span><a href=\"https:\/\/www.visualstudio.com\/en-in\/docs\/build\/concepts\/library\/government-cloud\">Azure Government Cloud deployments<\/a>.<\/li>\n<li><strong>App Service Name<\/strong>: the name of the App Service (the part of the URL<span>\u00a0<\/span><em>without<\/em><span>\u00a0<\/span>.azurewebsites.net)<\/li>\n<li><strong>Deploy to Slot<\/strong>: make sure this is cleared (the default)<\/li>\n<li><strong>Virtual Application :<\/strong><span>\u00a0<\/span>leave blank<\/li>\n<li><strong>Package or Folder:<\/strong><span>\u00a0<\/span>$(System.DefaultWorkingDirectory)***.zip<span>\u00a0<\/span>(the default)<\/li>\n<li><strong>Advanced: <\/strong>\n<ul>\n<li><strong>Take App Offline:<\/strong><span>\u00a0<\/span>If you run into locked .DLL problems when you test the release, as explained below, try selecting this check box.<\/li>\n<li><strong>Deployment script:<\/strong> The task gives you additional flexibility to run deployment script on the Azure App Service. For example, you can run a script to update dependencies (node packages) on the Azure App Service instead of packaging the dependencies in the build step.<\/li>\n<li><strong>Generate web.config<\/strong>: In case you are deploying a Node.js application which was not created by using <a href=\"https:\/\/www.visualstudio.com\/en-us\/features\/node-js-vs.aspx\">Node.js Tools for Visual Studio<\/a> then the task will help you generate the web.config required to run the Node apps on Azure App Service.<\/li>\n<\/ul>\n<\/li>\n<\/ul>\n<p>This is required because Windows Azure App Service uses <a href=\"https:\/\/github.com\/tjanczuk\/iisnode\">iisnode<\/a> to host Node.js applications in IIS on Windows<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/li>\n<li>Type a name for the new release definition and, optionally, change the name of the environment from <span><\/span><strong>Default Environment<\/strong><span>\u00a0<\/span>to<span>\u00a0<\/span><strong>Dev<\/strong>. Also, set the deployment condition on the environment to \u201cAutomatically start after release creation\u201d.<\/li>\n<li>Save the new release definition. Create a new release and verify that the application has been deployed correctly.<\/li>\n<\/ol>\n<p>&nbsp;<\/p>\n<h2>Related Topics<\/h2>\n<ol>\n<li><span><\/span><a href=\"https:\/\/www.visualstudio.com\/en-us\/features\/node-js-vs.aspx\">js Tools for Visual Studio<\/a> helps you develop Node.js applications by providing Visual Studio project templates as well as intellisense, debugging and profiling support.<\/li>\n<li>Windows Azure App Service use <a href=\"https:\/\/github.com\/tjanczuk\/iisnode\">iisnode<\/a> to host Node.js applications in IIS on Windows.<\/li>\n<\/ol>\n","protected":false},"excerpt":{"rendered":"<p>This blog post shows how you can deploy a new Node.js application from Visual Studio Team Services or Microsoft Team Foundation Server to Azure App Service. Code Download our Node.js Hello World sample app or Install Node.js Tools for Visual Studio and create a new Node.js application. Upload your code to Team Services or your [&hellip;]<\/p>\n","protected":false},"author":172,"featured_media":45953,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[224,226,1],"tags":[],"class_list":["post-29545","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-azure","category-ci","category-devops"],"acf":[],"blog_post_summary":"<p>This blog post shows how you can deploy a new Node.js application from Visual Studio Team Services or Microsoft Team Foundation Server to Azure App Service. Code Download our Node.js Hello World sample app or Install Node.js Tools for Visual Studio and create a new Node.js application. Upload your code to Team Services or your [&hellip;]<\/p>\n","_links":{"self":[{"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/posts\/29545","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/users\/172"}],"replies":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/comments?post=29545"}],"version-history":[{"count":0,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/posts\/29545\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/media\/45953"}],"wp:attachment":[{"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/media?parent=29545"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/categories?post=29545"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/devblogs.microsoft.com\/devops\/wp-json\/wp\/v2\/tags?post=29545"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}