Deploy Angular 2 with Azure Webapp

Question

How can can I deploy an angular 2 webapp to azure? I guess I need some type of final compilation script.

Thanks in advance.

Solution 1

In order to run angular2 app in azure follow these steps:

1. create a new ng app (with ng cli) : ng new testApp and push to some github repo.
2. create Azure deployment files for Kudu :

npm install azure-cli -g
azure site deploymentscript --node

this will create 2 files .deployment and deploy.cmd

3. edit the deploy.cmd remove the --production from the line

:: 3. Install npm packages

so that all dependencies will be installed (including ng cli)

4. add under the section of :: 3. Install npm packages

this snippet:

echo Handling Angular build   
    :: 4. Build ng app
    IF EXIST "%DEPLOYMENT_TARGET%\package.json" (
      pushd "%DEPLOYMENT_TARGET%"
      call :ExecuteCmd "!NODE_EXE!" ./node_modules/@angular/cli/bin/ng build --prod --env=prod --aot
      IF !ERRORLEVEL! NEQ 0 goto error
      :: the next line is optional to fix 404 error see section #8
      call :ExecuteCmd cp "%DEPLOYMENT_TARGET%"/web.config "%DEPLOYMENT_TARGET%"/dist/
      IF !ERRORLEVEL! NEQ 0 goto error
      popd
    )

5. create a new webapp in azure and bind it to your github repository
   
6. now just change the root of the app in the Azure "Application Settings"
   under "Virtual applications and directories"
   from

site\wwwroot

to

site\wwwroot\dist

7. trigger a deployment. (by pushing to github or manually from the azure portal)
8. (optional) for fixing the 404 when refreshing, you need to add a web.config on the root with this content:

   <?xml version="1.0" encoding="UTF-8"?>
    <configuration>
      <system.webServer>
        <rewrite>
          <rules>
            <rule name="AngularJS" stopProcessing="true">
              <match url=".*" />
              <conditions logicalGrouping="MatchAll">
                <add input="{REQUEST_FILENAME}" matchType="IsFile" negate="true" />
                <add input="{REQUEST_FILENAME}" matchType="IsDirectory" negate="true" />
              </conditions>
              <action type="Rewrite" url="index.html" />
            </rule>
          </rules>
        </rewrite>
      </system.webServer>
    </configuration>

9. open your app .. BOOM!
   

Solution 2

I know this is a bit late but none of the other answers give explicit instructions. Hopefully this can help someone.

I'm assuming you are using Angular-CLI.

Run:

npm install

ng build (depending on your setup you might be able to run npm build)

This creates a folder called ./dist that contains the necessary files for your working website. Then use a script-able FTP client to push all of the content inside of ./dist to the ./site/wwwroot folder of the Azure webapp.

You'll need to use the FTP credentials of the wabapp, as found in the Publish Profile, from your Azure Portal. This Stackoverflow question will hep you with that. Where is "download publish profile" in the new Azure Portal?

Solution 3

I managed to do it successfully without actually doing too much. Here are the steps :

1. I used GitHub as my source control. So, after taking a build of my Angular 4 project with the command ng build on the VS Code terminal, I pushed the entire dist folder (which is generated in the project directory/folder after you run ng build) also to GitHub. If somehow the IDE can't detect the dist folder as changes, you can also manually upload the folder into your GitHub repository. Use the Drag & Drop feature to upload the entire folder.
2. Now get a new App Service created in your Azure Subscription.

3. Go to Deployment Options and choose GitHub, provide credentials, and give the name of the repository you'd be using.

4. Go to Application Settings ,then to Virtual Applications and Directories, and change the root directory to site\wwwroot\dist

5. Now everything is set. Go back to Deployment Options again, and you shall see that a Build is in progress. After updating the code at GitHub repository through check-in, you could just Sync in order to take a fresh build. (P.S : In my case, the new build was automatically triggered after a new check-in to GitHub)

6. Bingo! Now you can access your website on azure. :D

Solution 4

If you need this for Continuous deployment purposes, and you are using git repo, than it's very simple, just follow instructions here Continuous deployment using GIT in Azure App Service.

But, in general, it's not directly related to angular2. Try also this Using Windows PowerShell scripts to publish to dev and test environments capabilities.

angular-cli, which is (or will became) main tool for angular building, testing, deploying, at this time do not have such function, nor requirement (as i know so far). You can request feature on their github.

Solution 5

I can move you part of the way to a solution, but I cannot fully answer your question. So, if the SO monitors want to delete this response, please feel free.

I am trying to get an Angular CLI application to deploy to Azure from Bitbucket. You have two options:

1) Pre-build your application for deployment using a service like Jenkins or Codeship. Shane Boyer has a working solution using Github and Codeship here: http://tattoocoder.com/angular2-azure-codeship-angularcli/

This option seems most desirable b/c you only have compiled code on your server. I am trying to figure out how to work with Jenkins to accomplish this with angular-cli.

2) Copy your code to the server and run the build there. This seems undesirable b/c it will leave source code on your server. I have this option 90% done.

My build was/is failing b/c of missing npm packages.

First, I changed my environment so that it was using a more recent version of Node and this helped. You can do this by opening settings on your Web App and going to Application Settings. In the App settings section of the Application settings tab, you should have a set of key/value pairs. One of those should be for WEBSITE_NODE_DEFAULT_VERSION. On my app, I have access up to version 6.1.0 which I am using. Set yours to the appropriate version. You can also set this in your packages.json file following the instructions here: https://azure.microsoft.com/en-us/documentation/articles/nodejs-specify-node-version-azure-apps/ . Changing it in App settings allows you to use that version in you command line window which I needed to get npm packages installed.

Next, go to your command line and try to install your missing packages. I have had mixed success here. Initially, my build was failing b/c typings was not installed. I was able to install it globally once I had updated Node.

I ran into problems installing angular-cli. I have not gotten a good log of that failure, even using -dd. Essentially, it copies all the files then fails returning a 'bad request' error and no log regardless of the switches I use. I believe it is failing while trying to modify the npm environment to add ng.cmd. I am currently investigating this.

Hopefully, this will move you a little farther along.

Good luck.

View more solutions

Comments

[Daniel Golub]

Well on my computer I just run npm start and it boots up the app. On Azure auto deployment, if I try to run the same deployment script, it fails (because some global npm script dependencies are not installed). Any suggestion?

[Linc Abela]

Hi any update on this? Im also trying to deploying angular-cli from bitbucket to azure. trying to setup continous deployment with azure and bitbucket. But yeah in kudo - i can't seem to install angular-cli (Ng serve is failling)

[rkralston]

We are using Jenkins to build on a separate server and then deploy. Couldn't get kudu to work.

[Tim Hong]

I hope you have figured out the solution already. For other people who have same issues, basically you just need include those dependencies in your package.json file. For example, you need express, run "npm install express --save"

[sander]

Just started this today. Ran into the exact same issue as you did. Sad to see you couldn't work it out.

[sander]

azure site deploymentscript --node doesn't work anymore. I used this instead: github.com/projectkudu/kudu/wiki/Custom-Deployment-Script

[Rafael]

@sander a hint is enabled when running this command in ARM Mode, switching to ASM Mode and rerunning the command works now

[Rafael]

@Amir Sasson What about Build definitions?

[Amir Sasson]

@Lobato you mean TFS build Defination?

[Rafael]

Yes sir, or are these files automatically runned by Kudu?

[Amir Sasson]

@Lobato run by Kudo directly. in case of TFS, you might need ng-cli to build your angular application and copy the output dir to the Azure webapp. then you might need section #6 to #9

[rkralston]

We ended up completing the process in Jenkins and the just pushing out the finished website. I cannot delineate that process as our Ops guy did all the Jenkins work and I am on a different project in another company. Needless to say, running the build on Azure was a non-starter.

[Akshay]

Thanks. I deployed successfully.

[Swaroop]

Easiest explanation.