Wasp-lang•4mo ago

Accessing OpenSaas site from other devices when running locally

When running locally using wasp start, the output gives three IP addresses. Localhost works fine on host machine. The site is accessible to other devices on the IP that starts with 192.x.x.x, however the login and loading user data doesn't work. Is this a current issue or do I have to configure something to make it work?

8 Replies

kapa.ai•4mo ago

Hi @Juan. 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 knowledge sources provided, it seems like you might be encountering a network issue rather than a specific problem with Wasp or OpenSaas. One of the community members in a Discord support thread (https://discord.com/channels/686873244791210014/1223569423177089093) had a similar issue where they could see their app on their local device but not on their network. The issue was likely related to firewall settings on their Windows machine. If you're also using Windows, you might need to adjust your firewall settings to allow other devices to access the app you're hosting on your PC. If you've previously been able to access a site on your local network from a different device, this could indicate a problem with your current setup. You might want to try hosting something outside of Wasp, in a regular Windows PowerShell for example, to see if the problem persists. If you're still having trouble, it would be helpful to have more information about your setup and the specific errors you're encountering. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Juan, 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?

JuanOP•4mo ago

@kapa.ai My host machine is running Debian 12.

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- On a Debian-based system, you might need to check your firewall settings to ensure that the necessary ports are open and accessible from other devices on your network. In a Discord support thread (https://discord.com/channels/686873244791210014/1223569423177089093), a community member suggested testing network problems with a server different than Wasp to reduce complexity. They suggested using a simple command to serve the current directory in the local network on the specified port:

python -m http.server <port_number>

python -m http.server <port_number>

If you're able to access the server using the above command from another device on your network, this could indicate a problem with your Wasp setup. If you're unable to access the server, this could indicate a network issue. Please note that the specific steps to adjust your firewall settings can vary depending on your exact Debian version and configuration. You might need to consult the Debian documentation or other resources for more specific guidance. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Juan, 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?

JuanOP•4mo ago

@kapa.ai looks like this is a cors error. Looks like localhost:3001/auth/me is refusing connection. How to disable cors locally?

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- To disable CORS locally in Wasp, you can define custom middleware for your APIs in the Wasp file. Here's an example of how you can do this: In your main.wasp file, you can define an apiNamespace to apply a middlewareConfigFn to all APIs under a specific path:

apiNamespace fooBar {  
 middlewareConfigFn: import { fooBarNamespaceMiddlewareFn } from "@src/apis",  
 path: "/foo"  
}

apiNamespace fooBar {  
 middlewareConfigFn: import { fooBarNamespaceMiddlewareFn } from "@src/apis",  
 path: "/foo"  
}

Then, in your implementation file, you can return the default middleware which enables CORS for all APIs under the /foo path:

export const apiMiddleware = (config) => {  
 return config;  
};

export const apiMiddleware = (config) => {  
 return config;  
};

This will ensure that CORS is enabled for all APIs under the /foo path. For more information about middleware configuration, you can refer to the Middleware Configuration (https://wasp-lang.dev/docs/advanced/middleware-config) section in the Wasp documentation. However, please note that disabling CORS can expose your application to certain security risks, as it allows any website to make requests to your server. It's generally recommended to only disable CORS for local development or testing purposes. If you're still encountering issues, it might be helpful to have more information about your setup and the specific errors you're encountering. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Juan, 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?

JuanOP•4mo ago

Thanks @kapa.ai I'll give creating a custom Middleware config a try.

kapa.ai•4mo ago

Let me check the knowledge base for you. One moment! :books: ---------------------- You're welcome! Here's a step-by-step guide on how to create a custom middleware configuration in Wasp: 1. In your main.wasp file, define an apiNamespace to apply a middlewareConfigFn to all APIs under a specific path:

apiNamespace fooBar {  
 middlewareConfigFn: import { fooBarNamespaceMiddlewareFn } from "@src/apis",  
 path: "/foo"  
}

apiNamespace fooBar {  
 middlewareConfigFn: import { fooBarNamespaceMiddlewareFn } from "@src/apis",  
 path: "/foo"  
}

2. Then, in your implementation file (e.g., src/apis.js), define the fooBarNamespaceMiddlewareFn function:

export const fooBarNamespaceMiddlewareFn = (middlewareConfig) => {  
 // Define your custom middleware here. For example:
 const customMiddleware = (_req, _res, next) => {  
   console.log('fooBarNamespaceMiddlewareFn: custom middleware')  
   next()  
 }  
  
 middlewareConfig.set('custom.middleware', customMiddleware)  
  
 return middlewareConfig  
}

export const fooBarNamespaceMiddlewareFn = (middlewareConfig) => {  
 // Define your custom middleware here. For example:
 const customMiddleware = (_req, _res, next) => {  
   console.log('fooBarNamespaceMiddlewareFn: custom middleware')  
   next()  
 }  
  
 middlewareConfig.set('custom.middleware', customMiddleware)  
  
 return middlewareConfig  
}

This function takes the current middleware configuration as an argument, modifies it (in this case, by adding a custom middleware that logs a message to the console), and then returns the modified configuration. Remember to replace the console.log statement with your actual middleware logic. For more information, you can refer to the Middleware Configuration (https://wasp-lang.dev/docs/advanced/middleware-config) section in the Wasp documentation. If you encounter any issues or have further questions, feel free to ask. Good luck! ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ---------------------- Sorry @Juan, 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?

martinsos•4mo ago

Check this out @Juan 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

Gaming

Programming

Accessing OpenSaas site from other devices when running locally