DEV Community

Wai Liu
Wai Liu

Posted on • Originally published at waiholiu.blogspot.com on

Adding URL Rewrite for an Angular app deployed to Azure App Service

When deploying an Angular app onto Azure App Service, the routing is not going to work because Angular uses client side routing whereas by default, on an App Service, the routing is going to be server side. As a result, anything that's not the root domain is not going to point to index.html.

In order to fix this, you need to set up the App Service so that any route points back to index.html.

Azure App Service runs on IIS in the background so you need a web.config file to do a URL rewrite. To do this, you need to create a web.config file.

<configuration>

  <system.webServer>

    <rewrite>

      <rules>

        <rule name="angularjs routes"

        stopProcessing="true">

          <match url=".\*" />

          <conditions logicalGrouping="MatchAll">

            <add input="{REQUEST\_FILENAME}"

            matchType="IsFile" negate="true" />

            <add input="{REQUEST\_FILENAME}"

            matchType="IsDirectory" negate="true" />

            <add input="{REQUEST\_URI}"

            pattern="^/(api)" negate="true" />

          </conditions>

          <action type="Rewrite" url="/" />

        </rule>

      </rules>

    </rewrite>

  </system.webServer>

</configuration>

Enter fullscreen mode Exit fullscreen mode

Then you need to add it to the angular-cli.json file in the Assets bit


{

"$schema": "./node\_modules/@angular/cli/lib/config/schema.json",

"project": {

"name": "quiz"

},

"apps": [

{

"root": "src",

"outDir": "dist",

"assets": [

"assets",

"favicon.ico",

"web.config"

],

Enter fullscreen mode Exit fullscreen mode

When you run " ng build" now, it'll save web.config to the dist folder.

Discussion (0)