Question 120255 in Firebase Question posted in
An extensive official documentation can be found here.

Firebase – Redirect to page when a URL path pattern is identified

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?

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    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">


  2. 0

    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"
  }
]
    1. Remove the redirect entirely, and place your file at suppliers/add-supplier.html instead of in the root
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search