Deploy AngularJS project to Azure cloud service using Octopus Deploy

Question

I've been setting up an automated deploy of a ASP.Net WebAPI project as an Azure cloud service using Octopus Deploy for the last few days. Note that this project contains a Web Role and a custom startup script. Ran into some problems along the way, but managed to get that part of the deploy done by running the build, performing a cspack on the artifacts and octo pack the CS package. That seems to be working as intended. It looks roughly like this:

Now I also need to deploy another project as an Azure cloud service. However, this project is a front-end project written in JavaScript using the AngularJS framework. I'm not entirely sure what would be the best way to deploy this project. It also needs to be a web role and execute a custom script at startup. Is it enough to add a .csdef, .cscfg and the startup script to it and follow up by executing cspack? As a test I basically created a cloud service project in Visual Studio and added the /dist of the front-end to it. I rather have a solution that doesn't require that additional project to be there. I'd be great if someone is able to give me some advice as I've been breaking my head over this for way too long now.

I would strongly recommend use of Azure App Service (Azure Websites) for the AngularJS SPA. All of your code would simply be a zip file delployed to the Web App. I don't know what actions your custom script takes in case of a AngularJS SPA so not sure if Azure App Service will work. — Abhay Saraf
The script contains commands to configure some firewall settings. Don't think the Azure App Service can execute these files. — Kaj Nelissen

Gary Liu Gary Liu · Accepted Answer · 2016-08-12T02:13:28

It is the same if you want to execute custom script at startup in cloud services project. As we still need a web server to host the Angularjs SPA (e.g. iis).

So we can simple create the cloud services project via C# template in Visual Studio, put your Angularjs application into the Web Role folder, and modify the web.conig file in the web role root directory, to change the default page of the web role to the entrance of your Angularjs application, e.g. index.html.

You can simply add the following section under the <configuration> in web.config:

  <system.webServer>
    <defaultDocument>
      <files>
        <add value="index.html" />
      </files>
    </defaultDocument>
  </system.webServer>

The minimal project of cloud service of my test is like the following image:

Deploy AngularJS project to Azure cloud service using Octopus Deploy

1 Answers