Use a Custom 404 Page
Overview
You can replace the default 404 page that Atlas App Services 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 App Services 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.
Note
404 Errors in Single-Page Apps
When single-page application hosting is enabled, App Services 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
Host the 404 File in App Services
Once you've created the custom 404 file, you need to upload it to App Services. To upload the file, navigate to the Hosting screen of the App Services UI, click Upload Files, and select the custom HTML file.
Configure the 404 Resource Path in App Services
Once you have successfully uploaded the 404 file, all that's left is to configure App Services to serve that file instead of the default 404 page.
On the Hosting page, click the Settings tab.
Under Custom 404 Page, click Choose File.
Select your custom 404 file from the list.
Click Save.
Once you have updated the Hosting configuration, App Services will begin serving your custom file instead of the default 404 page.
Pull the Latest Version of Your App
To configure a custom 404 page with the App Services CLI, you need a local copy of your application's configuration files.
To pull a local copy of the latest version of your app, run the following:
appservices pull --remote="<Your App ID>"
Tip
You can also download a copy of your application's configuration files from the Deploy > Import/Export App screen in the App Services UI.
Host the HTML File in App Services
Once you've created the custom HTML file, you need to host it in App Services.
If you aren't already hosting the HTML file in App Services, add it to
the hosting/files/ directory.
Specify the 404 Page in the Application Configuration
In hosting/config.json, set default_error_path to the resource
path of the 404 page HTML file then save the
configuration file.
"hosting": { "enabled": true, "default_error_path": "/pages/custom_404.html" }
Deploy the Updated Hosting Configuration
Once you've updated hosting/config.json you can push the updated config to
your remote app. If you also added the 404 page, make sure to use the
--include-hosting flag. App Services CLI immediately starts to serve your custom
404 page on push.
appservices push --remote="<Your App ID>" --include-hosting