In development mode can I change the hostname of the server to something other than "localhost?"
I'd like to load my development site from my phone and other machines on my local network. I'm able to pull up the front-end on my phone, but the app doesn't work, because it sends all the server requests to "localhost:3000." I tried setting
WASP_SERVER_URL but it didn't work.11 Replies
Hi @cooluke.. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
Yes, you can change the hostname of the server in development mode to something other than "localhost" to access your Wasp app from other devices on your local network. Here's how you can do it:
1. First, you need to set the
WASP_WEB_CLIENT_URL environment variable for the server. You can do this in your .env.server file:
Replace <your-local-ip> with your computer's local IP address (e.g., 192.168.1.100).
2. For the client-side, you need to set the REACT_APP_API_URL environment variable. You can do this in your .env.client file:
Again, replace <your-local-ip> with your computer's local IP address.
These steps should allow you to access your Wasp app from other devices on your local network. The front-end will be available at <http://<your-local-ip>:3000,> and it will correctly send API requests to <http://<your-local-ip>:3001.>
It's worth noting that simply setting WASP_SERVER_URL alone isn't sufficient, as you've discovered. You need to set both the client and server environment variables to ensure proper communication between the front-end and back-end.
If you're still having issues after trying this, you might want to check your firewall settings to ensure that the ports 3000 and 3001 are open for local network traffic.
For more detailed information on configuring your Wasp app, you can refer to the Accessing the configuration documentation.
Github Issue: Make it easy to use different ports (than 3000 and 3001) during Wasp development also discusses this topic and might provide additional context.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------
Sorry @cooluke., 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?When you run wasp start it gives you the network ip did you try using that?
Here's a technique I used: https://github.com/wasp-lang/learning-materials?tab=readme-ov-file#testing-wasp-apps-on-local-network
GitHub
GitHub - wasp-lang/learning-materials: A place to collect some usef...
A place to collect some useful learning materials for Wasp - wasp-lang/learning-materials
I setup a DNS name that points to my servers IP address. it kind of simulates the server being on the internet. my .env.server file looks like this.
WASP_WEB_CLIENT_URL=http://myWebServer:3000
WASP_SERVER_URL=http://myWebServer:3000
If you're using DNS, then by definition your server must actually be reachable on the internet, not simulated? 🤔
Wohooo @genyus, you just became a Waspeteer level 4!
not if it's an internal DNS server, notice i don't have a .com url on the dns name
Ah, I thought that was just a placeholder domain name. Understood.
(DNS can be private, so it only applies to your internal network, not to the public internet i.e. public DNS)
Thanks all, will try these out. The AI generated response did not work.
also, if you are trying to access the website from external. ie from your cellphone's data. you'll need to setup a public DNS with your public URL. and then you'll need to setup port forwarding. ie: port 80 routes to internal 192.168.x.x:3000. then it can be access from outside your local network.
if this is just for testing from your home, like i have setup. I check what my public IP address from my internet provider. and you put those numbers in the .env.server file. you still need to setup port forwarding
ngrok | API Gateway, IoT Device Gateway, Secure Tunnels for Contain...
ngrok is a secure ingress platform that enables developers to add global server load balancing, reverse proxy, firewall, API gateway and Kubernetes Ingress to applications and APIs.
Cloudflare Docs
Cloudflare Tunnel · Cloudflare Zero Trust docs
Cloudflare Tunnel provides you with a secure way to connect your resources to Cloudflare without a publicly routable IP address. With Tunnel, you do not send traffic to an external IP — instead, a lightweight daemon in your infrastructure (cloudflared) creates outbound-only connections to Cloudflare's global network. Cloudflare Tunnel can connec...