Whenever I deploy my Firebase app for hosting that is a packaged Create-React-App then the first time the browser loads it the console shows:
main.27e9b1c2.js:1 Uncaught SyntaxError: Unexpected token <
F5 refresh fixes it. Then the site is working perfectly until the next time I deploy.
I am using firebase hosting and firebase tools to deploy. The number on the mainjs is the current build.
you can disable cache in firebase.json
"headers": [
{
"source": "/service-worker.js",
"headers": [{ "key": "Cache-Control", "value": "no-cache" }]
}
}
Related
I've set up multiple different indexes on my Firestore development database. Now, I would like to export them into the firestore.indexes.json so that the process of setting up prod environment would be easier. Is there a way to export those indexes using Firebase CLI? The same applies to security rules, although I know that I can copy paste them.
It's possible!
Run from CLI firebase firestore:indexes inside your firebase project folder.
Providing you have indexes already setup and logged into Firebase via the CLI too, you'll get a formatted JSON output for you to copy.
Example:
{
"indexes": [
{
"collectionId": "teslaData",
"fields": [
{
"fieldPath": "Model",
"mode": "ASCENDING"
},
{
"fieldPath": "Price",
"mode": "ASCENDING"
}
]
}
]
}
Exported indexes can be re imported using firebase deploy --only firestore:indexes. Check following doc extract.
https://firebase.google.com/docs/firestore/query-data/indexing
You can also deploy indexes with the Firebase CLI. To get started, run
firebase init firestore in your project directory. During setup, the
Firebase CLI generates a JSON file with the default indexes in the
correct format. Edit the file to add more indexes and deploy it with
the firebase deploy command. If you only want to deploy indexes, add
the --only firestore:indexes flag. If you make edits to the indexes
using the Firebase console, make sure you also update your local
indexes file.
I'm using Firebase CLI 4.2.1 if that helps.
Edit: It's still working as of 9.6.0.
In your Firebase project folder execute this in the terminal:
firebase firestore:indexes > firestore.indexes.json
And it will save a file called firestore.indexes.json with your indexes.
You can then upload that file onto other Firebase projects.
I don't think there is currently an API for getting the Firestore security rules from a project. You can deploy rules through the CLI, which can also be embedded in custom Node scripts, and invoked from CI processes. But as far as I know there is no API to read the rules from a project.
It sounds like a good reason to file a feature request.
This is how my project files are laid out
myProjectFolder
.firebaserc
firebase.json
firestore.indexes.json
functions
Run the commands firebase use myApp-dev then firebase firestore:indexes > firestore.indexes.json to export your current dev project's indexes to a file
myApp-dev and myApp-prod is the "Project ID". To find it in Firebase, click the cog wheel next to "Project Overview" --> Project settings --> General tab (you should see it below)
In file firebase.json make sure it is pointing to the exported firestore.indexes.json for its indexes:
{
"functions": [
{
"source": "functions",
"codebase": "default",
"ignore": [
"node_modules",
".git",
"firebase-debug.log",
"firebase-debug.*.log"
],
"predeploy": [
"npm --prefix \"$RESOURCE_DIR\" run lint",
"npm --prefix \"$RESOURCE_DIR\" run build"
]
}
],
"firestore": {
"indexes": "firestore.indexes.json"
}
}
Run the commands firebase use myApp-prod and firebase deploy --only firestore:indexes
If the accepted answer isn't working for you (I got a permissions error) for firestore indexes you can go to your firebase console > Cloud firestore > Indexes then open up the network tab in inspector, clear all the requests and refresh the page. Once the page is loaded you can find the JSON formatted response of the indexes (I found mine by searching the word 'indexes' in the search bar of the network tab) in the XHR filter of network requests. It should look something like 'indexes?key=...' you can copy this JSON response.
If you've already initialized firebase in your project with firebase init, you can simply paste it into your project's firestore.indexes.json file.
Then change each name property to a collectionGroup property. eg: 'name': 'projects/[your project name]...' to 'collectionGroup': '[name of collection for this index]'
Run firebase deploy --only firestore:indexes to update any changes made in your text editor back to the firestore indexes tab
for firestore security rules, in a less complicated but similar manner, you can copy and paste the rules shown in the firebase console into the firestore.rules file of your project.
sample firestore.indexes.json file
{
"indexes": [
{
"collectionGroup": "faq",
"queryScope": "COLLECTION",
"fields": [
{
"fieldPath": "searchKeywords",
"arrayConfig": "CONTAINS"
},
{
"fieldPath": "answered",
"order": "ASCENDING"
},
{
"fieldPath": "relevanceScore",
"order": "ASCENDING"
},
{
"fieldPath": "__name__",
"order": "ASCENDING"
}
]
}
]
}
The Cloud Firestore Index Definition Reference page shows how.
You can export indexes with the CLI using firebase
firestore:indexes.
Created an app in vue-cli and then I build the dist folder for production with a new app version.
The problem occurs when I have to make some changes and I have to redo the deployment. After this,App doesn't work with updated version but if I clear the chrome cache in the site settings of the particular site , the app works fine again.
The app is deployed on Firebase Hosting.
A solution to clear chrome cache when I release a new vue version?
The "smart" caching can be done by the server-side technology. If you have access to this and can manage the type of caching, you can set it to use etag, which I've found is quite reliable.
Vue apps, bundled using webpack, will generate filenames with hashes. So if there is anything different in the app, or chunk(if you're code splitting) the generated file names will be different. The issue though is that the index.html will keep the same name. So if you can set the correct caching options for that file alone, that will solve most of your problems. Alternatively, you can set a really short cache time or no cache at all (since it should be a small file) if you're concerned about the page loading from cache. But the problem still remains that this part of the caching functionality is entirely out of reach of the vue app.
Looks like with firebase you can edit the configuration and set headers per resource ref
so you could set a long max-age for css and js, and short for index.html like so...
"headers": [ {
"source": "**/*.#(eot|otf|ttf|ttc|woff|font.css)",
"headers": [ {
"key": "Access-Control-Allow-Origin",
"value": "*"
} ]
}, {
"source": "**/*.#(jpg|jpeg|gif|png|js|css)",
"headers": [ {
"key": "Cache-Control",
"value": "max-age=7200"
} ]
}, {
"source": "index.html",
"headers": [ {
"key": "Cache-Control",
"value": "max-age=300"
} ]
} ],
I had the same problem when updating my project.solution :the version number in package.json before running the build command fixed it.
package.json file:
{
"name": "project-name",
"version": "0.1.1",
"private": true,
...
}
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?
I'm using Webpack to build my React project, and I deploy it with Firebase hosting. It's a SPA, the index.html loads a single JS bundle, it all works great.
Except that sometimes, I get this error from some users:
SyntaxError: Unexpected token <
File https://tribeez.com/aa298947341ff919a5feecdc7367a6145a4a7d87.js line 1
col 1 in [anonymous]
It means that the JS bundle returned some HTML instead, and that happens when the file does not exist, thus returning the content of my index.html.
My firebase.json is quite basic:
{
"hosting": {
"public": "dist",
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
}
}
So I was thinking, it must be when a visitor's browser is trying to fetch an older version of the JS bundle, but how can this happen? How can it load an older version of index.html (from its cache then) but can not load its related JS bundle from its cache too?
Should I tell Webpack to always create the JS bundle with the same filename and let Firebase Hosting handle the caching? Or should I handle this differently?
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