部署在 heroku 上的 React 项目是空白的

Question

This is my package.json file in the src folder

    {
      "homepage": "http:Khairiya.github.io/HW6_IS96G58JX7",
      "name": "my-app",
      "version": "0.1.0",
      "private": true,
      "dependencies": {
        "@testing-library/jest-dom": "^4.2.4",
        "@testing-library/react": "^9.5.0",
        "@testing-library/user-event": "^7.2.1",
        "react": "^16.13.1",
        "react-dom": "^16.13.1",
        "react-scripts": "3.4.1"
      },
      "scripts": {
        "predeploy": "npm run build",
        "deploy": "gh-pages -d build",
        "start": "react-scripts start",
        "build": "react-scripts build",
        "test": "react-scripts test",
        "eject": "react-scripts eject"
      },
      "eslintConfig": {
        "extends": "react-app"
      },
      "browserslist": {
        "production": [
          ">0.2%",
          "not dead",
          "not op_mini all"
        ],
        "development": [
          "last 1 chrome version",
          "last 1 firefox version",
          "last 1 safari version"
        ]
      },
      "devDependencies": {
        "gh-pages": "^3.1.0"
      }
    }

This is my app.js file in my src folder as well. the style file is located in the src folder and works perfectly with the bootstrap

       import React from "react";
       import logo from './logo.png';
       import { Component} from "react";
       import "./style.css"

      class App extends Component {
      constructor(props) {
        super(props);
        this.state = {
          allData: {},
          data:[],
          isLoaded: false,
        };
     }

  componentDidMount() {
    fetch("https://disease.sh/v3/covid-19/all")
      .then((response) => response.json())
      .then(
        (allData) => {
          this.setState({
            isLoaded: true,
            allData: allData,
          });
        },

        (error) => {
          // handle your errors here
          this.setState({
            isLoaded: true,
            error,
          });
        }
      );
      fetch(
        "https://disease.sh/v3/covid-19/countries?sort=cases&allowNull=true"
      )
        .then((res) => res.json())
        .then((data) => {
           this.setState({
           isLoaded: true,
           data: data,
         });
        });
        
      }
  
      render() {
    const { allData } = this.state;
    const{ data } = this.state;

        let update = data.map((item) => {

        const {  country, cases, deaths, recovered, active,  } = item;
          return (
            <tbody key={country}>
              <tr>
                <td>{country}</td>
                <td>{cases}</td>
                <td>{active}</td>
                <td>{recovered}</td>
                <td>{deaths}</td>
              </tr>
            </tbody>
      );
    });

        return (
          <div className="App">
            <div className="container">
              <div className="row">
                <p className="toprow">
                  <img src={logo} alt="logo" height="30px" />
                  Covid-19 Tracker
                </p>
              </div>
            </div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div className="container">
              <div className="row justify-content-between">
                <div className="col-sm-2 box">
                  <p>
                    Total Cases <i className="fa fa-arrow-alt-circle-up icons"></i>
                  </p>
                  <p className="counterPara">
                    <b>{allData.cases}</b>
                  </p>
                </div>
                <div className="col-sm-2 bo`enter code here`x">
                  <p>
                    Recovered{" "}
                    <i className="fa fa-arrow-alt-circle-down icons-green"></i>
                  </p>
                  <p className="counterPara">
                    <b>{allData.recovered}</b>
                  </p>
                </div>
                 <div className="col-sm-2 box">
                   <p>
                    Active Cases <i className="fa fa-arrow-alt-circle-up icons"></i>
                  </p>
                  <p className="counterPara">
                    <b>{allData.active}</b>
                  </p>
                </div>
                <div className="col-sm-2 box">
                  <p>
                   Total Deaths <i className="fa fa-arrow-alt-circle-up icons"></i>
                  </p>
                  <p className="counterPara">
                    <b>{allData.deaths}</b>
                  </p>
                </div>
              </div>
            </div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div>&nbsp;</div>
            <div className="container">
              <div className="row">
                <div className="col-sm-8">
                  <table className="table table-striped">
                    <head>
                      <tr>
                        <th>Countries</th>
                        <th>Total Cases</th>
                        <th>Recovered</th>
                        <th>Active Cases</th>
                        <th>Deaths</th>
                      </tr>
                    </thead>
                    {update}
                  </table>
                </div>
                <div className="col-sm-4">
                  <div className="col align-self-end side-box">
                    <div className="row justify-content-center innerBoxPadding">
                      <div className="col-sm-5 inner-box">
                        <b>Health Tips</b>
                      </div>
                    </div>
                  </div>
                  <div>&nbsp;</div>
                  <div className="col align-self-end side-box">
                    <div className="row justify-content-center innerBoxPadding">
                      <div className="col-sm-6 inner-box">
                        <b>News & Update</b>
                      </div>
                    </div>
                  </div>
                </div>
               </div>
            </div>
           </div>
        );
      }
    }

    export default App;

This is my index.html file located in my public folder. this is where the bootstrap files were linked.

    <!DOCTYPE HTML>
    <html lang="en">
      <head>
        <meta charset="utf-8" />
        <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
        <meta name="viewport" content="width=device-width, initial-scale=1" />
        <meta name="theme-color" content="#000000" />
        <meta
          name="description"
          content="Web site created using create-react-app"
        />
        <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
        <!--
          manifest.json provides metadata used when your web app is installed on a
          user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app- 
     manifest/
        -->
        <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
        <!--
          Notice the use of %PUBLIC_URL% in the tags above.
          It will be replaced with the URL of the `public` folder during the build.
          Only files inside the `public` folder can be referenced from the HTML.

          Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
          work correctly both with client-side routing and a non-root public URL.
          Learn how to configure a non-root public URL by running `npm run build`.
        -->
        <title>React App</title>
        <link rel="stylesheet" 
     href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" integrity="sha384- 
     JcKb8q3iqJ61gNV9KGb8thSsNjpSL0n8PARn9HuZOnIxN0hoP+VmmDGMN5t9UJ0Z" crossorigin="anonymous">
      </head>
      <body>
        <noscript>You need to enable JavaScript to run this app.</noscript>
        <div id="root"></div>
        <!--
          This HTML file is a template.
          If you open it directly in the browser, you will see an empty page.

          You can add webfonts, meta tags, or analytics to this file.
          The build step will place the bundled scripts into the <body> tag.

          To begin the development, run `npm start` or `yarn start`.
          To create a production bundle, use `npm run build` or `yarn build`.
        -->
        <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js" integrity="sha384- 
     DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/popper.js@1.16.1/dist/umd/popper.min.js" integrity="sha384- 
     9/reFTGAW83EW2RDu2S0VKaIzap3H66lZH81PoYlFhbGU+6BZp6G7niu735Sk7lN" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js" 
    integrity="sha384-B4gt1jrGC7Jh4AgTPSdUtOBvfO8shuf57BaghqFfPlYxofvL8/KUEfYiJOMMV+rV" 
    crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.14.0/js/all.min.js"
          integrity="sha512- 
   YSdqvJoZr83hj76AIVdOcvLWYMWzy6sJyIMic2aQz5kh2bPTd9dzY3NtdeEAzPp/PhgZqr4aJObB3ym/vsItMg=="
          crossorigin="anonymous"></script>
      </body>
    </html>

So this is what I posted on heroku. it successfully pushed to gisthub. the code has no errors or warnings in console. please help

Answer 1

okay the problem was that, in pushing the app to github, I went through the right steps, thus, installing GitHub Pages package as a dev-dependency and adding the required properties to package.json file. These steps were not needed in deploying the hub to heroku. So, for the second app I created, I pushed the code to github without installing the dependencies and adding the required properties. After I pushed the app to heroku and it worked. The final website is at https://hw6-is96g58jx7.herokuapp.com/