CODEWITHSUNDEEP
angularfirebasefirebase-hosting
rahul Kushwaha
rahul Kushwaha

Reputation: 2829

Firebase hosting showing welcome page after deploying angular 6 app?

I want to develop the angular 6 apps, but after deploying firebase showing only welcome page.

Here are the steps I have taken to deploy.

  1. installed firebase-tools
  2. ng build --prod (in my app)
  3. firebase init
  4. Are you ready to proceed? (Y/n) y
  5. (*) Hosting: Configure and deploy Firebase Hosting sites
  6. What do you want to use as your public directory? (public) dist
  7. Configure as a single-page app (rewrite all urls to /index.html)? (y/N) y
  8. File dist/index.html already exists. Overwrite? (y/N) y
  9. Firebase initialization complete!
  10. In this step, I have deleted dist folder and run ng build --prod again
  11. angular build app in a subfolder inside dist directory hence I copied all the content from the subdirectory which contains index.html to dist/.
  12. firebase deploy
  13. firebase open hosting:site

but after doing all that I am still getting welcome page in the link.

What am I doing wrong!?

Upvotes: 14

Views: 15464

Answers (13)

Suprava Barik
Suprava Barik

Reputation: 1

Check if the npm run build command generates deployment files under the dist folder. This worked for me:

  • Delete .firebase folder Delete .firebaserc Delete firebase.json Now run as follows under your project directory: $ npm run build $ firebase init hosting ? What do you want to use as your public directory? dist ? Configure as a single-page app (rewrite all urls to /index.html)? Yes ? Set up automatic builds and deploys with GitHub? No ? File dist/index.html already exists. Overwrite? No I Skipping write of dist/index.html

Upvotes: 0

Sweet Nguyen Duc Huy
Sweet Nguyen Duc Huy

Reputation: 1

After trying to install things again, in my case, in firebase.json, I changed the value of public to build/web because I found index.html located in project/build/web folder.

Thank you all!

Upvotes: 0

uttam pun
uttam pun

Reputation: 1

first you should login firebase login after that write command firesbe init

first steps

  1. What do you want to use as your public directory? (public) dist/projectname
  2. File dist/index.html already exists. Overwrite? (y/N) N

after completing the process you should run (npm run build) command and it generates the build file. after that you should got to firebase.json and put build folder in public directory

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

and the last not the least firebase deploy. works perfectly

Upvotes: 0

Mizile
Mizile

Reputation: 162

The welcome page is an automatically generated index.html file found in public folder. I replaced that file with my own index.html file, then use firebase deploy --only hosting commands to update the changes.

Upvotes: 0

Mike Poole
Mike Poole

Reputation: 2055

In my case I had to change public to dist in firebase.json so it pointed to my dist folder (rather than the public folder which contains the holding page) after I added Firebase Functions to my project:

"hosting": {
   "public": "dist",
   ...
}

Upvotes: 1

Jm Molina
Jm Molina

Reputation: 1

firebase init hosting ? File build/index.html already exists. Overwrite? No npm run build firebase deploy --only hosting

Upvotes: -1

Muhammad Shahab
Muhammad Shahab

Reputation: 421

The Problem is: firebase is looking for the index.html file, sometimes it is not present directly in the dist directory

Solution: update the public path in the firebase.json to "public":"dist/ProjectName" or path to the index.html file in the dist folder

Example

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

Upvotes: 5

Shakti Dewan
Shakti Dewan

Reputation: 1

Configure as a single-page app (rewrite all urls to /index.html)? No ? Set up automatic builds and deploys with GitHub? No

  • Wrote public/404.html ? File public/index.html already exists. Overwrite? No

This error is generated by index.html inside public folder of your website folder.

Upvotes: 0

Abel Mekonnen
Abel Mekonnen

Reputation: 1915

In my case, I was initializing firebase inside the project directory (src). Just check the directory you are in. It should be on the top level.

After you build it and try to deploy it, it will be the same since the web page has been cached. So to make sure use in incognito.

Upvotes: 1

vaishnav alppara
vaishnav alppara

Reputation: 1

Check the path on terminal .if the problem still exists then delete firebase auto created folders and deploy the project

Upvotes: 0

Roozbeh
Roozbeh

Reputation: 742

This worked for me:

  • Delete .firebase folder
  • Delete .firebaserc
  • Delete firebase.json

Now run as follow:

$ firebase init hosting
? File build/web/index.html already exists. Overwrite? No
$ firebase deploy --only hosting

Upvotes: -1

Ivo Tsochev
Ivo Tsochev

Reputation: 887

Browser cache was my issue as well. As mentioned above, try in incognito or use proxysite.com (very useful website) to avoid browser cache

Upvotes: 2

Lukasz Debiec
Lukasz Debiec

Reputation: 264

Try: 8. File dist/index.html already exists. Overwrite? (y/N) N and open link to your app in incognito mode. Seriously, I stuck for hours because this firebase index got cached in my case, so this was the reason why I could't see my app after deploy.

Upvotes: 24

Related Questions