CODEWITHSUNDEEP
reactjsfirebasefirebase-hosting
Joey
Joey

Reputation: 621

My react project not working after deploy to firebase hosting

I'm following the instruction of this site and I'm already trying with an empty create-react-app project and It's working fine

But when I'm trying with my existing project after deploy process was done It said

Firebase Hosting Setup Complete You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!

So I'm pretty curious what I missing

here's package.json

{
  "name": "iplace",
  "version": "0.1.0",
  "private": false,
  "dependencies": {
    "node-sass": "^4.10.0",
    "react": "^16.6.3",
    "react-dom": "^16.6.3",
    "react-router": "^4.3.1",
    "react-router-dom": "^4.3.1",
    "react-scripts": "2.1.1"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ]
}

firebase.json

{
  "hosting": {
    "public": "build",
    "ignore": [
      "firebase.json",
      "**/.*",
      "**/node_modules/**"
    ],
    "rewrites": [
      {
        "source": "**",
        "destination": "/index.html"
      }
    ]
  }
}

I already execute firebase init (change public-> build) > npm run build > firebase deploy

Here's project structure

Here's project structure

And here's index.html file (I'm pretty wonder why index.html still have welcome to firebase wording...)

<!doctype html><html><head><meta charset="utf-8"><meta name="viewport" content="width=device-width,initial-scale=1"><title>Welcome to Firebase Hosting</title><script defer="defer" src="/__/firebase/5.7.0/firebase-app.js"></script><script defer="defer" src="/__/firebase/5.7.0/firebase-auth.js"></script><script defer="defer" src="/__/firebase/5.7.0/firebase-database.js"></script><script defer="defer" src="/__/firebase/5.7.0/firebase-messaging.js"></script><script defer="defer" src="/__/firebase/5.7.0/firebase-storage.js"></script><script defer="defer" src="/__/firebase/init.js"></script><style media="screen">body{background:#eceff1;color:rgba(0,0,0,.87);font-family:Roboto,Helvetica,Arial,sans-serif;margin:0;padding:0}#message{background:#fff;max-width:360px;margin:100px auto 16px;padding:32px 24px;border-radius:3px}#message h2{color:#ffa100;font-weight:700;font-size:16px;margin:0 0 8px}#message h1{font-size:22px;font-weight:300;color:rgba(0,0,0,.6);margin:0 0 16px}#message p{line-height:140%;margin:16px 0 24px;font-size:14px}#message a{display:block;text-align:center;background:#039be5;text-transform:uppercase;text-decoration:none;color:#fff;padding:16px;border-radius:4px}#message,#message a{box-shadow:0 1px 3px rgba(0,0,0,.12),0 1px 2px rgba(0,0,0,.24)}#load{color:rgba(0,0,0,.4);text-align:center;font-size:13px}@media (max-width:600px){#message,body{margin-top:0;background:#fff;box-shadow:none}body{border-top:16px solid #ffa100}}</style><link href="/static/css/main.6f735e8f.chunk.css" rel="stylesheet"></head><body><div id="message"><h2>Welcome</h2><h1>Firebase Hosting Setup Complete</h1><p>You're seeing this because you've successfully setup Firebase Hosting. Now it's time to go build something extraordinary!</p><a target="_blank" href="https://firebase.google.com/docs/hosting/">Open Hosting Documentation</a></div><p id="load">Firebase SDK Loading&hellip;</p><script>document.addEventListener('DOMContentLoaded', function() {
        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥
        // // The Firebase SDK is initialized and available here!
        //
        // firebase.auth().onAuthStateChanged(user => { });
        // firebase.database().ref('/path/to/ref').on('value', snapshot => { });
        // firebase.messaging().requestPermission().then(() => { });
        // firebase.storage().ref('/path/to/ref').getDownloadURL().then(() => { });
        //
        // // 🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥🔥

        try {
          let app = firebase.app();
          let features = ['auth', 'database', 'messaging', 'storage'].filter(feature => typeof app[feature] === 'function');
          document.getElementById('load').innerHTML = `Firebase SDK loaded with ${features.join(', ')}`;
        } catch (e) {
          console.error(e);
          document.getElementById('load').innerHTML = 'Error loading the Firebase SDK, check the console.';
        }
      });</script><script>!function(l){function e(e){for(var r,t,n=e[0],o=e[1],u=e[2],f=0,i=[];f<n.length;f++)t=n[f],p[t]&&i.push(p[t][0]),p[t]=0;for(r in o)Object.prototype.hasOwnProperty.call(o,r)&&(l[r]=o[r]);for(s&&s(e);i.length;)i.shift()();return c.push.apply(c,u||[]),a()}function a(){for(var e,r=0;r<c.length;r++){for(var t=c[r],n=!0,o=1;o<t.length;o++){var u=t[o];0!==p[u]&&(n=!1)}n&&(c.splice(r--,1),e=f(f.s=t[0]))}return e}var t={},p={2:0},c=[];function f(e){if(t[e])return t[e].exports;var r=t[e]={i:e,l:!1,exports:{}};return l[e].call(r.exports,r,r.exports,f),r.l=!0,r.exports}f.m=l,f.c=t,f.d=function(e,r,t){f.o(e,r)||Object.defineProperty(e,r,{enumerable:!0,get:t})},f.r=function(e){"undefined"!=typeof Symbol&&Symbol.toStringTag&&Object.defineProperty(e,Symbol.toStringTag,{value:"Module"}),Object.defineProperty(e,"__esModule",{value:!0})},f.t=function(r,e){if(1&e&&(r=f(r)),8&e)return r;if(4&e&&"object"==typeof r&&r&&r.__esModule)return r;var t=Object.create(null);if(f.r(t),Object.defineProperty(t,"default",{enumerable:!0,value:r}),2&e&&"string"!=typeof r)for(var n in r)f.d(t,n,function(e){return r[e]}.bind(null,n));return t},f.n=function(e){var r=e&&e.__esModule?function(){return e.default}:function(){return e};return f.d(r,"a",r),r},f.o=function(e,r){return Object.prototype.hasOwnProperty.call(e,r)},f.p="/";var r=window.webpackJsonp=window.webpackJsonp||[],n=r.push.bind(r);r.push=e,r=r.slice();for(var o=0;o<r.length;o++)e(r[o]);var s=n;a()}([])</script><script src="/static/js/1.734eb6b0.chunk.js"></script><script src="/static/js/main.14da6ff9.chunk.js"></script></body></html>

Upvotes: 9

Views: 20937

Answers (8)

Ahmed Iftiaz
Ahmed Iftiaz

Reputation: 1

? Are you ready to proceed? Yes

=== Hosting Setup

Your public directory is the folder (relative to your project directory) that will contain Hosting assets to be uploaded with firebase deploy. If you have a build process for your assets, use your build's output directory.

? What do you want to use as your public directory? dist (Note it is either dist or build depends what you get after npm run build) ? Configure as a single-page app (rewrite all urls to /index.html)? Yes ? Set up automatic builds and deploys with GitHub? No

  • Wrote dist/index.html

i Writing configuration info to firebase.json... i Writing project information to .firebaserc...

After that: npm run build

now simply copy your index.html from dist or build folder to public folder

then firebase deploy

Upvotes: 0

Colin Marshall
Colin Marshall

Reputation: 11

If you have previously uploaded your app to GitHub Pages:

You need to go into package.json and remove "homepage": "<your github link>". For some reason, this line prevents Firebase from being able to detect the contents of your build folder even if you've followed all of the steps correctly.

If you want to host on GitHub and Firebase, I suggest having two branches. Use your main or master branch for Firebase, and use a gh-pages branch (created using gh-pages) to host a GitHub branch.

Upvotes: 0

Ehsanul Ahmmed
Ehsanul Ahmmed

Reputation: 111

First task

You need to replace this code with the following one in index.html of public folder:

<!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 Chat Application created using professional technologies" 
    />
    <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>Programmer Dost</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>

Second Task:

  • Delete .firebaserc file.
  • Delete firebase.json file.

Third Task:

  • Delete “.firebase” folder.
  • Delete “build” folder.

Fourth Task:

run the command: firebase init it will ask: Which Firebase features do you want to set up for this directory? choose: Hosting: Configure files for Firebase Hosting and (optionally) set up GitHub Action deploys

then select: Please select an option: Use an existing project then select your project name

Fifth Task:

(Type the folder name where you want to initialize the app. It would be build in case of react app.) What do you want to use as your public directory? build

Sixth Task:

(Select Yes in single page app) Configure as a single-page app (rewrite all urls to /index.html)? Yes

Seventh Task:

Set up automatic builds and deploys with GitHub? No

Eigth Task:

(Run this Command) npm run build /yarn build

Last Task:

(Run this command) firebase deploy

In my case that's How it worked.

Upvotes: 11

mati42
mati42

Reputation: 41

in firebase.json Instead of

<i>"public": "build" </i>

put

<i>"public": "./build" </i>

and then

npm run build
firebase deploy

Upvotes: 3

ariel guzman
ariel guzman

Reputation: 680

I had the same problem and it was confusing because it deployed. Turns out I had to make sure to run

npm run build
firebase deploy

then wait a few minutes for the site to show up. This assumes you did not modify the react index.html file

Upvotes: 3

srinivas
srinivas

Reputation: 5108

You have overwritten you index.html with the default one created by firebase during firebase init.

ToFIX:

  1. delete current index.html
  2. get your original index.html
  3. run firebase init again.
  4. when it ask you to overwrite you "index.html" - say NO.

Upvotes: 4

behdad setoodegan
behdad setoodegan

Reputation: 41

You need to add this line in your index.html file.

<div id="root"></div>

Then it will work, You can add it before try{}.

Upvotes: 1

Renaud Tarnec
Renaud Tarnec

Reputation: 83093

You say «I'm pretty wonder why index.html still have welcome to firebase wording». Most probably it is simply because your build process doesn’t overwrite it.

It is difficult to say from the elements and images you have added to your post, but when you do npm run build you either don’t build your react project or you build it in a dist directory that is not at all the public Firebase folder. You should copy the result of your build to the public folder and then re-deploy.

Upvotes: 0

Related Questions