reactjs - Firebase 和 React 托管

问题描述

我正在尝试使用 firebase 来托管我的 React 应用程序，但由于某种原因它没有呈现我的 app.js 文件。

我最初运行firebase init hosting，最终覆盖了我的 index.html 文件。

然后我运行firebase deploy --only hosting发布到我的托管 URL。

但是，托管 URL 上可用的内容仅包含来自我的 index.html 文件的信息，而不是来自 App.js 的信息。（注意我的公用文件夹包含 index.html，但 App.js 不在公用文件夹中）。

结果是，当我运行时npm run start，本地 Web 服务器显示来自 App.js 的所有内容，但是当我部署时，我只看到来自 index.html 的内容。以下是我的代码，不胜感激：

Firebase.json：

{
  "hosting": {
    "public": "public",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

公共/索引.html：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <meta name="theme-color" content="#000000" />
    <!--
      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>Michael McKinney</title>

    <!-- update the version number as needed -->
    <script defer src="/__/firebase/8.3.2/firebase-app.js"></script>
    <!-- include only the Firebase features as you need -->
    <script defer src="/__/firebase/8.3.2/firebase-auth.js"></script>
    <script defer src="/__/firebase/8.3.2/firebase-database.js"></script>
    <script defer src="/__/firebase/8.3.2/firebase-firestore.js"></script>
    <script defer src="/__/firebase/8.3.2/firebase-functions.js"></script>
    <script defer src="/__/firebase/8.3.2/firebase-messaging.js"></script>
    <script defer src="/__/firebase/8.3.2/firebase-storage.js"></script>
    <script defer src="/__/firebase/8.3.2/firebase-analytics.js"></script>
    <script defer src="/__/firebase/8.3.2/firebase-remote-config.js"></script>
    <script defer src="/__/firebase/8.3.2/firebase-performance.js"></script>
    <!-- 
      initialize the SDK after all desired features are loaded, set useEmulator to false
      to avoid connecting the SDK to running emulators.
    -->
    <script defer src="/__/firebase/init.js"></script>

  </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`.
    -->
  </body>
</html>

索引.js

import React from 'react';
import ReactDOM from 'react-dom';
import 'bootstrap/dist/css/bootstrap.css'
import App from './components/App';
import firebase from "firebase/app";
import * as serviceWorker from './serviceWorker';

// For Firebase JS SDK v7.20.0 and later, measurementId is optional
firebase.initializeApp = {
    apiKey: "Fake",
    authDomain: "michaelmckinney-Fake.firebaseapp.com",
    projectId: "michaelmckinney-Fake",
    storageBucket: "michaelmckinney-Fake.appspot.com",
    messagingSenderId: "fake",
    appId: "Fake:web:Fake",
    measurementId: "Fake"
  };

ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
serviceWorker.unregister();

组件/App.js：

import { Tabs, Tab } from 'react-bootstrap'

import React, { Component } from 'react';
import firebase from "firebase";
import './App.css';
t

class App extends Component {


  constructor(props) {
    super(props)
  }

  render() {
    return (
      <div className='text-monospace'>
        <nav className="navbar navbar-dark fixed-top bg-dark flex-md-nowrap p-0 shadow">
          <a
            className="navbar-brand col-sm-3 col-md-2 mr-0"
            target="_blank"
            rel="noopener noreferrer"
          >
        <img src={dbank} className="App-logo" alt="logo" height="32"/>
          <b>dBank</b>
        </a>
        </nav>
        <div className="container-fluid mt-5 text-center">
        <br></br>
          <h1>{"Welcome from App.js"}</h1>
          <br></br>
          <div className="row">
            <main role="main" className="col-lg-12 d-flex text-center">
              <div className="content mr-auto ml-auto">
              <Tabs defaultActiveKey="profile" id="uncontrolled-tab-example">
                {/*add Tab deposit*/}
                {/*add Tab withdraw*/}
              </Tabs>
              </div>
            </main>
          </div>
        </div>
      </div>
    );
  }
}

export default App;

标签： reactjs

reactjs - Firebase 和 React 托管 - 不加载 App.js

问题描述

解决方案

推荐阅读