How to use React and static website hosting to build a single-page application - Object Storage Service

This topic describes how to use React and the static website hosting feature of Object Storage Service (OSS) to build a single-page application (SPA) at the frontend.

Background information

A single-page application is a web application that interacts with users by dynamically rewriting the current page rather than loading entire new pages from the server. This approach avoids interrupting the user experience during page transitions, making it more like a desktop application. All necessary code (HTML, JavaScript, and CSS) for a single-page application is retrieved during the initial load or dynamically loaded as resources based on user actions.

Prerequisites

You have installed the Node.js SDK.
You have created a bucket. In this tutorial, a bucket named examplebucket is used as an example.
You have mapped a custom domain name example.com to the examplebucket bucket.

Step 1: Use React to build a SPA

Open the command line terminal cmd or PowerShell. This tutorial uses cmd as an example.

Run the following command to create a project.

npx create-react-app spa-demo

The following output is returned:

Need to install the following packages:
create-react-app
Ok to proceed? (y)

After Ok to proceed? (y), enter y, and then press Enter.
After several minutes, the project is created. All project dependencies are installed at the same time.
Run the following command to navigate to the created project.
```
cd spa-demo
```
Run the following command to preview the created project.
```
npm run start
```
The App.js file is shown in the following figure:
After you debug and preview the project to ensure that it works properly, run the following command to package the code for the production environment.
```
npm run build
```
A build directory is generated in the root directory of the project.

Step 2: Configure static website hosting for the examplebucket bucket

Log on to the OSS console.
Click Buckets, and then click examplebucket.
In the left navigation bar, select Data Management > Static Pages.

In the Static Pages section, click Configure. Configure the parameters as described in the following table.

Parameter	Description
Default Homepage	The default homepage that appears when you use a browser to access the static website hosted on the OSS bucket. Set this parameter to `index.html`.
Subdirectory Homepage	Select Enable or Disable based on your business requirements. If you enable this feature, the default homepage of the corresponding directory is returned when you access a URL that ends with a forward slash (/) under the root domain name. If you disable this feature, the default homepage of the root directory is returned when you access the root domain name or any URL that ends with a forward slash (/).
404 File Handling	Select Redirect.
Default 404 Page	The error page that is returned when the object that you want to access does not exist in the bucket and HTTP status code 404 is returned. For a frontend single-page application, configure the default 404 page as the application entry point, which is the same as the default homepage: `index.html`.
Error Page Status Code	Set the HTTP status code that is returned with the error document to 200.

Enable subdirectory homepage: index1

Click Save.

Step 3: Upload all files in the build directory

Click Buckets, and then click examplebucket.
In the left-side navigation tree, choose Object Management > Objects.
On the Files page, click Upload.

In the Upload panel, configure the parameters as described in the following table. Keep the default values for other parameters.

Parameter	Description
Upload To	Select Current.
Object ACL	Set the access control list (ACL) of the object to Public Read.
Files To Upload	Click Scan Folder and select all files in the spa-demo project's build directory that was generated by React. Important Upload only files in the build directory to the root directory of the bucket, excluding the build directory itself. Otherwise, path parsing errors may occur when you access the single-page application by using the custom domain name, which prevents normal navigation.

Click Upload, and then view the upload progress on the Upload Tasks tab. After the upload is complete, you can find a file named index.html in the file list of the examplebucket bucket.

Step 4: Use a custom domain name to access the SPA

Open a browser.
In this tutorial, the custom domain name example.com is used as an example. Enter https://example.com/index.html to access the single-page application.
The following figure shows the result:

FAQ

The web page of the deployed SPA can be rendered after a route transition. However, HTTP status code 404 is returned when I refresh the page. What do I do?
The default homepage or the default 404 page may be incorrectly configured when you configure static website hosting for the bucket. Make sure that both Default Homepage and Default 404 Page are set to index.html.
The page is loaded after a route transition. However, HTTP status code 404 instead of 200 is returned. What do I do?
The Error Page Status Code parameter may be left empty or incorrectly configured when you configure static website hosting for the bucket. Make sure that Error Page Status Code is set to 200.
What do I do if an object is downloaded when I access the object after I configure static website hosting for a bucket?
You can configure the behavior when you access OSS objects.