{
"database": {
"rules": "database.rules.json"
},
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
},
"hosting": [
{
"public": "dist/nur",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
{
"target": "nur",
"public": "dist/nur",
"ignore": [
"**/.*"
],
"headers": [
{
"source": "*.[0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f][0-9a-f].+(css|js)",
"headers": [
{
"key": "Cache-Control",
"value": "public,max-age=31536000,immutable"
}
]
},
{
"source": "/#(ngsw-worker.js|ngsw.json)",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache"
}
]
}
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
],
"storage": {
"rules": "storage.rules"
}
}
Tried firebase deploy command through Firebase to deploy the changes.
Deploying to 'nur-beta'...
i deploying database, storage, firestore, hosting
i database: checking rules syntax...
database: rules syntax for database nur-beta-default-rtdb is valid
i firebase.storage: checking storage.rules for compilation errors...
firebase.storage: rules file storage.rules compiled successfully
i firestore: reading indexes from firestore.indexes.json...
i cloud.firestore: checking firestore.rules for compilation errors...
cloud.firestore: rules file firestore.rules compiled successfully
After all resources deployement it gives assertion failed message.
Error: Assertion failed: resolving hosting target of a site with no site name or target name. This should have caused an error earlier. May I know what I'm missing while deploying the changes to already LIVE web-site hosted under Firebase Hosting.
There is no problem with your JSON file.
For deployment to firebase hosting first of all you have to build your project then you push your project to firebase hosting
command to build the project and deploy it to firebase
For angular use the ng build command in the terminal of your project location.
after building run the firebase deploy command
See the Magic
I ran into this issue recently and what worked for me was adding the target name in firebase.json:
"hosting": [
{
"target": "TARGET_NAME",
....
}
]
Please note that this is a hotfix. I have not fully investigated the root cause, but it helped me to deploy the app when I needed it.
I had the same issue, I fixed it by running
firebase init and reinitializing the project.
Related
I've built a nextjs app, with npm run build && npm run export and deployed to firebase using firebase deploy command. Prior to that, I've used firebase init in my project folder with just using the default options eg. not a single page application.
After I go and visit my project in firebase provided url however, I see the home page which is index.html, but whenever I use any other slug it throws a 404. Why this is happening ? I`ve included my firebase.json file, in case it might help.
firebase.json
"hosting": {
"public": "out",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
]
}
}
For everybody that wants to deploy a statically exported Next.js app to Firebase hosting:
You would have to add "cleanUrls": true to the hosting configuration in firebase.json like so:
"hosting": {
"public": "build",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"cleanUrls": true,
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
Without the "cleanUrls" configuration, the user would have to navigate to
https://example.com/login.html so that Next.js routes to the login page for example. With the parameter, a web request to https://example.com/login would work.
With the rules you have Firebase Hosting serves the exact file that the user requested.
To rewrite other/all URLs to your index.html, you'll need to add a rewrite rule to your firebase.json. A typical rewrite rule for single-page applications may look like this:
"hosting": {
// ...
// Serves index.html for requests to files or directories that do not exist
"rewrites": [ {
"source": "**",
"destination": "/index.html"
} ]
}
If anyone is still looking for this, this is what fixed it for me:
I used dynamicLinks as stated in the firebase hosting docs for the rewrites like so in my firebase.json file:
{
"hosting": {
"public": "out",
"ignore": ["firebase.json", "**/.*", "**/node_modules/**"],
"cleanUrls": true,
"rewrites": [
{
"source": "/**",
"dynamicLinks": true
}
]
}
}
This should allow dynamicLinks to start at ("https://CUSTOM_DOMAIN/{dynamicLink}").
I have a ReactJS app I built that works locally , I followed the instructions on the Firebase site
https://medium.com/#devesu/host-a-react-based-website-free-of-cost-with-firebase-hosting-and-connect-with-your-own-domain-53146731807f
and everything went to plan ,inthat there were no errors however when I follow the link provided
https://hydrometric-54ec0.web.app
or
https://hydrometric-54ec0.firebaseapp.com/
I get a default Firebase page and not my app, I think my firebase.json is missing something here it is below
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
If you are deploying any React project in Firebase. look for the below steps.
Once the react build is done through npm run build
Do firebase init
Select Hosting
Then CLI will ask for public directory- Write build and hit enter.
rewrite all urls to /index.html- Type Yes
File build/index.html already exists. Overwrite?- Type No or else it will overwrite your index file with firebase default index.
Before firebase deploy do the following things.
Replace this code in firebase.json
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
Then inside your react package.json
do blank path for homepage
"homepage": ""
Now yor are good to go for firebase deploy
I'm trying to deploy my app to firebase hosting and I'm getting this error in the console Uncaught SyntaxError: Unexpected token '<' in several *.chunk.js files. I have already deployed my app to gh-pages and everything has worked just fine. Also I have tried to deploy it to netlify hosting but I had Failed to load resource: the server responded with a status of 404 () in all *.js files.
Here is my firebase.json:
{
"hosting": {
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{"source": "/service-worker.js", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
]
}
}
For some reason these *.chunk.js files contain some html code
image from the console
But at the same time my local main.chunk.js does not
image of local file
Apparently, I had a conflict in my package.json file. Necessary for gh-pages "homepage": ... in package.json was somehow messing up with deployments to other hosting providers.
I recently started seeing an error on my localhost version of Firebase hosted website in Chrome:
Uncaught FirebaseError: Installations: Missing App configuration value: "appId" (installations/missing-app-config-values).
I'm not sure what has triggered this. I'm using the Firebase Hosting Reserved URL method to include the firebase config and it's had no issues until recently.
The config is loaded via <script src="/__/firebase/init.js"></script>.
This is the config file at that URL:
if (typeof firebase === 'undefined') throw new Error('hosting/init-error: Firebase SDK not detected. You must include it before /__/firebase/init.js');
var firebaseConfig = {
"projectId": "remotesoc...",
"databaseURL": "https://remotesoc...firebaseio.com",
"storageBucket": "remotesoc...appspot.com",
"locationId": "us-central",
"apiKey": "AIzaSyC3K7HT9- ... ",
"authDomain": "remotesoc...firebaseapp.com",
"messagingSenderId": "43697..."
};
if (firebaseConfig) {
firebase.initializeApp(firebaseConfig);
}
As you can see the "appId" value is missing. I'm almost certain this used to be there.
I've built and deployed the app multiple times which is listed as the way to ensure that Firebase has the correct config values for the project.
The app is definitely using the correct project, and has a reference to the hosting site in the firebase.json
{
"database": {
"rules": "database.rules.json"
},
"functions": {
"source": "functions"
},
"hosting": {
"site": "remotesoc...",
"public": "build",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
}
}
I've run >firebase init several times in an attempt to reset the CLI.
The deployed site has no missing config vars and is working perfectly this is only on localhost.
I could revert to using an included config file, however that negates the benefits of having the reserved URLs inject the values for you.
Any help would be appreciated.
The build process of create-react-app (yarn run build) deletes the old static JS file before building anew. When deployed to Firebase Hosting, the old JS files are not included and are no longer served.
However after visiting the old version the Service Worker (built by sw-precache and sw-precache-webpack-plugin, included by default in CRA) has cached the old HTML, which includes the old JS file, which is no longer served, so I get a white screen and an error in the console, which is only fixed by clearing cache and reloading.
Am I doing something wrong?
The issue was that my Cache-Control headers were too short, meaning that my JS file wasn't being cached for long enough, causing the browser to re-request it upon a reload and not find it until the Service Worker updates.
Resolution: have long Cache-Control headers
I resolved this slightly differently to Marks answer.
Within your firebase.json file you need to make sure the Service Worker and the index.html file aren't cached. For me it was the index.html being cached which was the main issue.
Webpack changes the chunks name with each build and removes the previous version from /build. Therefore when they don't get uploaded and your browser looks at the cached index.html file it causes the white screen and the error.
I ended up with the following in my firebase.json file. Hope that helps
{
"hosting": {
"public": "build",
"headers": [
{
"source": "/service-worker.js",
"headers": [
{
"key": "Cache-Control",
"value": "no-store"
}
]
},
{
"source": "/index.html",
"headers": [
{
"key": "Cache-Control",
"value": "no-store"
}
]
}
],
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
},
"functions": {
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint"
],
"source": "functions"
},
"firestore": {
"rules": "firestore.rules",
"indexes": "firestore.indexes.json"
}
}