Flutterweb gorouter path with parameters show blank screen - flutter

I am using gorouter in flutter to navigate. whenever i use context.push("/article/1234") it goes to proper page but if I put the link directly in browser I get a blank screen.
following is my code
GoRoute(
path: "/article/:id",
builder:(context,state) => ArticleScreen(id:state.params['id']),
),
if i use below code it works as expected but if i put the url in browser it shows a blank page
context.go("/article/1234");

Update
This issue is fixed and merged in the Flutter's master channel. Might get live in the future stable releases.
GitHub Issue to keep track of the problem.
Also, I could not find permanent fix for this but I found this pull request which actually gives a fix the problem.
You can also configure the main.dart.js and flutter_service_worker.js URLs in the index.html file as described in this comment to something that matches your app:
_flutter.loader.loadEntrypoint({
entrypointUrl: "/YOUR_APP_BASE/main.dart.js",
serviceWorker: {
serviceWorkerVersion: serviceWorkerVersion,
serviceWorkerUrl: "/YOUR_APP_BASE/flutter_service_worker.js?v=",
},
That way the files will be requested from their "absolute" URL, rather than URLs relative to the ones specified by the PathStrategy.
(If your base URL is "/", you just need: /main.dart.js and /flutter_service_worker.js?v=)

Related

How to use the keyword "location" in the URL parameter in AWS Amplify

I am currently working on a 1 page HTML app that uses URL parameters to do an API call. the URL parameters are set and used in QR codes so its necessary that they are able to change dynamically. A example URL would be something like app.com/index.html/?environment=demo&location=Kiosk
I currently have this app deployed in AWS Amplify, but I cant get other keywords to chain together. I have the following redirects in place:
These redirects make sure that every URL parameter I pass in the link works EXCEPT some keywords like the "location" keyword, next to some others. Using this keyword as a URL param gives a 502 server error, or if the redirects are not used an access denied error.
does anyone know how to get the location keyword to work? Thanks in advance!
You should be able to use a single rule that will forward everything to index.html EXCEPT urls with a "file extension" from the list below. That lets all your links work, but assets like images, fonts, code will pass through.
Doc for: Using Redirects - Single Page Apps
</^[^.]+$|\.(?!(css|gif|ico|jpg|js|png|txt|svg|woff|woff2|ttf|map|json)$)([^.]+$)/>

Unable to render OneNote image resource after appending preAuthenticated=true option in OneNote api call

https://github.com/microsoftgraph/microsoft-graph-docs/issues/2624
I am experience the issue as the above.
I am trying to save the content of a page with a reference to an image by calling https://graph.microsoft.com/v1.0/users/{userId}/onenote/pages/{pageId}/content?preAuthenticated=true
Per this - Downloading one note page with image content as HTML
By appending "?preAuthenticated=true" when you do the fetch, it will make the image public.
But when I tried to render the html, it's giving me "Failed to load resource: the server responded with a status of 401 (Unauthorized)".
It appears that something is wrong with the official document: Get OneNote content and structure with Microsoft Graph.
We can see that the service root URL is https://graph.microsoft.com/{version}/{location}/onenote/.
But in any of the samples on this page, the URL is still https://www.onenote.com/api/v1.0/me/notes.
Currently, when you add ?preAuthenticated=true you will get such a URL for a image on this page:
https://graph.microsoft.com/v1.0/users('{userID}')/onenote/resources/{resourceID}/content?publicAuth=true&mimeType=image/png
But when you try to access it in a browser, you will get 401 error Access token is empty.
A workaround is to modify the URL to:
https://www.onenote.com/api/v1.0/resources/{resourceID}/content?publicAuth=true&mimeType=image/png
Then you will get the image.
https://github.com/microsoftgraph/microsoft-graph-docs/pull/4339/files
I think they removed the support for it.
Bit of off topic, but I figured out how to get the image to render.
https://learn.microsoft.com/en-us/graph/api/resource-get?view=graph-rest-1.0&tabs=http
When you call /onenote/pages/{id}/content, the image has a reference to a source like this
src="https://graph.microsoft.com/v1.0/users({userId})/onenote/resources/{resourceId}/$value" along with data-src-type="image/jpeg"
do a get request to this endpoint and you'll the image binary, convert the binary to base64, and then just render the html by replacing the src with base64.

FlowRouter Reload Doesn't Route

I'm using FlowRouter. If I start on the homepage everything works well. I can work through the routes (change the pages) without problem. However, if I hit refresh in the browser, I get a series of errors. My url looks like this:
/story/586d536e34821281735b53a4
The ID is being returned in console under the following method:
Tracker.nonreactive(function(){
I think the subscription is being completed, so I'm a little confused as to why reloading a url is different than loading from the home page.
What am I not understanding here?
Reloading a url will make a HTTP request to server to get all the application source. Whereas navigating to a route from another one does not make any HTTP requests to get the application source because they are already available (they were loaded from the previous route), in this case the router will just get the appropriate content and render on the page. This is normal behaviour for Meteor apps and all other single-page apps
The error you encounter is because your data is not yet available on client, to fix it you could simple use a placeholder if the value is undefined.

Keystone, feature galleries on home page

I used yo keystone to generate a keystone webpage and basically what I want is to sort of feature galleries on the homepage. I added the line
view.query('galleries', keystone.list('Gallery').model.find().sort('sortOrder'));
to my index.js file in the routes/views folder and basically copied the gallery.jade file into index.jade so that I could make sure the page could find "galleries" but when i try to open the page, i get the error that "galleries" is undefined.
I have also tried adding this bit of code to the same index.js
locals.data = {
galleries: keystone.list('Gallery').model.find().sort('sortOrder');
};
and calling data.galleries in index.jade but it didn't work either.
How do I get this gallery list on my jade file?
Turns out that my original change with view.query was correct. I just needed to restart my database.

firefox pagemod include sometimes not working?

The piece of code for a firefox pagemod here doesn't work on every facebook page:
var pageMod = require("sdk/page-mod");
pageMod.PageMod({
include: /.*facebook.*/ ,
contentScript: "window.alert('Page matches ruleset');",
contentScriptWhen: 'end'
});
I s there any misinterpretation I have about the include part?
I have also tried "*fecebook.com" and still sometimes I don't get the alert command executed
Example:
for example for both the above solutions when i manually use the address bar to go to fecebook.com it works but when I use fecebook's home button which again goes to facebook.com it doesn't work
It doesn't hurt to be as precise as you can be with the regular expression you use:
var pageMod = require("sdk/page-mod");
pageMod.PageMod({
include: /^http[s]*\:\/\/.*facebook.com\/.*/,
contentScript: "window.alert('Page matches ruleset');",
contentScriptWhen: 'end'
});
The other factor I noticed when testing this on Facebook.com is that a lot of the time a change in the page url does not necessarily mean the page is being completely reloaded. The contentscript code in your example will only file when the page is initially loaded. If you want to react to changes in the url regardless of page loads, you might need to monitor the html5 history api in your content script and then react to those changes as well.