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!

Answer 1

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:

1. Create a branch release on GitHub (I use this one to publish)

2. Create a free account on CodeShip and import the GitHub repo

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

4. Then this one under Test pipeline:

ng serve &

ng e2e

ng build -prod

5. Click Save and go to dashboard
6. Now go to your Azure Portal (https://portal.azure.com/) and open/create your web app
7. Click on Deployment Options > Choose Source > Local Git Repository
8. Then click on Deployment Credentials and insert the user/password you prefer
9. Click on Overview and copy your Git clone url
10. 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:[email protected](...).git):
11. After, click on Deployment on the left navigation menu
12. Choose the branch you want to deploy from (in my case it was release) and click Save, then click on Custom Script
13. Then customize and add this script:

git config --global user.email "[email protected]"
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.