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

An SPA is a web application or website that interacts with the user by dynamically rewriting the current web page with new data from the web server, instead of the default method of a web browser loading entire new pages. Page refresh does not occur in an SPA. This delivers smoother transition and better user experience that is similar to a native application. In an SPA, all necessary HTML, JavaScript, and CSS code is retrieved by the browser with a single page load, or appropriate resources are dynamically loaded and added to the page in response to user actions.

Prerequisites

  • OSS SDK for Node.js is installed. For more information, see Installation.
  • A bucket is created. In this tutorial, a bucket named examplebucket is used. For more information, see Create buckets.
  • The custom domain name example.com is mapped to the examplebucket bucket. For more information, see Map custom domain names.

Step 1: Use React to build an SPA

  1. Open Command Prompt or PowerShell. In this tutorial, Command Prompt is used.
  2. 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)
  3. At the Ok to proceed? (y) prompt, enter y and press the Enter key.
    After several minutes, the project is created. All project dependencies are installed at the same time.
  4. Run the following command to go to the created project:
    cd spa-demo
  5. Run the following command to preview the created project:
    npm run start
    The following figure shows the content of the App.js file.js
  6. Debug the project and then preview the file to confirm that the SPA meets your requirements. Then, run the following command to build the project in the production environment:
    npm run build

    The build directory is generated in the root directory of the project.

Step 2: Configure static website hosting for the examplebucket bucket

  1. Log on to the OSS console.
  2. In the left-side navigation pane, click Buckets. On the Buckets page, click examplebucket.
  3. In the left-side navigation pane, choose Basic Settings > Static Pages. In the Static Pages section, click Configure.
    • Enable Subfolder Homepageindex1
      Parameter Description
      Default Homepage The default homepage that appears when you use a browser to access the static website hosted on the OSS bucket. In this example, set this parameter to index.html.
      Subfolder Homepage Specifies whether to enable the subfolder homepage feature for the bucket. In this example, select Enable. After you enable the subfolder homepage feature for a bucket, if you access the root directory of the bucket, the default homepage in the root directory is returned. If you access a subdirectory whose URL ends with a forward slash (/), the default homepage in the subdirectory is returned.
      Default 404 Page The error page that is returned if the object that you want to access does not exist in the bucket and HTTP status code 404 is returned. In this tutorial, the page file specified by this parameter is used as the default error page of the SPA. Set this parameter to index.html, which is the same as the value of Default Homepage.
      Error Page Status Code The HTTP status code that is returned with the error page. Set the status code to 200.
    • Disable Subfolder Homepagestatic
      Parameter Description
      Default Homepage The default homepage that appears when you use a browser to access the static website hosted on the OSS bucket. In this example, set this parameter to index.html.
      Subfolder Homepage Specifies whether to enable the subdirectory homepage feature for the bucket. In this example, select Disable. In this case, when you access the root directory of the bucket or a subdirectory whose URL ends with a forward slash (/), the default homepage object in the root directory of the bucket is returned.
      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. In this tutorial, the page file specified by this parameter is used as the default error page of the SPA. Set this parameter to index.html, which is the same as the value of Default Homepage.
      Error Page Status Code The HTTP status code that is returned with the error page. Set the status code to 200.
  4. Click Save.

Step 3: Upload all files in the build directory

  1. In the left-side navigation pane, click Buckets. On the Buckets page, click examplebucket.
  2. In the left-side navigation pane, choose Files > Files.
  3. On the Files page, click Upload.
  4. On the Upload page, configure the parameters described in the following table.
    Parameter Description
    Upload To Select Current.
    File ACL Set the access control list (ACL) of the objects to Public Read.
    Files to Upload Click Select Folders, and then select all files in the build directory of the spa-demo project.
  5. Click Upload.
    You can view the upload progress of files in the Task List panel. After the files are uploaded, you can find an object named index.html in the examplebucket bucket.

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

  1. Open your browser.
  2. In this tutorial, the custom domain name example.com is used. Enter https://example.com/index.html in the browser to access the SPA.
    The following figure shows the returned page.html

FAQ

  • Q: 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?

    A: 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.

  • Q: The page is loaded after a route transition. However, HTTP status code 404 instead of 200 is returned. What do I do?

    A: 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 the Error Page Status Code parameter is set to 200.