CODEWITHSUNDEEP

firebasefirebase-hosting

user7960664

Reputation:

Firebase hosting not showing up app?

I am new to firebase, and I try to deploy my app to firebase. I have followed all the steps. But, for some reason is not showing up my app. I am getting the welcome modal instead of my web app. Here are the images:

Upvotes: 45

Views: 48415

Answers (30)

Stéphane de Luca

Reputation: 13563

If it is a flutter web app, make sure you defined the public directory as being build/app.

Run firebase init hosting again.

Here is mine:

=== 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? build/web
? Configure as a single-page app (rewrite all urls to /index.html)? Yes
? Set up automatic builds and deploys with GitHub? No
? File build/web/index.html already exists. Overwrite? No
i  Skipping write of build/web/index.html

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

I you fixed the public directory, then simply deploy again with firebase deploy --only hosting and you're done.

Upvotes: 0

Hammad J

Reputation: 201

Firebase hosting not showing up app?

There might be two reasons for this problem

1st step:

Make sure your public folder (define in your firebase.json) 'dist' containing the index.html hasn't been modified by firebase init command, if yes replace it with your original project index.html

for reference (dist is standard but your may different)

{
  "hosting": {
    "public": "dist"    
  }
}

2nd step:

Make sure to configure your base href in project's index.html

as

< base href="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/">

and other bundle files as

< script type="text/javascript" src="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/runtime.a66f828dca56eeb90e02.js"></script>

< script type="text/javascript" src="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/polyfills.14fc14f3e029a8cfd046.js"></script>

< script type="text/javascript" src="https://["YOUR FIREBASE PROJECT NAME"].firebaseapp.com/main.2eb2046276073df361f7.js"></script>

3rd step run the command firebase deploy

Upvotes: 6

Ahadiat Sudirman

Ahadiat Sudirman

Reputation: 1

i create a new directory, i put dist directory(if u using vite) into that file, and set it as a public directory.

Upvotes: 0

Reputation: 103

I faced a similar problem recently after firebase updated it's site I never had any problems before but after I had this one the way you fix it is by doing all the steps normally and when you get to the firebase hosting set up complete page clear the cache by hitting 'CTRL + F5' which should fix the issue.

Alternatively you can add a new website and deploy your site to it instead by firebase deploy --only hosting:'sitename' and this should also work.

Upvotes: 0

Reputation: 21

definitely clearing the cache worked with ctrl + f5 - i was pulling my hair out with the same issue.

Upvotes: 0

Reputation: 1

During initialization of the firebase directory you need to choose build as public directory. The run

1.npm run build
2.firbase deploy

If this doesn't work try clearing the cache of your browser.

Upvotes: 0

Reputation: 173

Sometimes when this happen you need to logout firebase logout on your CLI,
then login again firebase login.

Then repeat all the procedures for hosting And make sure you initialized Firebase Firebase.initializeApp() on your main method if you are using flutter.

This worked for me.

Upvotes: 0

Reputation: 783

in my case after building with ng build i told firebase the source directory is dist, but actually it was dist/my-project...

(there was a firebase index.html in dist. angular index.html was in dist/my-project...)

Upvotes: 0

Jamal Ashraf

Reputation: 935

I ran into this same issue and resolved with below steps:

HACK Solution

Step:1 Go to your build folder and replace index.html with your index.html(public folder).

Step:2 Run command: npm run build

Step:3 Select NO => File dist/{your-application-name}/index.html already exists. Overwrite? (y/N) No

Step:4 Then go to the link and press Ctrl+f5. your app will be in front of you. :)

Upvotes: 1

Nana Kweku Adumatta

Reputation: 111

I had the same issue, I realised for some wierd reason, the firebase.json wasnt in my repo. I created it with config from the above examples, and then I did firebase init again, after it run it found my firebase.json and modified it, it worked

Upvotes: 1

Samih Sghier

Reputation: 45

Figured it out myself, What solved my issue:

ran build (npm run build)
add manually firebase.json and .firebasesrc files to root folder
make sure firebase.json hosting->public is set to "build
run firebase deploy

Upvotes: 1

kelvin chebon

Reputation: 1

Before deploying ensure your files are in the newly created directory e.g y or public folders

Upvotes: 0

Royce Le

Reputation: 11

@arslan's answer helped me here & worked for me, went from a blank webpage to being able to see my app.

My solution: I edited my firebase.json file and then npm run build and then re-ran my command firebase emulators:start. Changed the file from

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

to...

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

Upvotes: 1

kapil bisht

Reputation: 11

I have same issue. Follow below steps:

firebase init

*Are you ready to proceed?* Yes

Make a public folder and Copy your all files into it

*What do you want to use as your public directory?*(public) -->only press enter

*Configure as a single-page app (rewrite all urls to /index.html)?(y/N)* N

*File public/index.html already exists. Overwrite?(y/N)* No

Thats it your app will host...

Upvotes: 1

Reputation: 426

Follow these steps for the usual deployment. https://alligator.io/angular/deploying-angular-app-to-firebase/

You have to check whether index.html inside the dist folder is regenerated by Firebase.

If so, all you need to do is just delete that html file which is modified by Firebase and create a new index.html file then enforcedly update the content with index.html which is actually created via $ ng build --prod. Now enter $ firebase deploy --only hosting.

So keep an eye of your index.html file contents and its location. if its location is not dist folder. you should give proper location accordingly for public field from firebase.json file.

Upvotes: 1

Reputation: 333

I faced similar issue when deploying a website in firebase.

Firebase usually creates two default domains, web.app and firebaseapp.com. If one doesn't work out, use another.

This solved my problem. Try it!

Make sure that you uploading your files to firebase.

Else, use firebase deploy --only hosting to deploy to files from the public directory to firebase.

Upvotes: 1

Divek John

Reputation: 755

If someone is here because of a

it seems like some domains ending with web.app are blocked from ISP providers, for some countries, I used a private VPN and access my site until it was fixed.

Upvotes: 3

Reputation: 196

There are a few instances where nothing is really needed. Move all your static files into the public folder you chose. use command

firebase deploy

and just clear the cache by hitting ctrl+f5. that did it for me.

Upvotes: 1

Cameron McClymont

Cameron McClymont

Reputation: 95

The fix that worked for me was using the second link that firebase provides instead of the first one:

USE: your-project-id.firebaseapp.com (instead of: your-project-id.web.app)

Upvotes: 1

arslan

Reputation: 1144

Only solution is firebase deploy file is index.tml but we need build file so replace your

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

Just replace your firebase.json file with this and you will se the magic

Upvotes: 1

Reputation: 714

I had ran to this issue and

If anybody had encounters the same after using firebase init command,

check your index.html file in your public folder (for react).

it might have been overridden by firebase.

in order to tell firebase not to override your existing index.html file,

type 'N' when firebase asks if you want to override the existing index.html file

Upvotes: 5

Stepres stepres

Reputation: 821

It's because the index.html has modified itself when you selected "Y" while initializing the firebase. It has basically replaced your own index file to this one. Check and replace the index file and next time, do not overwrite index.html file. It would work.

Upvotes: 18

Mario Orozco

Reputation: 331

Since Angular v6 CLI projects are making it easier to have multiple apps with shared codebases. Hence the new folder within dist.

Quoting dotGitignore answer:

I found that the ng build --prod will create a dist and an another subfolder under this where the project location is.

Check how to fix it here https://stackoverflow.com/a/50360478/11652243

Upvotes: 1

Himanshu

Reputation: 462

The step to deploy are as following

STEP 1:

ng build --prod

STEP 2:

firebase init

    *Are you ready to proceed?* Yes

    *What do you want to use as your public directory?* dist/{your-application-name}

    *Configure as a single-page app (rewrite all urls to /index.html)?(y/N)* Yes

    *File dist/{your-application-name}/index.html already exists. Overwrite?(y/N)* No

STEP 3:

firebase deploy --only hosting

And if still you are getting the same page just press 'CTRL + F5' it will clean the cached.

Upvotes: 33

Reputation: 171

For myself, the problem was I given an absolute path to my app location, firebase init seem's only take a relative path.

Upvotes: 1

Toby Ladislas

Reputation: 11

If you're seeing what's in this screenshot, there's another index.html file generated by Firebase, and it points to this one instead of your own. Here's how to fix:

Delete the Firebase-generated index.html and keep your own.
Re-deploy using firebase deploy

Upvotes: 1

Dan N.

Reputation: 61

When you ran firebase init Firebase creates a file structure in your project folder and depending on the selections you made it created a /public folder (or another name if you specified) for your public files. Within that /public folder it also creates a index.html file containing the welcome message you are seeing. You need to take your app files (web pages, etc) and move them into that public folder and replace that index.html file along with them. After doing this run the command "firebase deploy" and it will update and you should see your app.

Upvotes: 0

Varun Kumar P

Reputation: 81

I faced the same problem. In my case the issue was not with firebase. Just clearing the cache was the solution.

Upvotes: 8

muhammad asif

Reputation: 11

after command firebase init, go to public or dist folder and select all files (not folders) except firebase related files and copy into dist or public folder. After this execute command firebase deploy and wait for a while. After finish go to mentioned url there you will find your working app.

Upvotes: 0

Jaya Krishna

Reputation: 11

Here I found an answer to the question

Step1:

Initialize the firebase first.

$firebase init

Step2:

Create a production build now.

$ng build --prod

Step:3

It's time to deploy your app.

$firebase deploy

Upvotes: -1

Related Questions