Navigation

Use a Custom 404 Page

On this page

Overview

You can replace the default 404 page that Stitch displays when a user tries to access a resource that does not exist with a custom HTML document. You can specify this custom 404 page from the Stitch UI or by importing an application configuration directory that includes the page in its hosting directory. Select the tab below that corresponds to the method you want to use.

404 Errors in Single-Page Apps

When single-page application hosting is enabled, Stitch always returns an HTTP 200 response with the app root regardless of the requested route. This means that you cannot specify a custom 404 page for a SPA. Instead, you should include custom code in your application to handle invalid routes.

Procedure

1

Create a Custom 404 Page File

You can use any hosted file as your custom 404 page. It’s common to use an HTML file that incorporates the following elements:

  • A short message indicating the error, e.g. “This page does not exist.”
  • Alternative links or options for the user to continue navigating.
2

Host the 404 File in Stitch

Once you’ve created the custom 404 file, you need to upload it to Stitch. To upload the file, navigate to the Hosting screen of the Stitch UI, click Upload Files, and select the custom HTML file.

3

Configure the 404 Resource Path in Stitch

Once you have successfully uploaded the 404 file, all that’s left is to configure Stitch to serve that file instead of the default 404 page.

  1. On the Hosting page, click the Settings tab.
  2. Under Custom 404 Page, click Choose File.
  3. Select your custom 404 file from the list.
  4. Click Save.

Once you have updated the Hosting configuration, Stitch will begin serving your custom file instead of the default 404 page.

1

Create a Custom 404 Page HTML File

You can use any valid HTML file for your application’s 404 page. Consider incorporating the following elements:

  • A short message indicating the error, e.g. “This page does not exist.”
  • Alternative links or options for the user to continue navigating.
2

Export Your Stitch Application

To configure a custom 404 page with stitch-cli you need to export an application directory.

You can export your application configuration from the Export tab of the Settings page in the Stitch UI, or by running the following command from an authenticated instance of stitch-cli:

stitch-cli export --app-id=<App ID>
3

Host the HTML File in Stitch

Once you’ve created the custom HTML file, you need to host it in Stitch.

If you aren’t already hosting the HTML file in Stitch, add it to the /hosting subdirectory of the exported directory.

4

Specify the 404 Page in the Application Configuration

In stitch.json, set the value of hosting.default_error_path to the resource path of the HTML file then save the configuration file.

"hosting": {
  "enabled": true,
  "default_error_path": "/pages/custom_404.html"
}
5

Import the Updated Application Directory

Once you have specified the custom 404 page path in stitch.json, you can import the directory into your application. If you added the custom HTML file to /hosting, make sure to use the --include-hosting flag.

stitch-cli import --include-hosting

After you have successfully imported the changes, Stitch will begin serving your custom HTML instead of the default 404 page.