Reactjs Firebase和React托管-未加载App.js
我正在尝试使用firebase托管我的React应用程序，但由于某些原因，它无法呈现我的App.js文件 我最初运行了Reactjs Firebase和React托管-未加载App.js,reactjs,Reactjs,我正在尝试使用firebase托管我的React应用程序，但由于某些原因，它无法呈现我的App.js文件 我最初运行了firebase init hosting，最终覆盖了index.html文件 然后，我运行了firebase部署--只托管发布到我的托管URL的 但是，托管URL上可用的内容仅包含my index.html文件中的信息，而不包含App.js中的信息。（请注意，我的公用文件夹包含index.html，但App.js不在公用文件夹中） 结果是，当我运行npm run start时，
firebase init hostingfirebase部署--只托管发布到我的托管URL的
但是，托管URL上可用的内容仅包含my 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"
}
]
}
}
Public/Index.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>
迈克尔·麦金尼
您需要启用JavaScript才能运行此应用程序。
Index.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();
从“React”导入React；
从“react dom”导入react dom；
导入“bootstrap/dist/css/bootstrap.css”
从“./components/App”导入应用程序；
从“firebase/app”导入firebase；
将*作为serviceWorker从“/serviceWorker”导入；
//对于Firebase JS SDK v7.20.0及更高版本，measurementId是可选的
firebase.initializeApp={
阿皮奇：“假”，
authDomain:“michaelmckinney Fake.firebaseapp.com”，
projectId:“michaelmckinney Fake”，
storageBucket:“michaelmckinney Fake.appspot.com”，
messagingSenderId：“假”，
appId:“假：网络：假”，
测量：“假”
};
ReactDOM.render（，document.getElementById（'root'））；
//如果你想让你的应用程序离线工作并更快地加载，你可以更改
//取消注册（）以在下面注册（）。注意，这有一些陷阱。
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;
从'react bootstrap'导入{Tabs，Tab}
从“React”导入React，{Component}；
从“firebase”导入firebase；
导入“/App.css”；
T
类应用程序扩展组件{
建造师（道具）{
超级（道具）
}
render（）{
返回(
数据库
{“欢迎来自App.js”}
{/*添加制表符存款*/}
{/*添加选项卡撤消*/}
);
}
}
导出默认应用程序；
我认为问题在于我没有正确构建。将firebase.json更改为
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
运行npm build
，我按照预期进行了部署。在我回答这个问题或研究它之前，我建议您从上面粘贴在index.js中的代码中删除api键、APID等。）哎哟，搞笑