Lexicon Version 1: 'Please connect to a network' issue after building an APK

[muninderkaur06]

Hi,
Can anyone help me, I am facing 'Please connect to a network issue' after I have followed the steps mentioned on https://docs.lexicon.is/play-store.

My built standalone app was successful created. After installing the APK in my phone, I am unable to perform login functionality or any other functionality that was connected to API.

[Kinostrome]

Hello.

Sorry to hear you're having trouble.

Could you please fill out the issue template properly so we can help you?

[muninderkaur06]

I have built a standalone app using command $ expo build:android in frontend/ folder as mentioned in https://docs.lexicon.is/play-store .

• Are you running it through Expo, or did you build it? Is it running on your mobile device or on a simulator?

I have created a build and selected APK mode. I have installed the APK in my mobile and running it there.

Steps to reproduce the behavior:

I followed the exact steps mentioned in doc which were:

1. Execute command $ expo build:android.
2. Selected APK mode.
3. Standalone app was built, A link was generated to download the APK file.
4. Installed the APK in my mobile and launched the app.
5. Login the correct credentials, getting issue Please connect to a network.

Expected behavior
I expected the app to run just like it was connected to the API and running using Expo Go app. It is running when I am using this app in Expo Go.

Screenshots

Desktop (please complete the following information):

• OS: Windows
• Browser: Brave
• Version: 14.43

Smartphone (please complete the following information):

• Device: Realme x2 pro
• OS: Android 11
• Browser : Crome
• Version: 104.0.5112.97

I have a query, what do we need to built in frontend/ folder?

[Kinostrome]

Thanks for filling out the issue template.

Where did you host the Prose GraphQL API? Are you sure you configured the app to point at that URL as part of the build process?

[muninderkaur06]

These are the values I have been using:

api/.env
PROSE_DISCOURSE_HOST=https://meta.discourse.org
PROSE_APP_HOSTNAME=0.0.0.0
PROSE_APP_PORT=8999

frontend/.env
MOBILE_PROSE_HOST=http://localhost
MOBILE_PROSE_PORT=8999

[Kinostrome]

These are the values I have been using:

api/.env PROSE_DISCOURSE_HOST=https://meta.discourse.org PROSE_APP_HOSTNAME=0.0.0.0 PROSE_APP_PORT=8999

frontend/.env MOBILE_PROSE_HOST=http://localhost MOBILE_PROSE_PORT=8999

If your MOBILE_PROSE_HOST is pointed at localhost on your development machine, how could your mobile device ever access it? If someone tries to download your app from the Play Store, what are they connecting to? They wouldn't be able to connect to your local development machine.

You need to deploy the API somewhere accessible on the web, and configure the mobile app to point at that instead. You should read carefully through the Deploying Prose section of the documentation to make sure you understand it well.

If you want a quick fix that is not a proper solution at all, you could temporarily use ngrok to expose the API running on your development machine to the web—just to get a working example on your mobile device.

[muninderkaur06]

Okay, I have pointed my deployment URL to the MOBILE_PROSE_HOST.
I created the build again and it worked.

After 10mins I realized that my metro bundler was already running in another cmd. When I stopped it, the fresh APK stopped working as well.

[muninderkaur06]

I created another APK after closing every CMD where my metro bundler was running. It is working just like it was in expo go where I had to run npm run dev cmd, otherwise it won't work.

It seems it is somehow linked.

What am I doing wrong?

[Kinostrome]

What did you deploy the API with / where is it deployed?

Are you sure you're actually running the APK on your mobile device? And not the app that Expo Go produces to help you develop?

How specifically are you loading the APK onto your device?

[muninderkaur06]

What did you deploy the API with / where is it deployed?

The API link we are using is of our server:
MOBILE_PROSE_HOST=https://api.websitetoolbox.com/qa1/api
MOBILE_PROSE_PORT=80

Are you sure you're actually running the APK on your mobile device? And not the app that Expo Go produces to help you develop?

Yes I am running it on my mobile device.

How specifically are you loading the APK onto your device?

After creating a build, I am getting a standalone app link : https://expo.dev/artifacts/348b615f-5551-4046-bcaa-f739fd579609
I am downloading it in my laptop and transferring the APK file though USB cable to my mobile device, installing it and running it. It needs the expo to be running..

[Kinostrome]

I was able to follow the steps in https://docs.expo.dev/archive/classic-updates/building-standalone-apps and produce a build that is independent of any running metro bundler (I had two running on my machine and took them both down before trying).

So I don't see any indicators that following the steps to build an APK and side load it with adb install would be coupled in any way to the metro bundler.

By the way, something that wasn't really clarified—what specifically do you mean by "the fresh APK stopped working as well"? Something can stop working in a lot of ways, so it would be helpful to know what you expected to happen versus what actually happened.

You should sanity check every step that you took, because it sounds a lot like you are still interacting with the Expo Go app. I would also recommend doing the trigger action that causes the Expo Go app's menu to appear (holding down 3 fingers on the screen / shaking the device). If the Expo menu appears, you are definitely not running your APK.

Last, I also noticed that my built APK does not have an icon because I did not configure one, so it was easy for me to differentiate it from any other Lexicon app that might be running on my Android device. Any indicators that would help to sanity check which app you're actually running might help to diagnose the problem.

[muninderkaur06]

By the 'fresh APK' I meant, I created another one after taking down my cmd where my metro bundler was running.

I am following the exact steps mentioned in your document. Do I have to add anything else in .env of frontend?

Screenshots:

In the following image, you can see that there is an individual app where I have replaced 'Lexicon' with 'Forums'. I am running this one. It works fine only when the metro bundler is running on my machine.

The following image shows that my Expo Go also does contain 2 projects, one is lexicon where I am modifying the code and the other one is my build (Forums), but I am not using it from here. I am running the one mentioned in 1st image.

[Kinostrome]

By the 'fresh APK' I meant, I created another one after taking down my cmd where my metro bundler was running.

I wasn't asking what you meant by fresh APK, I was asking what you meant by "stops working"—you haven't given any info on what the specific problem is you're encountering, other than saying some unspecified issue occurs when you stop running Metro.

Did you try activating the Expo menu?

Also, as I said, change the icon of your APK so you can be sure you are running the right app, don't use Expo Go in any way. You could even uninstall it and all "Forums" apps from your device before side loading the APK again.

There have been quite a few suggestions here for how to debug the issues, rule out certain possibilities, and narrow in on what is going wrong.
It is starting to seem like this is not specifically a problem with Lexicon but rather with using Expo. Unless you have some indication otherwise?

Also, if you've specified MOBILE_PROSE_HOST with https, you don't need to include MOBILE_PROSE_PORT, and it definitely shouldn't be 80 if you're running on https (443).

https://docs.lexicon.is/env-mobile

[muninderkaur06]

I was asking what you meant by "stops working"..

By this I meant, the API is unable to get connected with the app, this api link is working fine in postman and otherwise but it seems like only the frontend part is working and not the backend in APK.
When I am running the metro bundler, the API is getting connected with the APK and I am able to fetch the data like topics, posts and all..

Did you try activating the Expo menu?

Yes I did, No debugging menu was activated.

Actually, I was sure I am running my APK and not Expo Go. So, right now as per your suggestions, I have uninstalled Expo Go and modified .env file in frontend. (Now the file only contains MOBILE_PROSE_HOST value).
Tried building again.

BUILD RESPONSE

√ Build finished.

Successfully built standalone app: https://expo.dev/artifacts/a32de1fd-54bd-487a-8beb-7795a788a7cc

SCREENSHOT FOR WHAT IS EXPECTED
After entering the correct credentials, the following page should come but Instead I am getting 'please connect to an network' error. My credentials are correct.

SCREENSHOT FOR INFO ON APK APP I AM RUNNING

[Kinostrome]

Ok, there we go, thanks for providing details. Now I have some sense that this could be related to Lexicon.

Try hosting the API at the root of the domain with no path / endpoint. For example, it would be at https://api.websitetoolbox.com, with no /qa1 etc after it.

[muninderkaur06]

Actually, I cannot make changes to the hosting Urls. These endpoints are provided by the company I'm working for.

[Kinostrome]

I'm unable to reproduce your issue about metro somehow being coupled to a built APK. Something just isn't adding up there.

It may be useful to host the API at the root to verify that it is not causing an issue. However, considering that you said you have only specified MOBILE_PROSE_HOST and absolutely nothing else, then this probably isn't an issue.

You could also use some network analysis tools on Android, like HTTP Toolkit, to inspect what the specific URL is that your built APK is trying to contact, and verify whether or not that is what you expect.

Lastly, you'd need to verify that your host is actually online and reachable on the open internet. When I visited that URL, I encountered an error with some JSON that was sent back. It was not the GraphQL playground as would be expected.

For now, I'm closing this issue until we have a minimal reproducible example with Lexicon.

[Kinostrome]

"Please connect to a network" issues that are encountered after building your app often stem from misconfigured .env files, or the GraphQL API host not being online / reachable.

During development, there are more moving pieces to ensure that the Expo Go app on a mobile device is able to reach the development server running on the same network.

In production, it is much simpler.

The URL is simply MOBILE_PROSE_HOST + MOBILE_PROSE_PORT.

And MOBILE_PROSE_PORT can often be omitted, since the desired target will often just be something like https://prose.mysite.com. Because the https:// is already specified, there is typically no need to include a port number as well, although this of course varies by situation.