Question 369758 in Ubuntu Question posted in
The official Ubuntu documentation can be found here.

Refresh 404 – How to configure Url re-write for an Angular app on ubuntu hosted on Azure

I’ve deployed an Angular 14 app to an Azure App Service and need to setup re-write rules so that refreshing routes doesn’t throw 404 errors. Hitting the site root (index.html) works fine, the app functions normally until you try to navigate directly to a route withing the app such as /orders for example.

I deploy using github actions and have setup to run on ubuntu and it’s a mystery whether Apache or Nginx are serving pages. I setup a staticwebapp.config.json with navigationFallback rules but this appears to be something used by Azure ‘Static Web App’ services rather than ‘App Services’. Online documentation for this is sparse and there is a ton of info on IIS web.config. SSH doesn’t seem to reveal much either. This can’t be that difficult unless something huge is missing !

I’ve tried hunting in SSH, I’ve tried inspecting response headers on the app, watched videos etc, what’s missing ???

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    As it turns out we don't get url re-writes in Azure Ubuntu / Linux hosted Angular sites in Azure if the Startup command isn't crafted exactly the right way.

    The documenation online for this is very frustrating but here's the issue

    Originally in the Azure App Service Configuration -> General Settings -> Startup Command should look like this

    pm2 serve /home/site/wwwroot --no-daemon --spa

    I had omitted the last '--spa' argument and was then sent chasing down how to do rewrites that 'fallback' to index.html.

    --spa does that automagically and there is no need to worry about webserver configurations


  2. 0

    In order for your orders route to be visible make sure you deploy the dist folder of your web app:-

    I referred this blog and deployed my Angular app:-

    I created one order component and added the code below in the routes:-

    My app.routes.ts:-

    import { NgModule } from '@angular/core';
import { RouterModule, Routes } from '@angular/router';
import { OrdersComponent } from './orders/orders.component';

const routes: Routes = [
  { path: 'orders', component: OrdersComponent }
];

@NgModule({
  imports: [RouterModule.forRoot(routes)],
  exports: [RouterModule]
})
export class AppRoutingModule { }
export {routes};

    Github Action yaml code:-

    name: Deploy to Azure WebApp

on:
  workflow_dispatch:

env:
  AZURE_WEBAPP_NAME: 'valleywebapp9'
  AZURE_WEBAPP_PACKAGE_PATH: '.'
  NODE_VERSION: '18.x'

jobs:
  build:
    runs-on: ubuntu-latest

    steps:
      - name: Checkout repository
        uses: actions/checkout@v3

      - name: Setup Node.js
        uses: actions/setup-node@v3
        with:
          node-version: ${{ env.NODE_VERSION }}
          cache: 'npm'

      - name: Install dependencies and build
        run: |
          npm install
          npm run build --if-present
      - name: Upload artifact for deployment job
        uses: actions/upload-artifact@v3
        with:
          name: node-app
          path: ./dist

  deploy:
    runs-on: ubuntu-latest
    needs: build

    environment:
      name: 'Development'
      url: ${{ steps.deploy-to-webapp.outputs.webapp-url }}

    steps:
      - name: Download artifact from build job
        uses: actions/download-artifact@v3
        with:
          name: node-app

      - name: Login to Azure
        uses: azure/login@v1
        with:
          creds: ${{ secrets.AZURE_CREDENTIALS }}

      - name: Deploy to Azure WebApp
        id: deploy-to-webapp
        uses: azure/webapps-deploy@v2
        with:
          app-name: ${{ env.AZURE_WEBAPP_NAME }}
          package: ${{ env.AZURE_WEBAPP_PACKAGE_PATH }}

      - name: Logout from Azure
        run: az logout

    enter image description here

    Also, In order to set your routes you can edit the web.config file of your Azure Web App by referring my SO answer here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search