How to deploy an Angular2 + Webpack app on Azure?

Question

I'm trying to find information online about how to deploy an angular2 with webpack app to azure, but I couldn't find anything helpful enough. I checked the start package as suggested here How do you deploy Angular 2 apps? but I also couldn't find much help there.

So, I have an angular2 app running with webpack locally. It's working perfectly locally. But how do I deploy it to Azure Web Apps?

I appreciate any help :)

Thanks!

@4c74356b41 that's not something I want, I don't wanna miss all the goodies :) check the first answer for the link I provided, item 2. Thanks. — eestein, Nov 17 '16 at 23:53
I'd like to deploy an angular2 CLI-based app to azure as well, and am really looking for a step-by-step set of instructions too, but not the route you outlined (using CodeShip). I'd simply like azure to monitor submissions and rebuild/deploy when changes occur. I also used a template provided by Steve Sanderson that worked well, but I'd really like to go with a bare-bones Node.js-only approach for my client side without all the other stuff around it. My ideal workflow is simple: angluarcli for scaffolding -> edit -> Checkin to github -> site gets updated. Deployment is a struggle for me. — Dennis Ward, Jan 04 '17 at 13:02
@DennisWard I understand your frustration, I'd like it to be as simple as Azure makes building .net projects using GitHub webhook, but it's not. What worked for me was my posted answer since that service is free, and you have other free options like circleci and many more... Anyway, sorry I can't help... — eestein, Jan 04 '17 at 14:51

score 1 · Accepted Answer · edited May 23 '17 at 12:32

Well, so I was able to get it working. After researching I found out there are a few options to go by, mainly creating your own local prod build and uploading it and using CD/CI. I went with the latter. It took quite some time, but now it's all set I don't have to worry about it anymore...

I based myself in this tutorial http://tattoocoder.com/angular2-azure-codeship-angularcli/ by Shane Boyer but since link-only answers are discouraged I'm going to write it here.

Here's how I did it:

Create a branch release on GitHub (I use this one to publish)
Create a free account on CodeShip and import the GitHub repo
On Configure Project select I want to create my custom commands and use this code:

nvm install 4.1

npm install angular-cli

npm install

Then this one under Test pipeline:

ng serve &

ng e2e

ng build -prod

Click Save and go to dashboard
Now go to your Azure Portal (https://portal.azure.com/) and open/create your web app
Click on Deployment Options > Choose Source > Local Git Repository
Then click on Deployment Credentials and insert the user/password you prefer
Click on Overview and copy your Git clone url
Go to Project settings > Environment variables and add AZURE_REPO_URL with the value being the git clone url you copied with the user/password (https://username:password@site.scm.az(...).git):
After, click on Deployment on the left navigation menu
Choose the branch you want to deploy from (in my case it was release) and click Save, then click on Custom Script
Then customize and add this script:

git config --global user.email "email@provider.com"
git config --global user.name "Your name"

git clone $AZURE_REPO_URL repofolder

cd repofolder

rm -rf *

cp -rf ~/clone/dist/* .
git add -A
git commit --all --author "$CI_COMMITTER_NAME <$CI_COMMITTER_EMAIL>" --message "$CI_MESSAGE ($CI_BUILD_URL)"

git push origin master

That was it. Now every time you push to GitHub CodeShip will build your code and every time you PR to release it will build AND publish to azure.

Thank https://stackoverflow.com/users/595213/shayne-boyer for this.

How to deploy an Angular2 + Webpack app on Azure?

1 Answers1