Facebook Instant Game Faile to load some assets (images and fonts) - reactjs

When I publish in a Facebook instant game, my react app doesn't load some images and fonts.
The strange situation:
/src/assets
in this folder, I have 5 images.png
all of it is working remotely
when I run the npm run build 3 of 5 images vanish from de build folder/static/media, and only 2 remain
when I deploy it on Facebook, the 3 that vanish appear in the application, in the network seems that the build turns these 3 png into base64;
the 2 remains do not work
the fonts do not work too.
Any Idea of why?
I have already tried some of the solutions suggested in other topics like setting a tag in HTML, or change the image of the folder (putting It in the public results in an error because of a react validation)
The error in console: net::ERR_ABORTED 404.

Related

Wagtail admin won't load most css or js static files

I have a site https://resilium.group that I recently upgraded to Wagtail 4.2 and added a generic admin view using ModelViewset to.
Now, if I visit /admin, some of the css and js fails to load, whereas it did before and I don't know why.
Some observations:
All 404 errors happen inside wagtailadmin
Some wagtailadmin js will load. These are all in the vendor or images subfolder
Some of the hashed versions will not load, while the unhashed will load:
e.g. this will not load: https://resilium.group/static/wagtailadmin/css/core.7ffe08725eaf.css
This will load: https://resilium.group/static/wagtailadmin/css/core.css
The same goes for core.js, vendor.js, wagtailadmin.js, telepath.js, sidebar.js
And sometimes both will not load:
This will not load: https://resilium.group/static/wagtailadmin/js/vendor/jquery-ui-1.13.2.min.26d3af3a7ec4.js
This will also not load: https://resilium.group/static/wagtailadmin/js/vendor/jquery-ui-1.13.2.min.js
Same for icons.js
At this point, I struggle to even know where to look. I'm also having difficulty getting the issue reproduced locally. Everything works ok if I'm serving local static files. I appreciate any help you can give.
If this is a production site (i.e. not running with DEBUG = True), you need to run ./manage.py collectstatic. This step is necessary after any deployment that changes static files, including Wagtail upgrades.
It looks like Cloudflare is caching your 404s. Try purging the entire site:
https://developers.cloudflare.com/cache/how-to/purge-cache/#purge-everything

How to make Vite development server serve images in nested folder

I'm working on a React app, using Vite. Once I build the app, I have no problem seeing the images, but during development, I get the following error in the browser:
GET https://localhost:5173/uploads/2/6337005fd6d4d.png 404 (Not Found)
Images are supposed to be served from a folder at public/uploads. The favicon.ico at public isn't being served either (during development).
Ok, found the answer to my own question: In vite.config.js, I had to set the root of the project, and the publicDir, which by the way, must be set relative to the root.

Cannot hide the URL bar in a TWA gatsby react app on Android

I have my app pushed out currently to google play. However when I download and install, the url bar still shows on the app.
Steps I've taken to solve this with no changes:
I realized I was using the upload certificate in my assetlinks.json, so I copied and pasted the app signing certificate from my google play console in it instead.
In my manifest.webmanifest file, I was using display: 'minimal-ui' in my gatsby-config.js file, so I changed it to display: 'standalone' and rebuilt the project, allowing the change to carry over to the manifest.webmanifest file.
Still no change. When I run the app in Lighthouse audit, the simulator doesn't show a URL bar, but it does on my phone when I install it. Anything else to try?

"The webpage at chrome-extension://myextensionid/ might be temporarily down or it may have moved permanently to a new web address. ERR_UNEXPECTED"

I am developing a react chrome extension.
I have a footer bar to navigate across my pages(components).
I am using react-router-dom to switch/route between pages.
My extension works perfectly when debugging but, after I build it (npm run build) and Load Unpacked at my extensions, the first page renders good but when I click my footer navigation buttons, my extension shows this message:
The webpage at chrome-extension://myextensionid/ might be temporarily down or it may have moved permanently to a new web
address. ERR_UNEXPECTED
Is it because I did not publish it yet, routing only works after I publish my extension?
Any ideas what can be wrong, can you please help me with this issue?

loading image using anglularjs and ibm bluemix

I developed an application using nodes and angularjs.
I have an html file that I should display an image.
when running the application on localhost, everything work perfectly and the application displays the image.
I used this code for displaying image:
<img ng-src="./app/images/{{idimage}}.jpeg" ></img>
when I do a push for this application to ibmbluemix, the console told me that there are a 404 not found error.
Any idea please for how displaying image using angulars in ibm bluemix.
Thanks for helps
A possible reason for this issue is if you are pushing the app from outside of the app folder by using the manifest path parameter, and when you run your app locally, you also run it from outside the app folder.
After pushing your app, use cf ssh (docs) to get inside your deployed app. You can then take a look around using linux tools like ls to see what folders have been deployed.

Resources