I’m trying to deploy my AngularDart 5 web app to Firebase. These are the steps I followed:
I builded my app with the command pub run build_runner build --output build.
I launched the command firebase init and setted web folder as the public folder.
I deployed my web app with the command firebase deploy.
⚠ The problem is that when I open the website I find only a blank page.
❔ What I’m doing wrong?
Thank you!
Yes, I am still having this issue. The content of my firebase.json is:
{
"hosting": {
"public": "web",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
I don’t know if it helps, but my pubspec.yaml file is:
name: angular_app
description: Angular App
version: 0.0.1
environment:
sdk: '>=2.0.0-dev.63.0 <2.0.0'
dependencies:
sass_builder: ^2.0.2
angular: ^5.0.0-alpha+15
angular_forms: ^2.0.0-alpha+7
angular_router: ^2.0.0-alpha+14
dev_dependencies:
angular_test: ^2.0.0-alpha+13
build_runner: ^0.8.9
build_test: ^0.10.2+5
build_web_compilers: ^0.4.0+4
test: ^1.0.0
When I deploy on firebase or when I serve the app with firebase serve, I see only “Loading...”.
Thanks for your help!
In your step 3, you need to use firebase deploy to deploy rather than pub.
In your firebase.json file, the hosting.public entry shown above is just "web" but your build output directory is "build". The entry should probably be "build/web".
Are you setting <base href> in your index.html? If so, to which href value?
You wrote that when you serve you only see “Loading...”. Open then JavaScript console. Do you see any error messages?
Related
Trying to deploy my React app on Firebase. The problem is that after I deploy the app and connect to the default "app.web" domain I keep getting "Site Not Found" page. I followed the initial steps and bundled the app with parcelJS.
However adding /index.html at the end resolves my issue.
Connecting to the "firebase.com" domain works as expected without the need of adding "index.html" at the end.
My previous project which I now removed worked seamlessly without such issues.
What causes this behavior? Can I do anything to fix it?
Contents of firebase.json
{
"hosting": {
"public": "dist",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
The rewrites are correct for a single page app. it maybe an issue related to your browser cache, try another browser or clear your one with Ctrl F5.
If issues persist, you should look at your react app and double-check any router paths and that you do have an existing public folder in the root with your index.html and your react app setup correctly.
As a last resort incase something severe maybe broken, you can create a new project folder and init your Firebase project into it and copy your react src folder over and rebuild your public folder, firebase.json, etc and redeploy with firebase deploy --only hosting
I added target to firebase project because there is going to be subdomains. I've done this before, but never encountered this error. So I created the project in the firebase console. Then I opened the project in my terminal.
firebase init
... chose existing project // Website
firebase deploy // website is now live at firebase domain
Then I added a target...
firebase target:apply hosting website Website
Now I went to my firebase.json file and it looks like this
{
"hosting": {
"target": "website" // this causes Error: 404, Requested entity was not found
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
I'm getting the error after I add that target and run firebase deploy in the terminal. Maybe I need to add the target to my firebase.rc as well?
how to deploy to other firebase hosting sites defined within the same project.
I created multiple firebase hosting "sites".
The command
firebase deploy
however always deploys to the first one.
How can I specify that the static files get deployed to another "site" (and domain).
Thanks
You have to add the other sites as deploy targets. If you have a second site named awesome-site-d3426:
$ firebase target:apply hosting awesome-app awesome-site-d3426
You'll likely have to do the same thing for the primary site.
Then tell Firebase what to deploy to which targets in firebase.json:
{
"hosting": [
{
"target": "awesome-site",
"public": "awesome-site/dist"
},
{
...
}
]
}
You can then deploy all the sites at once(firebase deploy) or a specific site:
$ firebase deploy --only hosting:awesome-site
To deploy to another site created in same firebase project.
Update your firebase.json file as folow
{
"hosting": {
"site":"<site-name>",
"public": ...,
"ignore": [
...
],
"rewrites": [
...
]
}
}
I expecting see my firebase website but instead of the web app, I seeing this image. I think I followed the Firebase Hosting docs.
Here's my firebase.json:
{
"database": {
"rules": "database.rules.json"
},
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
After running firebase deploy, it says:
Deploy complete!
What did I miss? :(
Thanks,
Adi
This is infact your website. When you run Firebase init it prepopulates the public folder (which you selected to be your dist directory) with the sample site you are seeing. You must place all of your HTML, CSS, and JavaScript into the dist directory and the run firebase deploy --only hosting
I'm following this tutorial Getting Started with Firebase Hosting on the Web - Firecasts
I'm trying to host a simple index.html file in firebase but when I type firebase deploy its gives me the following error:
No targets found. Valid targets are: database,storage,functions,hosting. hosting error image
I found my firebase.json file is empty it contains only { } .
run firebase init again.
When you are asked for - Which Firebase CLI features do you want to setup for this folder?
Press Space to select features, it will mark that feature with asterisk.
Then Enter to confirm your choices.
Make sure you select the options by pressing spacebar, then press enter.
run firebase init and if your firebase.json is empty with only {} then add
{
"hosting": {
"public": "public",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
replace "public": "app" with "public": "public"
then run firebase deploy