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.

Answer 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!
   

Answer 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?

Answer 3

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.

Answer 4

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

Answer 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.

Answer 6

To achieve deploying angular application on azure webapps using bitbucket, create bitbucket-pipelines.yml in root directory. Create environment variables for FTP access for your webapps slot (environment variables are referred using $ in script below).

Enable the pipelines from Bitbucket settings. That's it. Whenever you check-in the code in specific branch ( master branch in script below), it will deploy the application to azure webapps slot using FTP.

# registry for your build environment.
image: node:8.9.0

pipelines:
  branches:
    master:
     - step:
        script: # Modify the commands below to build your repository.
          - npm install -g @angular/cli 
          - npm install
          - ng build --prod
          - apt-get update # Now run the FTP bash script to deploy dist folder to UAT
          - apt-get install ncftp
          - ncftpput -v -u "$FTP_USERNAME" -p $FTP_PASSWORD -R $FTP_HOST $FTP_SITE_ROOT dist/ROOT
          - echo Finished uploading files to $FTP_HOST$FTP_SITE_ROOT