Hosting React Web App bundled with webpack

Question

I am trying to deploy and followed your way of adding webpack dependencies but it is still showing blank in browser. I am uploading BUNDLE.JS, INDEX.HTML, PACKAGE.JSON, .BABELRC. (All file names are in lowercase).

Wondering what I am missing. My webpack generates bundle.js on root directory and now, as Firebase creates public directory and I am putting all above mentioned files manually in that public folder so I can deploy. Can someone tell me what are the changes required for me to make and what are the actually required files to be uploaded to Firebase.

I have checked these links also but does not work for me. I can provide more details if needed. http://stackoverflow.com/questions/35583858/hosting-web-app-bundled-with-webpack http://stackoverflow.com/questions/39067875/firebase-hosting-react-with-webpack — Nah, Sep 26 '16 at 03:20
Yes my application runs pretty well. I am sending mentioning the zip package of my directory without node_modules: [Download App](https://drive.google.com/open?id=0B56dwGgpj-hBdUU4VGctMHoxelk) — Nah, Sep 26 '16 at 12:30

score 1 · Answer 1 · answered Sep 28 '16 at 11:10

You should first run the command webpack, then you need to point out the result of the webpack folder bundle in my case was dist folder in the firebase.json

{
  "hosting": {
    "public": "dist",
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

run the command firebase deploy and the app should be working just fine in the previous selected firebase app on the firebase init command.

score 1 · Accepted Answer · answered Sep 30 '16 at 10:29

What @sergiomeza88 mentioned is also good to cross match but here are some additional details which solved my problem and will help a lot to others as well.

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 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.

When dealing with `Firebase` hosting, I use to delete old deployments, in order to let my recent/latest deployed version to work. Don't know why it is so, but it works for me. Might be there is any cache type issue. — Nah, Jan 07 '17 at 11:08

Hosting React Web App bundled with webpack

2 Answers2