At Front-Commerce Cloud, we understand that you may want to customize error pages for your project with static HTML.
Why?
Custom error pages can be useful for various reasons, such as:
displaying a maintenance page when your website is down for maintenance
having a static page fallback when you expect a very high traffic peak that some systems might not be able to handle
maintain 404 error pages in plain HTML instead of in React components
How?
In this documentation, we will explain how to implement custom error pages for your Front-Commerce Cloud project.
To implement custom error pages, you must first create a .front-commerce-cloud/ directory at the root of your repository.
Within this directory, create a subdirectory named __errors/. This subdirectory will contain your custom error pages.
To create a maintenance page, you must name it maintenance.html and place it in the .front-commerce-cloud/__errors/ subdirectory.
⚠️ All static assets must be linked with the /__errors/ base absolute directory.
For example, if you have a stylesheet named styles.css, the link should be /__errors/styles.css.
To test your custom error pages, we recommend you to run npx serve .front-commerce-cloud from your repository root. This will start a local server that you can use to preview your custom error pages.
Deploy and test
Once you have created and tested your custom error pages, you can deploy them to your Front-Commerce Cloud project.
Your custom maintenance page will be previewable at https://example.com/__front-commerce-cloud/errors/maintenance.html.
Enable in production
It is important to note that to enable custom maintenance pages in your project, you must contact our support service.
We hope this documentation has been helpful in explaining how to implement custom error pages for your Front-Commerce Cloud project. If you have any further questions or concerns, please do not hesitate to contact our support service.