Firebase托管+与webpack的反应 [英] Firebase hosting + React with webpack
问题描述
这是我的firebase.json文件
$ b $ pre $
{
hosting：{
firebase：name，
public：app，
ignore：[
firebase.json，
** /。*，
** / node_modules / **
，
rewrites：[
{
来源：**，
destination：/index.html
}
]
}
}
当我调用 firebase serve 时，页面为空。但是，如果我做了 npm start 这个应用程序能够正常工作。因此，JS / React代码不会被注入到index.html中，它是
<！DOCTYPE html>
< html>
< head>
< meta charset =utf-8>
< title>欢迎使用Firebase托管< / title>
< / head>
< head>
<！ - 任何HTML文件中的第一件事情应该是字符集 - >
< meta charset =utf-8>
<！ - 让页面移动兼容 - >
< meta name =viewportcontent =width = device-width，initial-scale = 1>
<！ - 允许将应用程序安装到主屏幕 - >
< link rel =manifesthref =manifest.json>
< meta name =mobile-web-app-capablecontent =yes>
< title> React.js Boilerplate< / title>
< / head>
<！ - 应用程序挂钩到这个div - >
<！ - 在这个文件中发生了很多魔术。 HtmlWebpackPlugin会自动包含具有正确HTML标签的所有资源（例如bundle.js，main.css），这就是HTML文件中缺少的原因。不要在这里添加任何资产！ （如果您想了解更多，请查看webpackconfig.js） - >
< body>
< div id =app>< / div>
< div id =message>
< h1>欢迎使用Firebase托管服务< / h1>
< / div>
< / body>
< / html>
调用命令npm run build。这会生成一个包含webpack输出的build目录。在你的firebase.json文件中，改为指向build目录。然后运行firebase serve或firebase deploy命令。
hosting：{
public ：build，
rewrites：[
{
source：**，
destination：/index.html
}
]
}
Is there a way to add Firebase hosting to React project that utilizes webpack? Specifically, I am trying to add it to https://github.com/mxstbr/react-boilerplate
This is my firebase.json file
{
"hosting": {
"firebase": "name",
"public": "app",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
When I call firebase serve the page is empty. However, if I do npm start the app works correctly. So, the JS/React code is not being injected into the index.html, which is
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Welcome to Firebase Hosting</title>
</head>
<head>
<!-- The first thing in any HTML file should be the charset -->
<meta charset="utf-8">
<!-- Make the page mobile compatible -->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Allow installing the app to the homescreen -->
<link rel="manifest" href="manifest.json">
<meta name="mobile-web-app-capable" content="yes">
<title>React.js Boilerplate</title>
</head>
<!-- The app hooks into this div -->
<!-- A lot of magic happens in this file. HtmlWebpackPlugin automatically includes all assets (e.g. bundle.js, main.css) with the correct HTML tags, which is why they are missing in this HTML file. Don't add any assets here! (Check out webpackconfig.js if you want to know more) -->
<body>
<div id="app"></div>
<div id="message">
<h1>Welcome to Firebase Hosting</h1>
</div>
</body>
</html>
I am using the create-react-app package to create my react app. Invoke the command "npm run build". This generates a "build" directory that includes the webpack output. In your firebase.json file, point to the "build" directory instead. Then run the "firebase serve" or "firebase deploy" command.
"hosting": {
"public": "build",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
这篇关于Firebase托管+与webpack的反应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
