My website frontend is not working on mobile when appwrite provides data

[wispy parcel]

Hi,

I have a very very odd issue. I have setup Appwrite with docker a month ago. All is working great. My frontend website is made with Angular 15 and it runs great too (also on docker).
Both a wonderfully working great on desktop browsers, but when I try to reach for my website with my smartphone, it's a blackhole. Nothing goes through. I've spotted that by removing the platform in Appwrite in order to "unauthorized" API calls, the website loads great again on mobile (but without data obviously). It seems Appwrite is killing my website on smartphone for no reason, or at least, none I'm aware of.

Here is my website if you want to try: https://manaberrymusic.com/ (you've got data from appwrite on desktop, unreachable on mobile)
Here is my website with no platform clearance: http://noapi.manaberrymusic.fr/ (no api call are authorized from Appwrite, but the site is reachable on both desktop and mobile)

How can I solve this?
Thank you for your help!

[smoky thunder]

Okay so before digging into this super weird but interesting issue, let me ake sure I understand your problem correctly.

Here's what I've done, with results:

• https://manaberrymusic.com on Desktop -> loads the page and shows all assets.

• https://manaberrymusic.com on mobile (firefox + chrome + safari) -> loads the page but doesn't show any assets.

• http://noapi.manaberrymusic.fr/ on Desktop -> loads with no assets

• http://noapi.manaberrymusic.fr/ on mobile (firefox + chrome + safari) -> doesn't load at all. stuck on loading.

Here's the interesting thing though. On mobile, once the page loads (https://manaberrymusic.com), there isn't data but I can't seem to reload the page. Like I pull down to refresh, but it's stuck in the "loading" state

Desktop works perfectly fine which is expected.

The thing is, there should be 0 issues when going from mobile to desktop view cuz it's usually just css at play, ant not any JS.

Still, just to be sure, can you explain how you appwrite is setup? You said with the docker install command right?

Well after installing it with the one-line command, did you setup a proxy in front of Appwrite, or it's running on the ports you used during install?

And for your angular container, have you tried adding both the containers (apprwite and your angular app) in the same docker network?

[wispy parcel]

@smoky thunder Hi! Thanks for your reply.

I've used the one line command and setup appwrite using a custom domain name + port that both are registered in my NGINX Proxy Manager. It was working well right away so I didnt look further more (as you can see in the desktop browsing, it just works.)

On my end, I can load and reload (with no data) noapi. But I cant reload the regular website on mobile. It somehow just load once like it's loading from server cache or something.

And no, my Angular container is running on a bridge network from the same machine. It's not using the appwrite created network.

[smoky thunder]

Considering the load speeds on the website, I'm assuming you're using server-side rendering?

I haven't used Angular since it was called AngularJS so I don't know much about it LMAO

[wispy parcel]

Hahaha I feel you. It was hard moving from JS to Angular 8 back then. Big leap.

To be honest, I have no idea xD

I just compiled my project, and setup a ng-serve ready container. It just loads the file and I have not setup anything else.

I went for the "lazy way"

[smoky thunder]

hahaha makes sense

okay is your code open-source?

maybe there's something up with the appwrite calls being made from the app

[wispy parcel]

It's not open source but I can DM you the source

DMed the link

I'm running appwrite 1.3.8 btw

[silent zodiac]

any chance you can see if any errors are being thrown while on mobile?

[wispy parcel]

I don't know how. I've tried with the inspecter tool of Chromium but it doesnt throw a thing. Very odd.
@smoky thunder got my source code. Not sure how it goes.

[silent zodiac]

So you're doing remote chrome debugger/dev tools?

Can you see the network logs to see what's loading?

[silent zodiac]

i think you might have an infinite loop or something on your app...maybe nothing loads on mobile because there aren't enouhg resources to do so

CPU usage on your page is 100%

[silent zodiac]

maybe that's why the page gets stuck

it gets stuck on desktop too. i have a hard time closing the window

infinite loop probably happens after data gets loaded which is why CPU isn't 100% on noapi:

maybe you can add some console.log() around to try and see where the loop is

[wispy parcel]

I just have some "accessing logs" form the docker container on angular. But nothing fancy sadly.
Going to try some console.log thing. Thanks for suggesting.
So odd to have that issue on mobile. Makes no sense to me : <

[wispy parcel]

I have no issue loading on my localhost serve. But as soon as its the live website, the issue occurs

[silent zodiac]

did you check the CPU usage on localhost too?

[smoky thunder]

Alright so I've done ng serve for a dev server, and it worked perfectly fine

When I do ng build and map the index.html to a live server, mobile has issues

I have tried diagnosing the issue, but can't seem to figure it out