CODEWITHSUNDEEP
angularfirebasehostingfirebase-hosting
FrankTheTank
FrankTheTank

Reputation: 785

Hosting Angular Project on Firebase

I am trying to host my Angular(5) project on Firebase and I am able to deploy my application but when I do this is what the host shows at my project URL:

enter image description here

It seems like I am able to deploy a hosting service using Firebase but it is not actually using my Angular project, instead just a default Firebase hosting screen. My firebase.json file is currently set up like below:

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

Additionally, I ran ng build --prod --aot=false beforehand to build a production folder in my angular project under 'dist'. Why is my project not showing up at the URL? The dist folder structure is as such:

enter image description here

Also, here is my configuration for setting up Firebase init:

enter image description here

Upvotes: 4

Views: 1937

Answers (4)

StepUp
StepUp

Reputation: 38174

My actions to deploy Angular 7.2.15 to Firebase:

  1. Run firebase init

    • Are you ready to proceed? Yes
    • Which Firebase CLI features do you want to set up for this folder? Press Space to select features, then Enter to confirm your choices. Hosting: Configure and deploy Firebase Hosting sites
    • What do you want to use as your public directory? dist
    • Configure as a single-page app (rewrite all urls to /index.html)? Yes
    • File dist/index.html already exists. Overwrite? No Skipping write of dist/index.html

  2. Then:

    ng build --prod

After that the project has the following structure:

-.firebase
-dist
 - myapp
-node_modules
-myapp
  - dist
    -myapp
-public
-.firebaserc
-.gitignore
-.firebase.jsom
-package-lock.json

  1. Then you should copy ALL FILES from myapp/dist/myapp into dist/myapp.

  2. Then run firebase deploy

Upvotes: 0

vbrgr
vbrgr

Reputation: 839

step 1 : ng build --prod after step 1 in src/app/ --> dist folder with deploy/hosting content will be created/updated

step 2: firebase deploy -p dist/< Enter Your Project Name here > ex: (test is project name) : firebase deploy -p dist/test

in 2nd step deploy of files in dist folder to firebase hosting (as u can see this files in firebase console)

Upvotes: 0

Ervis Trupja
Ervis Trupja

Reputation: 2800

In Angular 6 you need to add the project name at the public property. 

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

You need the dist because that is the folder where the production files can be found when you execute the ng build --prod command

Upvotes: 0

olivejp
olivejp

Reputation: 929

Can you provide the full tree directory of your app ?

I have a Angular application hosted in Firebase Hosting and my firebase.json is similar as yours but not this line : 

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

Could be a solution ... or not. It depends on your directory tree. Please share your directory tree to compare.

Upvotes: 0

Related Questions