Sveltekit [...slug] dynamic routing returns 404 error after deployment

Question

am developing Svelte application with dynamic routes, everything working fine in localhost for both development and production build. After deploying build using firebase, except base routes all other routes returning 404 error.

Here I have attached my code structure

Svelte config JS file

import adapter from '@sveltejs/adapter-static';
import preprocess from 'svelte-preprocess';

/** @type {import('@sveltejs/kit').Config} */
const config = {
    // Consult https://github.com/sveltejs/svelte-preprocess
    // for more information about preprocessors
    preprocess: [
        preprocess({
          postcss: true,
          preserve: ['ld+json'],
        }),
      ],

    kit: {
        adapter: adapter({
            pages: 'public',
            assets: 'public',
            fallback: null,
            precompress: false
            }),
            prerender: {
            default: true
            }
    }
};

export default config;

Base route Link

Route with dynamic path after click All the dynamic paths are working while we are clicking item from base route when Javascript enabled. If we are reloading the page or when we are hitting this url directly it's not working.

Notes : In localhost am not facing any issue in both production and development build.

Answer 1

In firebase hosting we should rewrite rules for dynamic links please follow these steps

"hosting": {
  // ...

  "appAssociation": "AUTO",  // required for Dynamic Links (default is AUTO if not specified)

  // Add the "rewrites" attribute within "hosting"
  "rewrites": [ {
    "source": "/**",  // the Dynamic Links start with "https://CUSTOM_DOMAIN/"
    "dynamicLinks": true
  } ]
}

To omit the .html for all paths e.g. /page.html -> /page

"hosting": {

  // We should add "cleanUrls" attribute within "hosting"
  "cleanUrls": true
}