{"id":22363,"date":"2018-07-31T12:15:44","date_gmt":"2018-07-31T09:15:44","guid":{"rendered":"https:\/\/www.webcodegeeks.com\/?p=22363"},"modified":"2018-07-30T15:34:11","modified_gmt":"2018-07-30T12:34:11","slug":"deploy-angular-app-visual-studio-azure","status":"publish","type":"post","link":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/","title":{"rendered":"Deploy an Angular App from Visual Studio Code to Azure"},"content":{"rendered":"<p>What do you get when you mix Angular 6, Node 10, Visual Studio Code and Azure?<\/p>\n<p>A really quick and slick way to develop and deploy a web application using the latest and greatest technologies. Keep reading to find out how.<\/p>\n<p>This article will discuss how to:<\/p>\n<ul>\n<li>Setup a free Node server on the cloud using Azure App Service<\/li>\n<li>Build a basic Angular 6 web app running on Node 10<\/li>\n<li>Use Visual Studio Code to deploy the web app from a local development machine to Azure<\/li>\n<\/ul>\n<h2>Prerequisites<\/h2>\n<p>You will need a free Microsoft Azure account with any Azure subscription. If you don\u2019t have a paid subscription, a Pay-As-You-Go subscription is fine. All Azure services used in this article are free for development and testing purposes.<\/p>\n<p>You will also need the following tools installed on your development machine:<\/p>\n<ul>\n<li>Recent version of Visual Studio Code<\/li>\n<li>Node 10.6.x<\/li>\n<li>Angular CLI 6.x<\/li>\n<\/ul>\n<p><i>The instructions in this article assume Visual Studio Code v1.28, Node 10.6.0 and Angular CLI v6.1.1 although other versions may work too.<\/i><\/p>\n<h2>Set Up a New Web App on Azure<\/h2>\n<p>The first thing to do is setup the Web App (server) on the Azure cloud. The <a href=\"https:\/\/portal.azure.com\/\">Azure portal<\/a> or the <a href=\"https:\/\/docs.microsoft.com\/en-us\/cli\/azure\/install-azure-cli?view=azure-cli-latest\">Azure CLI<\/a> can be used to create a new Web App. This article will demonstrate how to setup a server using the Azure portal.<\/p>\n<p>To setup a Node.js server on Azure, you will need to create an <i>App Service plan<\/i> and a <i>Web<\/i> A<i>pp<\/i>. The App Service plan will be created on the <i>F1 Free <\/i>tier which provides a basic free virtual server suitable for development (1 GB ram, 1 hour CPU time \/ day).<\/p>\n<p>To create the App Service plan:<\/p>\n<ol>\n<li>Locate \u201cApp Service plan\u201d using the resource search in the Azure Portal<a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/createazureappservice_appserviceplan.png\"><img decoding=\"async\" class=\"aligncenter wp-image-22365 size-full\" style=\"border: none;\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/createazureappservice_appserviceplan.png\" alt=\"Angular\" width=\"676\" height=\"243\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/createazureappservice_appserviceplan.png 676w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/createazureappservice_appserviceplan-300x108.png 300w\" sizes=\"(max-width: 676px) 100vw, 676px\" \/><\/a><\/li>\n<li>Fill in the App Service plan name, Resource Group and make sure you select the \u201cF1 Free\u201d pricing tier. The free pricing tier can be found under the \u201cDev \/ Test\u201d tab.<a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/createazureappservice_appserviceplan21.png\"><img decoding=\"async\" class=\"aligncenter wp-image-22366 size-full\" style=\"border: none;\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/createazureappservice_appserviceplan21.png\" alt=\"Angular\" width=\"254\" height=\"368\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/createazureappservice_appserviceplan21.png 254w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/createazureappservice_appserviceplan21-207x300.png 207w\" sizes=\"(max-width: 254px) 100vw, 254px\" \/><\/a><\/li>\n<\/ol>\n<p>To create your Web App:<\/p>\n<ol>\n<li>Locate \u201cWeb App\u201d using the resource search in the Azure Portal<a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/createazureappservice_webapp.png\"><img decoding=\"async\" class=\"aligncenter wp-image-22367 size-full\" style=\"border: none;\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/createazureappservice_webapp.png\" alt=\"Angular\" width=\"676\" height=\"246\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/createazureappservice_webapp.png 676w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/createazureappservice_webapp-300x109.png 300w\" sizes=\"(max-width: 676px) 100vw, 676px\" \/><\/a><\/li>\n<li>Fill in the App name, Resource Group and make sure the App Service plan you previously created is selected.<a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/createazureappservice_webapp21.png\"><img decoding=\"async\" class=\"aligncenter wp-image-22368 size-full\" style=\"border: none;\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/createazureappservice_webapp21.png\" alt=\"Angular\" width=\"290\" height=\"432\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/createazureappservice_webapp21.png 290w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/createazureappservice_webapp21-201x300.png 201w\" sizes=\"(max-width: 290px) 100vw, 290px\" \/><\/a><\/li>\n<\/ol>\n<p>You should now see your App Service plan and Web App on your Azure dashboard.<\/p>\n<p>The web server is now ready.<\/p>\n<p>You might be wondering why you don\u2019t have to specify the type of web server to use when creating an Azure Web App. This is because Azure Web Apps conveniently support .NET, .NET Core, Java, Node.js, PHP and static HTML websites out of the box.<\/p>\n<h2>Set up Local Development Environment<\/h2>\n<p>The next step is to set up a local development environment including a local Node.js server, an Angular 6 application, Visual Studio Code and the Azure App Service extension.<\/p>\n<h3>The Local Node.js Server<\/h3>\n<p>A Node.js server needs to be installed on your development machine to build and test locally. I recommend that you use the <a href=\"https:\/\/github.com\/coreybutler\/nvm-windows\">Node Version Manager (NVM)<\/a> command-line utility to manage and switch between multiple Node.js versions installed on your development machine. If you have NVM installed, installing the right version of Node.js is as simple as running these commands:<\/p>\n<pre class=\" brush:php\">nvm install 10.6.0 64\r\nnvm use 10.6.0<\/pre>\n<p>You should always make sure that your local server and remote server versions are in sync. Azure Web Apps support many versions of Node.js including v10.6.0.<\/p>\n<h3>The Angular App<\/h3>\n<p>You can generate an Angular 6.x app shell using the Angular CLI:<\/p>\n<pre class=\" brush:php\">npm install -g @angular\/cli\r\nnpm new canadian-maple<\/pre>\n<p>Alternatively, if you want to work with something a little more flashier and Canadian then clone the official <a href=\"https:\/\/github.com\/briandesousa\/canadian-maple\">Canadian Maple app from GitHub<\/a>. The rest of this article will assume you did!<\/p>\n<h3>Visual Studio Code<\/h3>\n<p>Visual Studio Code combined with the <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ms-azuretools.vscode-azureappservice\">Azure App Service extension<\/a> can be used to develop, package and deploy the web app to Azure cloud.<\/p>\n<p>Open up Visual Studio Code in the directory of your Angular app. Use the <i>ng serve<\/i> command in the integrated terminal (CTRL-~ shortcut) to run and verify your app.<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/vscode_canadianmapleapprunning.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-22369\" style=\"border: none;\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/vscode_canadianmapleapprunning.png\" alt=\"\" width=\"676\" height=\"400\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/vscode_canadianmapleapprunning.png 676w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/vscode_canadianmapleapprunning-300x178.png 300w\" sizes=\"(max-width: 676px) 100vw, 676px\" \/><\/a><\/p>\n<h3>Azure App Service Extension<\/h3>\n<p>Install the <a href=\"https:\/\/marketplace.visualstudio.com\/items?itemName=ms-azuretools.vscode-azureappservice\">Azure App Service extension<\/a> from the Visual Studio Code marketplace. After installing the extension and reloading Visual Studio Code, you will notice a new Azure icon in the left navigation bar. Click on the Azure icon to open the extension and select the option to sign into Azure.<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/vscode_azureappserviceextension.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-22370\" style=\"border: none;\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/vscode_azureappserviceextension.png\" alt=\"\" width=\"676\" height=\"490\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/vscode_azureappserviceextension.png 676w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/vscode_azureappserviceextension-300x217.png 300w\" sizes=\"(max-width: 676px) 100vw, 676px\" \/><\/a><\/p>\n<p>After signing into Azure, you will see the \u201ccanadianmaple\u201d Web App that was created previously.<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/vscode_azureappserviceextension_signedin.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-22371\" style=\"border: none;\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/vscode_azureappserviceextension_signedin.png\" alt=\"\" width=\"322\" height=\"314\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/vscode_azureappserviceextension_signedin.png 322w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/vscode_azureappserviceextension_signedin-300x293.png 300w\" sizes=\"(max-width: 322px) 100vw, 322px\" \/><\/a><\/p>\n<p>You might notice that there is a \u201cCreate New Web App\u201d option right in the Azure App Service extension. This feature makes it incredibly easy to setup a new Web App on Azure without the portal. By default, the extension makes some assumptions and auto-generates names for certain resources like the App Service plan. Enabling the <i>appService.advancedCreation<\/i> in Visual Studio Code settings allows you to specify more options manually.<\/p>\n<p>This article purposely demonstrates using the Azure portal to help gain some experience finding your way around the portal interface.<\/p>\n<h2>Update Node Version on Azure Web App<\/h2>\n<p>Chances are the default version of Node on the Azure Web App is not the version that you want to use. Luckily, the version of node can be changed with the WEBSITE_NODE_DEFAULT_VERSION environment variable. Navigate to the Application settings section of the Application settings page for your Azure Web App. Click on the environment variable value to change it to 10.6.0.<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/azureportal_appsettings_nodeversion.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-22372\" style=\"border: none;\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/azureportal_appsettings_nodeversion.png\" alt=\"\" width=\"676\" height=\"285\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/azureportal_appsettings_nodeversion.png 676w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/azureportal_appsettings_nodeversion-300x126.png 300w\" sizes=\"(max-width: 676px) 100vw, 676px\" \/><\/a><\/p>\n<p>Application settings can also be modified using the Azure App Service extension from within Visual Studio Code.<\/p>\n<p>After changing the Node version, you can verify that the setting took effect by using the Console development tool and issuing the <i>node -v<\/i> command:<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/azureportal_appsettings_nodeversion2.png\"><img decoding=\"async\" class=\"aligncenter size-full wp-image-22373\" style=\"border: none;\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/azureportal_appsettings_nodeversion2.png\" alt=\"\" width=\"676\" height=\"410\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/azureportal_appsettings_nodeversion2.png 676w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/azureportal_appsettings_nodeversion2-300x182.png 300w\" sizes=\"(max-width: 676px) 100vw, 676px\" \/><\/a><\/p>\n<h2>Deploying the App<\/h2>\n<p>Build the web application before deploying with the <i>ng build<\/i> command. This command will create the <i>dist\/canadian-maple<\/i> directory containing a transpiled, minified, ready-to-deploy version of your application.<\/p>\n<p>Deploying to an Azure Web App is as simple as right-clicking on the web app in the Azure App Service extension and selecting the \u201cDeploy to Web App\u201d option. The extension will make a suggestion on what to deploy but use the Browse option to select the <i>dist\/canadian-maple<\/i> folder instead.<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/vscode_deploynodeapptoazure.png\"><img decoding=\"async\" class=\"aligncenter wp-image-22374 size-full\" style=\"border: none;\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/vscode_deploynodeapptoazure.png\" alt=\"Angular\" width=\"658\" height=\"208\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/vscode_deploynodeapptoazure.png 658w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/vscode_deploynodeapptoazure-300x95.png 300w\" sizes=\"(max-width: 658px) 100vw, 658px\" \/><\/a><\/p>\n<p>You will see a few prompts and notifications:<\/p>\n<ul>\n<li>Select Yes on the \u201cAre you sure you want to deploy\u2026\u201d dialog to overwrite any previous deployments you may have done to your Azure Web App.<\/li>\n<li>Select Yes on the \u201cAlways deploy the workspace\u2026\u201d notification to save some time on subsequent deployments. The deployment path and Azure Web App name will be saved to the .settings file in the workspace. Next tie you deploy, you will not be prompted for this information.<\/li>\n<\/ul>\n<p>Once the deployment is complete, you will receive a notification with a convenient button to browse to the site.<\/p>\n<p><a href=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/vscode_deploynodeapptoazure2.png\"><img decoding=\"async\" class=\"aligncenter wp-image-22375 size-full\" style=\"border: none;\" src=\"http:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/vscode_deploynodeapptoazure2.png\" alt=\"Angular\" width=\"451\" height=\"108\" srcset=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/vscode_deploynodeapptoazure2.png 451w, https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2018\/07\/vscode_deploynodeapptoazure2-300x72.png 300w\" sizes=\"(max-width: 451px) 100vw, 451px\" \/><\/a><\/p>\n<p>You have just deployed an Angular 6 app running on Node 10.6.0 to the Azure cloud\u2026 relatively painlessly! Check out <a href=\"http:\/\/canadianmaple.azurewebsites.net\" rel=\"nofollow\">http:\/\/canadianmaple.azurewebsites.net<\/a> to see a live example.<\/p>\n<h2>Recap<\/h2>\n<p>Let\u2019s recap what has been accomplished:<\/p>\n<ul>\n<li>Developed an Angular 6 web application in Visual Studio Code<\/li>\n<li>Ran the web app on Node 10.6.0<\/li>\n<li>Built the web app using the Angular CLI<\/li>\n<li>Created an Azure App Service plan and Web App using the Azure portal<\/li>\n<li>Modified Web App settings in the Azure portal<\/li>\n<li>Used the Azure App Service extension in Visual Studio Code to deploy the web app<\/li>\n<\/ul>\n<p>Now wasn\u2019t that fast and painless?<\/p>\n<div class=\"attribution\">\n<table>\n<tbody>\n<tr>\n<td>Published on Web Code Geeks with permission by Brian De Sousa, partner at our <a href=\"\/\/www.webcodegeeks.com\/join-us\/wcg\/\" target=\"_blank\" rel=\"noopener\">WCG program<\/a>. See the original article here: <a href=\"https:\/\/briandesousa1.wordpress.com\/2018\/07\/30\/deploy-angular-app-from-vs-code-to-azure\/\" target=\"_blank\" rel=\"noopener\">Deploy an Angular App from Visual Studio Code to Azure<\/a><\/p>\n<p>Opinions expressed by Web Code Geeks contributors are their own.<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>What do you get when you mix Angular 6, Node 10, Visual Studio Code and Azure? A really quick and slick way to develop and deploy a web application using the latest and greatest technologies. Keep reading to find out how. This article will discuss how to: Setup a free Node server on the cloud &hellip;<\/p>\n","protected":false},"author":141,"featured_media":909,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[25],"tags":[539,540],"class_list":["post-22363","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-angular-js","tag-azure","tag-visual-studio"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v26.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>Deploy an Angular App from Visual Studio Code to Azure - Web Code Geeks - 2026<\/title>\n<meta name=\"description\" content=\"Interested to learn more about angular? Check out our article where we deploy an angular app from visual studio to azure!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Deploy an Angular App from Visual Studio Code to Azure - Web Code Geeks - 2026\" \/>\n<meta property=\"og:description\" content=\"Interested to learn more about angular? Check out our article where we deploy an angular app from visual studio to azure!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Code Geeks\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webcodegeeks\" \/>\n<meta property=\"article:published_time\" content=\"2018-07-31T09:15:44+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"150\" \/>\n\t<meta property=\"og:image:height\" content=\"150\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Brian De Sousa\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@briandesousa1\" \/>\n<meta name=\"twitter:site\" content=\"@webcodegeeks\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Brian De Sousa\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/\"},\"author\":{\"name\":\"Brian De Sousa\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/b3add10a27821f3334ef6ea4517afa38\"},\"headline\":\"Deploy an Angular App from Visual Studio Code to Azure\",\"datePublished\":\"2018-07-31T09:15:44+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/\"},\"wordCount\":1254,\"commentCount\":2,\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"keywords\":[\"Azure\",\"Visual Studio\"],\"articleSection\":[\"Angular.js\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/\",\"name\":\"Deploy an Angular App from Visual Studio Code to Azure - Web Code Geeks - 2026\",\"isPartOf\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"datePublished\":\"2018-07-31T09:15:44+00:00\",\"description\":\"Interested to learn more about angular? Check out our article where we deploy an angular app from visual studio to azure!\",\"breadcrumb\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/#primaryimage\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg\",\"width\":150,\"height\":150},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.webcodegeeks.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"JavaScript\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Angular.js\",\"item\":\"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/\"},{\"@type\":\"ListItem\",\"position\":4,\"name\":\"Deploy an Angular App from Visual Studio Code to Azure\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#website\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"name\":\"Web Code Geeks\",\"description\":\"Web Developers Resource Center\",\"publisher\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.webcodegeeks.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#organization\",\"name\":\"Exelixis Media P.C.\",\"url\":\"https:\/\/www.webcodegeeks.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"contentUrl\":\"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png\",\"width\":864,\"height\":246,\"caption\":\"Exelixis Media P.C.\"},\"image\":{\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webcodegeeks\",\"https:\/\/x.com\/webcodegeeks\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/b3add10a27821f3334ef6ea4517afa38\",\"name\":\"Brian De Sousa\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/e6d9ee737fde3578595268395d83bed5675158601972fb206794255c46798404?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/e6d9ee737fde3578595268395d83bed5675158601972fb206794255c46798404?s=96&d=mm&r=g\",\"caption\":\"Brian De Sousa\"},\"description\":\"Brian De Sousa is a senior software developer working in the financial industry. He has over 10 years of experience developing web applications with a variety of web technologies. He has a passion for developing solutions using the latest and greatest technologies and frameworks.\",\"sameAs\":[\"https:\/\/briandesousa1.wordpress.com\/\",\"https:\/\/www.linkedin.com\/in\/briandesousa?trk=hp-identity-name\",\"https:\/\/x.com\/briandesousa1\"],\"url\":\"https:\/\/www.webcodegeeks.com\/author\/brian-de-sousa\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Deploy an Angular App from Visual Studio Code to Azure - Web Code Geeks - 2026","description":"Interested to learn more about angular? Check out our article where we deploy an angular app from visual studio to azure!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/","og_locale":"en_US","og_type":"article","og_title":"Deploy an Angular App from Visual Studio Code to Azure - Web Code Geeks - 2026","og_description":"Interested to learn more about angular? Check out our article where we deploy an angular app from visual studio to azure!","og_url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/","og_site_name":"Web Code Geeks","article_publisher":"https:\/\/www.facebook.com\/webcodegeeks","article_published_time":"2018-07-31T09:15:44+00:00","og_image":[{"width":150,"height":150,"url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","type":"image\/jpeg"}],"author":"Brian De Sousa","twitter_card":"summary_large_image","twitter_creator":"@briandesousa1","twitter_site":"@webcodegeeks","twitter_misc":{"Written by":"Brian De Sousa","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/#article","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/"},"author":{"name":"Brian De Sousa","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/b3add10a27821f3334ef6ea4517afa38"},"headline":"Deploy an Angular App from Visual Studio Code to Azure","datePublished":"2018-07-31T09:15:44+00:00","mainEntityOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/"},"wordCount":1254,"commentCount":2,"publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","keywords":["Azure","Visual Studio"],"articleSection":["Angular.js"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/","url":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/","name":"Deploy an Angular App from Visual Studio Code to Azure - Web Code Geeks - 2026","isPartOf":{"@id":"https:\/\/www.webcodegeeks.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/#primaryimage"},"image":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/#primaryimage"},"thumbnailUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","datePublished":"2018-07-31T09:15:44+00:00","description":"Interested to learn more about angular? Check out our article where we deploy an angular app from visual studio to azure!","breadcrumb":{"@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/#primaryimage","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2014\/10\/angularjs-logo.jpg","width":150,"height":150},{"@type":"BreadcrumbList","@id":"https:\/\/www.webcodegeeks.com\/javascript\/angular-js\/deploy-angular-app-visual-studio-azure\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.webcodegeeks.com\/"},{"@type":"ListItem","position":2,"name":"JavaScript","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/"},{"@type":"ListItem","position":3,"name":"Angular.js","item":"https:\/\/www.webcodegeeks.com\/category\/javascript\/angular-js\/"},{"@type":"ListItem","position":4,"name":"Deploy an Angular App from Visual Studio Code to Azure"}]},{"@type":"WebSite","@id":"https:\/\/www.webcodegeeks.com\/#website","url":"https:\/\/www.webcodegeeks.com\/","name":"Web Code Geeks","description":"Web Developers Resource Center","publisher":{"@id":"https:\/\/www.webcodegeeks.com\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.webcodegeeks.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/www.webcodegeeks.com\/#organization","name":"Exelixis Media P.C.","url":"https:\/\/www.webcodegeeks.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/","url":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","contentUrl":"https:\/\/www.webcodegeeks.com\/wp-content\/uploads\/2022\/06\/exelixis-logo.png","width":864,"height":246,"caption":"Exelixis Media P.C."},"image":{"@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webcodegeeks","https:\/\/x.com\/webcodegeeks"]},{"@type":"Person","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/b3add10a27821f3334ef6ea4517afa38","name":"Brian De Sousa","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.webcodegeeks.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/e6d9ee737fde3578595268395d83bed5675158601972fb206794255c46798404?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/e6d9ee737fde3578595268395d83bed5675158601972fb206794255c46798404?s=96&d=mm&r=g","caption":"Brian De Sousa"},"description":"Brian De Sousa is a senior software developer working in the financial industry. He has over 10 years of experience developing web applications with a variety of web technologies. He has a passion for developing solutions using the latest and greatest technologies and frameworks.","sameAs":["https:\/\/briandesousa1.wordpress.com\/","https:\/\/www.linkedin.com\/in\/briandesousa?trk=hp-identity-name","https:\/\/x.com\/briandesousa1"],"url":"https:\/\/www.webcodegeeks.com\/author\/brian-de-sousa\/"}]}},"_links":{"self":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/22363","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/users\/141"}],"replies":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/comments?post=22363"}],"version-history":[{"count":0,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/posts\/22363\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media\/909"}],"wp:attachment":[{"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/media?parent=22363"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/categories?post=22363"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.webcodegeeks.com\/wp-json\/wp\/v2\/tags?post=22363"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}