Deploy Angular 2 ‘Quick Start’ Example On Azure

Where We Start

You can refer to my last blog to understand how I came along. What happened after that is:

  1. Deployed the empty ASP.NET project with Quick Start example to Azure through Visual Studio 2015Screen Shot 07-22-17 at 09.46 PM.PNG
  2. run npm install in the console of Azureinstall-packages-on-azure.png
    If you see the node_modules folder, then it works, even you might receive Bad Request error.

Of course, it does not work, or why else am I writing this blog. It seems that all the requests of the .js files under /node_module/.. folder are rejected, and the server just return the default file under the dir, which is the /src/index.html itself:

forbiddn.png

Yeah….it is an official boilerplate app, but not cloud-platform-deployable.

200.gif

Solution

Step 1: change the index.html, removing the base tag:

remove-base.png

Step 2: change the file structure, the dir structure of the example is:

  root
	|--node_modules
	|   |--...	
	|	
	|---src
		|--app
		|   |--app.component.html 
		|   |--...
		|
		|--index.html
		|--favicon.ico
		|--main.js
		|--main.js
		|--styles.css

All you need to do is change it to be:

  root
	|
	|--app
	|   |--app.component.html 
	|   |--...
	|
	|--node_modules
	|   |--...
	|
	|--index.html
	|--favicon.ico
	|--main.js
	|--main.js
	|--styles.css

Pretty simple and straightforward, move the file and folders under /src/ to the root folder.

The only problem is, how do you do that on Azure, I used a tool called Kudu. Open the tool by navigating to:

https://yourservicename.scm.azurewebsites.net

And you can manage the files from there:

Kudu.png

Here is a good tutorial talking about Kudu.

Step 3: not really necessary, delete the useless files/folders, there are quite a lot

Reference

My question on stackoverflow.

Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s