Firebase hosting + React with webpack

Asked 21/8, 2016 at 19:6 Answered 14/9, 2017 at 23:42

reactjs firebase firebase-hosting reactfire

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>

Schappe answered 21/8, 2016 at 19:6 Comment(0)

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"
    }
  ]
}

Mothering answered 18/9, 2016 at 6:38 Comment(3)

So you build locally on your dev machine, then deploy to firebase? Is there a way to have firebase do the build during deployment? – Upturn 1/4, 2017 at 5:4

@EgeErsoz You could try embedding some Node Package that can run command line commands, but as for now you have to just settle with $ npm run build && firebase deploy || echo "Failed to build". This will first build the app and then, if the build was successful, we deploy firebase app. – Furman 29/6, 2017 at 19:17

Maybe use grunt and start the deploy process using, e.g., grunt deploy – Furman 29/6, 2017 at 19:17

In your particular case when you are having a demo/raw/boiler-plate index file which I assume would be in '/app/' directory. You can replace that with your application original index.html and you are done.

Other helping Tips (you may keep your app directory instead and use it as public while reading this):

Tip 1: When you deploy the application on Firebase and try to access browser (especially React,Redux) application you may get an error saying :

can not find module "run" in bundle.js

So as mentioned in the answer it is must, and after this- you must execute the command:

npm start

This command will regenerate the bundle.js and will not include/require the "run" module which we were using while development. After this, you can deploy the latest bundle.js to the server.

Tip 2: In webpack.config inside output:{...} section you should set path and publicPath to a new directory i.e. /public/. Otherwise on Firebase host when you mentioned 'public' directory as default directory to deploy - then it will create problem and application will not run on Firebase server.

Note: actually I am not sure and do not know how to tell firebase to use files on my root and not in my 'public' folder But I think that outputting the Webpack generated files and keeping other public files (css, html) inside the public folder is good as otherwise firebase deploy may upload other files sitting in root directory as well. (correct me if I'm wrong).

Ok so finally when you are updated the webpack.config output values as:

output: { path: __dirname+ '/public', publicPath: '/public/', filename: 'bundle.js' }

Then (finally making sure you are done with Tip.1 as well) and run the command to get latest bundle.js

npm start

. And finally you are good to go and deploy using:

firebase deploy

I believe you may have followed the initial steps of initiating firebase login and other init commands before running last deploy command.

Note: The "firebase serve" command is also helpful to debug and test if application is running well on local machine then it will run well on live Firebase server as well.

Benitobenjamen answered 30/9, 2016 at 10:25 Comment(0)

I was having the same issue. @Caritos has it right. However, I found additional issues.

1) I needed to add code to the HTML file:

<script type="text/javascript" src="/bundle.js"></script>

2) In the npm build directory, this link tag was not built correctly as it was not self-closing:

incorrect:

<link href="/bundle-f9b3749622929f71c476.css" rel="stylesheet">

correct:

<link href="/bundle-f9b3749622929f71c476.css" rel="stylesheet" />

Once I close the link tag, my React App deployed.

Decorator answered 14/9, 2017 at 23:42 Comment(0)

Other helping Tips (you may keep your app directory instead and use it as public while reading this):

Recommended topics

Hot tags