识别到 URL 路径模式时重定向到页面

Question

I'd like any traffic that comes to:

mysite.com/suppliers/add-supplier

To be directed to add-supplier.html when the path is identified in my firebase.json config file. I've tried this:

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ],
    "redirects": [
      {
        "source": "/suppliers/add-supplier",
        "destination": "/add-supplier.html"
      }
    ],
    "cleanUrls": true
  },
  "storage": {
    "rules": "storage.rules"
  }
}

Even though this identifies and redirects correctly, it gets rid of the suppliers/add-supplier path and makes it mysite.com/add-supplier

Is there a way to retain the original URL while also redirecting to the correct HTML page?

Answer 1

You have two options:

1. Use a rewrite instead of a redirect:

"rewrites": [
  {
    "source": "/suppliers/add-supplier",
    "destination": "/add-supplier.html"
  },
  {
    "source": "**",
    "destination": "/index.html"
  }
]

2. Remove the redirect entirely, and place your file at suppliers/add-supplier.html instead of in the root

Answer 2

I combined @samthecodingman's answer with some changes and got it working:

Moved page to new directory

I moved the add-supplier.html file to a new folder called suppliers inside the public directory so that it's suppliers/add-supplier.html

firebase.json:

{
  "firestore": {
    "rules": "firestore.rules",
    "indexes": "firestore.indexes.json"
  },
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      },
      {
        "source": "/suppliers/add-supplier",
        "destination": "suppliers/add-supplier.html"
      }
    ],
    "cleanUrls": true
  },
  "storage": {
    "rules": "storage.rules"
  }
}

This will correctly load the page but the CSS, media and JS files will not be identified. To fix this, change all your resource files to have ../ in the front:

before changing: <link href="dist/css/style.css" rel="stylesheet" type="text/css">

after changing: <link href="../dist/css/style.css" rel="stylesheet" type="text/css">