[英]Deploying React project to Firebase leads to window that says "Firebase Hosting Setup Complete"
I have followed all of the steps to initialize my project, I run npm run build
then I run firebase deploy
and my the URL it gives me leads me to a default firebase webpage that says "Firebase Hosting Setup Complete"我已经按照所有步骤初始化我的项目,我运行
npm run build
然后我运行firebase deploy
并且它给我的 URL 引导我到一个默认的 firebase 网页,上面写着“Firebase Hosting Setup Complete”
Thanks for the help!谢谢您的帮助!
index.html索引.html
<!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>
</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>
Complete Walkthrough完整演练
Before starting with anything make sure you have created your project in FireBase & you have used the same Firebase Config in your firebase.js
file in your local react project folder在开始任何事情之前,请确保您已经在 FireBase 中创建了您的项目,并且您已经在本地 React 项目文件夹中的
firebase.js
文件中使用了相同的 Firebase 配置
Create a build folder using:使用以下命令创建构建文件夹:
npm run build npm 运行构建
This in turn will create a build folder in the root of your project folder.这反过来将在项目文件夹的根目录中创建一个构建文件夹。 Basically the build files are optimized for production, where there are no ongoing changes in code every now & then.
基本上,构建文件针对生产进行了优化,代码不会时不时地发生变化。
Install the Firebase CLI Tools using:使用以下命令安装 Firebase CLI 工具:
npm install -g firebase-tools npm 安装 -g firebase-tools
-g
flag is used here to install it globally, so it can be accessed easily from any project. -g
标志在这里用于全局安装它,因此可以从任何项目轻松访问它。
Sign in & initialize登录并初始化
firebase login登录
For logging in, you will be redirected to browser window, there you simply have to login using your FireBase credentials.登录时,您将被重定向到浏览器窗口,在那里您只需使用您的 FireBase 凭据登录即可。
firebase init
You will be asked loads & loads of questions while in firebase init
but don't worry, I will guide you here:在
firebase init
中,你会被问到很多问题,但别担心,我会在这里指导你:
Are you ready to proceed?你准备好继续了吗?
Type y
, since we want to continue.输入
y
,因为我们要继续。
Which Firebase features do you want to set up for this directory?您要为此目录设置哪些 Firebase 功能? Press Space to select features, then Enter to confirm your choices.
按 Space 选择功能,然后按 Enter 确认您的选择。
Here, you need to select all features which you included in your project, it may be, you needed nothing & you are just using it for free Hosting.在这里,您需要选择项目中包含的所有功能,可能您不需要任何功能,只是将其用于免费托管。 :) In my case, I used Firestore & Storage both in my project & also needed Hosting so, I'm selecting these 3 using space & then press enter.
:) 就我而言,我在我的项目中使用了 Firestore 和 Storage 并且还需要托管,所以我使用空格选择这 3 个,然后按回车键。
Make sure to choose the Firebase Hosting, where Github actions are optional.(Refer green stars on above picture).确保选择 Firebase 托管,其中 Github 操作是可选的。(请参阅上图中的绿色星星)。
When prompted for Firebase rules and other similar stuff, then go with default options.当提示输入 Firebase 规则和其他类似内容时,请使用默认选项。
For choosing public directory, make sure you choose the build folder要选择公共目录,请确保选择构建文件夹
Go with these options.选择这些选项。 Make sure you don't overwrite buid/index.html .
确保您没有覆盖buid/index.html 。
Deploying our web app部署我们的网络应用程序
firebase deploy火力基地部署
That's it we're done就这样我们完成了
Link for the Deployed application will be in the Terminal已部署应用程序的链接将位于终端中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.