Wasp•5mo ago

'Network Error' When Accessinging Wasp App From Mobile Device

Hi all! I've made some exciting progress on a Wasp app I have been building, and I want to test it out on my physical iPhone connected to the same WiFi network as my desktop that is running my dev server. I am not a networking guru, so I apologize if the following question is silly: What is not working: When I navigate to my app login page via my desktop's private IP on my phone, (192.168.1.17:3000/login), I am presented with the Wasp login page, per usual. But when I attempt to actually login with a valid account, I get a 'Network Error' toast What I have done: 1 - Followed the Wasp docs (https://wasp.sh/docs/advanced/middleware-config) section 1 to create src/serverSetup.ts:

import cors from 'cors'
import { config, type MiddlewareConfigFn } from 'wasp/server'

export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // Example of adding an extra domains to CORS.
  middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '192.168.1.17:3000'] }))
  return middlewareConfig
}

import cors from 'cors'
import { config, type MiddlewareConfigFn } from 'wasp/server'

export const serverMiddlewareFn: MiddlewareConfigFn = (middlewareConfig) => {
  // Example of adding an extra domains to CORS.
  middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '192.168.1.17:3000'] }))
  return middlewareConfig
}

For kicks, I have also tried http://192.168.1.17:3000 and https://192.168.1.17:3000 2 - Via Windows Powershell admin, ran the following two commands to port forward to WSL running the Wasp dev server:

netsh interface portproxy add v4tov4 listenport=3000 listenaddress=0.0.0.0 connectport=3000 connectaddress=172.19.112.174

and

netsh interface portproxy add v4tov4 listenport=3001 listenaddress=0.0.0.0 connectport=3001 connectaddress=172.19.112.174

where 172.19.112.174 is my WSL IP 3 - Via Windows Defender Firewall, created a rule to allow inbound TCP traffic for local ports 3000 and 3001 on private networks (Which is what my home network is defined as in Windows network settings) 4 - Stopped and restarted my Wasp dev server several times & ran wasp clean 5 - Restarted my computer (Confirmed that my WSL private IP did not change and my port forwarding rules persisted) Any help appreciated, thanks!

Configuring Middleware | Wasp

Wasp comes with a minimal set of useful Express middleware in every application. While this is good for most users, we realize some may wish to add, modify, or remove some of these choices both globally, or on a per-api/path basis.

7 Replies

kapa.ai•5mo ago

Hi @SL8. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information in your question and the available knowledge sources, here are some key points and troubleshooting steps for accessing your Wasp app from a mobile device on the same network: 1. CORS Configuration Your approach to customizing CORS in src/serverSetup.ts is correct in principle, but the origin value in the CORS config must exactly match the protocol and port used by your frontend. For example, if you are accessing your app from your phone at <http://192.168.1.17:3000,> your CORS config should be:

middlewareConfig.set('cors', cors({ origin: ['<http://192.168.1.17:3000']> }))

middlewareConfig.set('cors', cors({ origin: ['<http://192.168.1.17:3000']> }))

Note the inclusion of the protocol (<http://>). Omitting it or using just the IP and port will not work, as CORS checks for an exact match. This is confirmed in the Wasp docs example for customizing global middleware Configuring Middleware. 2. Network and Port Forwarding You have set up port forwarding and firewall rules, which is good. However, there are known issues when running Wasp in WSL and trying to access it from another device on the network. Even with port forwarding, sometimes the server may not be listening on all interfaces. Make sure your Wasp app is listening on 0.0.0.0 and not just localhost. There are discussions about similar network issues in the community, especially when using WSL or Docker, and the solution often involves ensuring the server is accessible from outside the host machine, not just from within WSL or Docker containers Discord thread. 3. Environment Variables Make sure your .env.client and .env.server files are set up correctly. For example, in .env.client:

REACT_APP_API_URL=<http://192.168.1.17:3001>

REACT_APP_API_URL=<http://192.168.1.17:3001>

And in .env.server:

WASP_WEB_CLIENT_URL=<http://192.168.1.17:3000>

WASP_WEB_CLIENT_URL=<http://192.168.1.17:3000>

This ensures that both the frontend and backend know how to communicate with each other using the correct network addresses Discord thread. 4. Debugging Further - Check your browser's developer tools on your phone for the exact network error and CORS messages. - Try accessing the backend directly from your phone (e.g., <http://192.168.1.17:3001/>) to see if it responds. - If you see CORS errors, double-check the origin in your CORS config. - If you see "Network Error" but no CORS error, it could be a network/firewall issue or the backend not listening on the correct interface. 5. Additional Notes - Some users have reported that even with correct CORS and port forwarding, WSL networking can be tricky. Sometimes, running the server outside WSL (directly in Windows) or using a different setup (like Docker with proper network configuration) can help Discord thread. - If you are using HTTPS on your frontend, make sure your backend also supports HTTPS, or use HTTP for both during development. --- Summary:
Double-check your CORS origin (must include protocol), ensure your server is listening on 0.0.0.0, and verify your environment variables. If issues persist, it may be due to WSL networking quirks, which are a common pain point in the community. If you need more targeted help, please share the exact error message from your phone's browser console and confirm whether you can access the backend directly from your phone. Let me know if you need more details or want to try a specific troubleshooting step! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @SL8, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

SL8OP•5mo ago

@kapa.ai I have updated serverSetup.ts to middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, 'http://192.168.1.17:3000'] })) and restarted the dev server, but no luck

kapa.ai•5mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Given your update to serverSetup.ts:

middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<http://192.168.1.17:3000']> }))

middlewareConfig.set('cors', cors({ origin: [config.frontendUrl, '<http://192.168.1.17:3000']> }))

and a restart of the dev server, but still experiencing issues, here are some next steps and considerations based strictly on the knowledge sources: --- 1. Double-Check the Backend Port Your frontend runs on 3000, but Wasp's backend (API server) typically runs on 3001. The CORS origin should match where your frontend is served from (e.g., <http://192.168.1.17:3000>), but your mobile device must also be able to reach the backend at <http://192.168.1.17:3001.> Make sure your firewall and port forwarding rules also allow access to port 3001 from your mobile device, not just 3000 Discord support thread. --- 2. Confirm Environment Variables Ensure that your .env.client and .env.server files are set up so that the frontend knows how to reach the backend, and vice versa. For example, in .env.client:

REACT_APP_API_URL=<http://192.168.1.17:3001>

REACT_APP_API_URL=<http://192.168.1.17:3001>

And in .env.server:

WASP_WEB_CLIENT_URL=<http://192.168.1.17:3000>

WASP_WEB_CLIENT_URL=<http://192.168.1.17:3000>

This is necessary for CORS to work as expected and for the frontend to communicate with the backend Accessing App Config. --- 3. CORS and Preflight (OPTIONS) Requests If you are using custom HTTP endpoints (APIs), CORS must be enabled for all methods, including OPTIONS (preflight) requests. The recommended way in Wasp is to use apiNamespace with a middleware config function, as this ensures CORS is applied to all relevant routes and methods, not just GET/POST Making Sure CORS Works. --- 4. Debugging - Check your browser's network tab on your mobile device for the exact error (is it a CORS error, network error, or something else?). - Try accessing <http://192.168.1.17:3001/> directly from your mobile browser to see if the backend is reachable. - If you see CORS errors, ensure the origin in your CORS config exactly matches the protocol, host, and port of your frontend. --- 5. WSL/Networking Quirks If you are running Wasp in WSL, networking can be tricky. Even with port forwarding, sometimes the server may not be accessible from other devices. This is a known pain point in the community, and sometimes running the server directly on Windows or using a different setup (like Docker with proper network configuration) is necessary Discord support thread. --- Summary:
- Double-check that your mobile device can reach both ports 3000 (frontend) and 3001 (backend). - Ensure your CORS config and environment variables are correct and match the actual URLs being used. - If using custom APIs, use apiNamespace for CORS. - If the problem persists, it may be due to WSL networking limitations. If you can provide the exact error message from your mobile device's browser console or network tab, that would help narrow down the issue further. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @SL8, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

SL8OP•5mo ago

YO shoutout @kapa.ai . I just needed to add REACT_APP_API_URL=http://192.168.1.17:3001 to my .env.client. Working as expected on both desktop and mobile. Thanks g 🍻

kapa.ai•5mo ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- Great to hear it's working! 🎉 Yes, setting REACT_APP_API_URL=<http://192.168.1.17:3001> in your .env.client is the correct way to ensure your frontend knows how to reach the backend when accessed from other devices on your network. This is exactly how Wasp expects you to configure the client for cross-device development and is documented in the official guides and community discussions Docs: Accessing App Config Discord support thread. If you ever change your backend's address or port, just update this variable and restart your dev server. Cheers and happy hacking! 🍻 ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @SL8, I seem to be having a bit of trouble. Don't worry though, I've pinged my support and they will try to fix me up! :technologist: Perhaps try again in 15mins?

Filip•5mo ago

Hey @SL8. If I got it right, Kappa solved this for you? Anything else I can do to help?

SL8OP•5mo ago

Yessir we’re all good! Appreciate the check-in

Gaming

Programming

'Network Error' When Accessinging Wasp App From Mobile Device

Did you find this page helpful?