Child routes 404 when application is served statically using web server

[AllenAttuned]

I would like to use Modern.js to produce a static bundle which can be served as an SPA, without the need to use modern serve. To achieve this, I configured my modern.config.js to the following:

import { appTools, defineConfig } from '@modern-js/app-tools';

// https://modernjs.dev/en/configure/app/usage
export default defineConfig({
  output: {
    distPath: {
      html: '',
    },
    cleanDistPath: true,
    disableSourceMap: true
  },
  html: {
    disableHtmlFolder: true,
  },
  source: {
    mainEntryName: 'index'
  },
  runtime: {
    router: {
      supportHtml5History: true,
    }
  },
  plugins: [
    appTools({
      bundler: 'webpack',
    }),
  ],
});

And, as a result, my build output looks like this:

.
|____index.html
|____nestedRoutes.json
|____modern.config.json
|____route.json
|____static
| |____css
| | |____async
| | | |____page.d7915515.css
| |____js
| | |____489.54ca708a.js.LICENSE.txt
| | |____lib-router.a2113bfd.js
| | |____index.6329a78b.js
| | |____async
| | | |____products
| | | | |____(id)
| | | | | |____page.79a8ae59.js
| | | | |____page.35c17bfa.js
| | | |____page.b010470e.js
| | | |____101.a5464db7.js
| | | |____101.a5464db7.js.LICENSE.txt
| | |____lib-react.eb4f86f6.js
| | |____489.54ca708a.js
| | |____lib-react.eb4f86f6.js.LICENSE.txt
| | |____lib-router.a2113bfd.js.LICENSE.txt
| | |____lib-polyfill.1a011935.js
|____routes-manifest.json

I can then serve this using npx serve dist, and successfully load the application in my browser.

The app has a few routes defined:

• / : index
• /products
  • /products/[id]

Navigating to /products and its children work fine if I use the nav. links (<Link> component) in the UI. However, if I try and go to the route directly by entering it as the URL, I get 404 errors. This also means that if I'm already on the child route and refresh the page, I'll get a 404.

Going off of the Self-controlled routes documentation, does the Conventional routing require the use of modern serve to serve the application?

[xc2]

You need to set up a "rewrite"-like feature based on your deployment platform.

for instance,

for nginx

// https://nginx.org/en/docs/http/ngx_http_core_module.html#try_files
try_files $uri $uri/ /index.html;

for azure, create a file named staticwebapp.config.json with content

{
  "navigationFallback": {
    "rewrite": "/index.html"
  }
}

[AllenAttuned]

Thank you! I realized that it was an error on my part.

I could serve the application using the --single option of Serve. This will reroute all "not-found" requests back to index.html.

npx serve dist --single

As you have mentioned, this can also be done for traditional web servers, like Nginx or Apache, using their configurations.

After I have a more finalized setup, I'll see about sharing my notes.

[AllenAttuned]

Here are some notes on a working solution. To serve the SPA as a static website, (1) you'll need to configure Modern.js to produce a build directory that looks like the one below, and (2) a proper web server configuration.

.
|____index.html
|____nestedRoutes.json
|____route.json
|____static/
| |____css/
| |____js/
| |____font/
|____routes-manifest.json

This is the minimum modern.config.ts needed to achieve this:

export default defineConfig({
    output: {
        cleanDistPath: true,
        distPath: {
            html: '',
        },
    },
    html: {
        disableHtmlFolder: true,
    },
    runtime: {
        router: true,
    },
    source: {
        mainEntryName: 'index',
    },
    plugins: [
        appTools({
            bundler: 'webpack',
        }),
    ],
});

The key points are the mainEntryName being configured to index, and disableHtmlFolder to truthy.

(2) This isn't specific to Modern.js, but it's helpful nonetheless, for the web server configuration, you'll need to redirect all requests back to the index of the SPA. This is to get client side routing to work. In our case, we're hosting the application on S3 and serving from CloudFront. To get redirecting to work, an "error page" must be set on CloudFront with a path pointing to the website's index.html document for 404 errors. If set up correctly, client side routing should work, and all paths should return 200 errors.