how to configure the bundle extension in Firebase on Flutter project - flutter

I am currently trying to build the pipeline for serving a bundle of data in my project and I can't make it work even by reading the step by step documentation that firebase gives us.
I have followed the documentation and was able to create a bundle through this documentation:
https://firebase.google.com/docs/extensions/official/firestore-bundle-builder
But when I get to the documentation on building and serving the bundle, things start to falling apart since I cannot find complete resources explaining how to implement it
So that is how I implemented it:
{
"functions": [
{
something
"ignore": [
something
],
something
]
}
],
"hosting": {
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "/bundles/*",
"function": "ext-firestore-bundle-builder-serve"
}
]
}
}
Is it in the right level or not ? No idea... but that's what I did and I deployed it successfully.
Now, in the client integration part:
import { loadBundle } from "firebase/firestore";
// Download the bundle from the Firebase Hosting CDN:
const bundle = await fetch("/bundles/:bundleId");
// If not using a CDN, download the bundle directly:
// const bundle = await fetch('https://<location>-<project-id>.cloudfunctions.net/ext-firestore-bundle-builder-serve/:bundleId');
await loadBundle(bundle);
I do not know again how to implement it since the import give me an error, and every functions too.
I'd appreciate your help.
I am not new with firebase and I am not that bad at finding the documentation in order to understand but I don't know if the SEO is not good or the documentation not complete and will be completed but I failed to find it..
Thanks for your time

Related

Amplify Flutter: How to connect to existing GraphQL endpoint

I'm implementing Amplify Flutter and want to connect it to our own custom GraphQL endpoint (i.e. non-AppSync). I am however having trouble getting it to work. The official documentation is not super-clear on this (at least not for those of us who are completely new to Amplify). What I have done:
In pubspec.yaml, I’ve added and installed the amplify_api package.
In main.dart, I’ve updated _configureAmplify() to add the AmplifyAPI() plugin.
In amplifyconfiguration.dart, I have manually added the following snippet:
"api": {
"plugins": {
"awsAPIPlugin": {
"xxxxxAPI": {
"endpointType": "GraphQL",
"endpoint": "http://xxxxxxxx.eba-fmuh2afu.eu-north-1.elasticbeanstalk.com/query",
"region": "[REGION]",
"authorizationType": "AMAZON_COGNITO_USER_POOLS"
}
}
}
}
But I keep getting the error "There is no API configured for this plugin with matching endpoint type." What am I doing wrong? (Note: I presume that I don't have to add any "region" value if I'm pointing to our own custom GraphQL endpoint).
I was able to fix this issue by closing the app and uninstalling it, then run again and log in to start fetching API

Flutter website on firebase hosting works fine with domain 1 but not domain 2

I am using flutter web to create a website for my buisness. I am hosting it on firebase hosting with the url
https://xspectre-9a3b3.web.app/
Now when I added the new domain
https://xspectre.net
The website does not load in this domain and gives the error
main.dart.js:1 Uncaught SyntaxError: Unexpected token '<'
(index):1 Uncaught (in promise) DOMException: Failed to register a ServiceWorker for scope ('https://xspectre.net/') with script ('https://xspectre.net/flutter_service_worker.js'): The script has an unsupported MIME type ('text/html').
It does not work with https://xspectre-9a3b3.firebaseapp.com/ either. What should I do?
EDIT
I discovered the real error is not the MIME type one since it is in my real project too. The actual error is somehow
Uncaught SyntaxError: Unexpected token '<'
When I open the main.dart.js it shows me different code then it should. It shows me the html files not the main.dart.js code and I think that is what is causing the problem. I dont know how or why the files are different for both the URLs.
**EDIT 2 **
Finally figured out the root problem.
Whenever I try to do firebase init, it goes to initialize the whole flutter directory. This means that it says,
You're about to initialize a Firebase project in this directory:
C:\FlutterProjects\xspectre
and not
You're about to initialize a Firebase project in this directory:
C:\FlutterProjects\xspectre\build
Now I need to figure out how to do firebase init and deloy in the /build and not root
The website probably still works for you as it is already cached by the service worker. Try with another browser and it will not work.
firebase init should be run in the project directory, not in the build directory.
After that, edit your firebase.json file to look like
{
"hosting": {
"public": "build/web",
"ignore": [
"firebase.json",
"**/.*",
"**/node_modules/**"
],
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
],
"headers": [
{
"source": "**",
"headers": [
{
"key": "Cache-Control",
"value": "no-cache"
}
]
}
]
}
}
"public": "build/web" points to the directory where the files for deployment are.
Now you can do flutter build web and firebase deploy

Product images issue in vue storefornt

I integrated vue store front with magento 2, frontend works fine but product images not display in frontend. It throws error Unable to compile TypeScript:\nsrc/image/action/local/index.ts(27,18): error TS2339: Property 'query' does not exist on type 'Request<any, any, any, any>'. imagemagick is also installed and imgurl in local.json is also defined.
Anyone please know about this why error display.
It is about this.req which is typeof Request from express - it has query property. Please make sure you have yarn.lock from the original repo and reinstall dependencies.
If you are using docker, you might need to add:
- './yarn.lock/var/www/yarn.lock'
To volumes section in the docker-compose.nodejs.yml
i have found a simple solution you can try that
copy all your magento 2 pub/media data in vue-storefront-api/var/magento-folder/pub/media
Or
create a symlink if you are working on localhost
vue-storefront-api/config/local.json
"magento2": {
"imgUrl": "http://magento-domain/pub/media/catalog/product",
"assetPath": "/../var/magento-folder/pub/media",
}
vue-storefront/config/local.json
"images": {
"useExactUrlsNoProxy": false,
"baseUrl": "http://localhost:8080/img/",
"useSpecificImagePaths": false,
"paths": {
"product": "/catalog/product"
},
"productPlaceholder": "/assets/placeholder.jpg"
},
run command in vue-storefront and vue-storefront-api

write log to Application insights from local service fabric

I am trying to integrate Azure App insights service into the service fabric app for logging and instrumentation. I am running fabric code on my local VM. I exactly followed the document here [scenario 2]. Other resources on learn.microsoft.com also seem to indicate the same steps. [ex: https://learn.microsoft.com/en-us/azure/service-fabric/service-fabric-diagnostics-event-aggregation-eventflow
For some reason, I don’t see any event entries in App insights. No errors in code when I do this:
ServiceEventSource.Current.ProcessedCountMetric("synced",sw.ElapsedMilliseconds, crc.DataTable.Rows.Count);
eventflowconfig.json contents
{
"inputs": [
{
"type": "EventSource",
"sources": [
{ "providerName": "Microsoft-ServiceFabric-Services" },
{ "providerName": "Microsoft-ServiceFabric-Actors" },
{ "providerName": "mystatefulservice" }
]
}
],
"filters": [
{
"type": "drop",
"include": "Level == Verbose"
}
],
"outputs": [
{
"type": "ApplicationInsights",
// (replace the following value with your AI resource's instrumentation key)
"instrumentationKey": "XXXXXXXXXXXXXXXXXXXXXX",
"filters": [
{
"type": "metadata",
"metadata": "metric",
"include": "ProviderName == mystatefulservice && EventName == ProcessedCountMetric",
"operationProperty": "operation",
"elapsedMilliSecondsProperty": "elapsedMilliSeconds",
"recordCountProperty": "recordCount"
}
]
}
],
"schemaVersion": "2016-08-11"
}
In ServiceEventSource.cs
[Event(ProcessedCountMetricEventId, Level = EventLevel.Informational)]
public void ProcessedCountMetric(string operation, long elapsedMilliSeconds, int recordCount)
{
if (IsEnabled())
WriteEvent(ProcessedCountMetricEventId, operation, elapsedMilliSeconds, recordCount);
}
EDIT
Adding diagnostics pipeline code from "Program.cs in fabric stateful service
using (var diagnosticsPipeline =
ServiceFabricDiagnosticPipelineFactory.CreatePipeline($"{ServiceFabricGlobalConstants.AppName}-mystatefulservice-DiagnosticsPipeline")
)
{
ServiceRuntime.RegisterServiceAsync("mystatefulserviceType",
context => new mystatefulservice(context)).GetAwaiter().GetResult();
ServiceEventSource.Current.ServiceTypeRegistered(Process.GetCurrentProcess().Id,
typeof(mystatefulservice).Name);
// Prevents this host process from terminating so services keep running.
Thread.Sleep(Timeout.Infinite);
}
Event Source is a tricky technology, I have been working with it for a while and always have problems. The configuration looks good, It is very hard to investigate without access to the environments, so I will make my suggestions.
There are a few catches you must be aware of:
If you are listening etw events from a different process, your process must be running with a user with permissions on 'Performance Log Users. Check which identity your service is running on and if it is part of performance log users, who has permissions to create event sessions to listen for these events.
Ensure the events are being emitted correctly and you can listen to them from Diagnostics Events Window, if it is not showing there, there is a problem in the provider.
For testing purposes, comment out the line if (IsEnabled()). it is an internal check to validate if your events should be emitted. I had situations where it is always false and skip the emit of events, probably it cache the results for a while, the docs are not clear how it should work.
Whenever possible, use the EventSource from the nuget package instead of the framework one, the framework version is full of bugs and lack fixes found in the nuget version.
Application Insights are not RealTime, sometimes it might take a few minutes to process your events, I would recommend to output the events to a console or file and check if it is listening correctly, afterwards, enable the AppInsights.
The link you provide is quite outdated and there's actually a much better way to log application error and exception info to Application insights. For example, the above won't help with tracking the call hierarchy of an incoming request between multiple services.
Have a look at the Microsoft App Insights Service Fabric nuget packages. It works great for:
Sending error and exception info
Populating the application map with all your services and their dependencies (including database)
Reporting on app performance metrics,
Tracing service call dependencies end-to-end,
Integrating with native as well as non-native SF applications

Can I host a satis repo simply as a github repo?

I've set up a satis repository on github to share some company internal packages across projects.
Now when I try to "depend" on the new repository, I tried this:
"repositories": [ {
"type": "composer",
"url": "https://raw.githubusercontent.com/[organisation]/satis/master/web/packages.json?token=[token-copied-from-url]"
} ]
and it works far enough that composer finds package.json, however, then it fails with:
[Composer\Downloader\TransportException]
The "https://raw.githubusercontent.com/[organization]/satis/master/web/packages.json?token=[token-copied-from-url]/include/all$[some-json-file].json" file could not be downloaded (HTTP/1.1 404 Not Found)
which isn't surprising as the ?token part appears to generate an invalid url.
I can work around this by manually moving the contents of the included file into packages.json directly, but this is less than ideal, especially if satis decides to generate multiple files.
Another problem I assume this will cause is that I don't know much about the validity of the token. Perhaps it doesn't have a long lifetime and then satis will need to be regenerated regularly.
Is there a way I can get away with hosting my satis repo as "just" a github repo?
You can store your static Satis repository in a private GitHub repo, and then use GitHub's raw.githubusercontent.com domain to serve it over HTTPS. The slightly hacky part is ensuring that composer properly authenticates against the GitHub repo.
Push Satis repository to GitHub
Generate your Satis repository and push it to your private GitHub repo, lets's say https://github.com/your-org/your-satis-repo inside the output/ directory.
Prepare your projects' composer.json files
In your projects' composer.json files, add your Satis repo to the "repositories" section:
{
"type": "composer",
"url": "https://raw.githubusercontent.com/your-org/your-satis-repo/master/output"
}
Set up HTTP basic authentication
Finally, to make composer authenticate via HTTP basic auth against raw.githubusercontent.com you will need do add a new entry to the "http-basic" section in your local composer's auth.json:
{
"http-basic": {
"raw.githubusercontent.com": {
"username": "GITHUB_USERNAME",
"password": "GITHUB_TOKEN"
}
}
}
Caveats
We've found that raw.githubusercontent.com is cached, so it can take a few minutes before changes to your Satis repository are visible.
Initial testing suggests it can be done.
I think you need to remove packages.json from your repository URL and I suspect the ?token parameter. In theory you can pass the token via a header:
https://developer.github.com/v3/#authentication
I have not tested this however.
You can see a working test without authentication here:
https://github.com/markchalloner/satishostcomposer
https://github.com/markchalloner/satishost
To try it out:
git clone git#github.com:markchalloner/satishostcomposer.git
cd satishostcomposer
composer install
Should install vendor/markchalloner/satishostdemo
Example satis.json:
{
"name": "Satis Host",
"homepage": "https://raw.githubusercontent.com/markchalloner/satishost/master/web/",
"archive": {
"directory": "dist",
"format": "tar",
"prefix-url": "https://raw.githubusercontent.com/markchalloner/satishost/master/web/",
"skip-dev": true
},
"repositories": [
{
"_comment": "Demo packages",
"type": "package",
"package": {
"name": "markchalloner/satishostdemo",
"version": "0.1.0",
"dist": {
"type": "zip",
"url": "dist/demo.zip"
}
}
}
],
"require-all": true
}
Example composer.json (in your project):
{
"repositories": [
{
"type": "composer",
"url": "https://raw.githubusercontent.com/markchalloner/satishost/master/web",
"options": {
"http": {
"header": [
"API-TOKEN: YOUR-API-TOKEN"
]
}
}
}
],
"require": {
"markchalloner/satishostdemo": "0.1.0"
},
"minimum-stability": "dev"
}
Thanks