Menu
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>
459
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"
}
]
}
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
