How to set "default page" for Angular in Azure Web App on Linux service plan

Question

I can deploy Angular to Azure Web Apps on Linux service plan and it works fine when hitting {myapp}.azurewebsites.net/index.html

I can navigate inside the app as expected.

When hitting the root {myapp}.azurewebsites.net it just displays the hostingstart.html.

It does not help to remove the hostingstart.html as suggested in some articles.

If I try to hit a sub page url directly (like {myapp}.azurewebsites.net/mypage) then I get an error : Cannot GET /mypage (this works when I run locally)

I suspect that i need to setup a default page, but i cannot find this anywhere in the Application Settings in the Azure Web App. (I think this is only available on Windows service plans - not on Linux Service Plans).

How do i deploy properly to Linux App Service for this to work ?

I have found a lot of articles on the issue, but they all seem to cover Windows App Service Plan.

Aviad P. · Accepted Answer · 2018-11-15 06:37:09Z

2

You need to add URL rewrite rules to the Apache server so that any page request gets redirected to Angular's index.html

Paste this into your root .htaccess file:

<IfModule mod_rewrite.c>
  RewriteEngine On
  RewriteBase /
  RewriteRule ^index\.html$ - [L]
  RewriteCond %{REQUEST_FILENAME} !-f
  RewriteCond %{REQUEST_FILENAME} !-d
  RewriteRule . /index.html [L]
</IfModule>

(Source: https://github.com/angular/angular/issues/11884#issuecomment-288852433)

EDIT: If using a node.js backend, see this SO answer for reference: https://stackoverflow.com/a/34864585/235648

edited Nov 15, 2018 at 6:37

answered Nov 14, 2018 at 18:41

Aviad P.

32.8k15 gold badges111 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

TechnoCowboy Over a year ago

Thanks for your help, but that didn't work. A "service httpd status" reveals that apache is not running. I believe it is node.js that is being used to serve.

Aviad P. Over a year ago

@TechnoCowboy then you must apply the same logic to node.js. One option is to trap 404 requests and then route them to Angular's index.html - see this SO answer: stackoverflow.com/a/34864585/235648

TechnoCowboy Over a year ago

Thanks. But I can't get it to work. Dockerized the app using NGINX as base image. Now it works.

Collectives™ on Stack Overflow

How to set "default page" for Angular in Azure Web App on Linux service plan

1 Answer 1

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related