I have the following setup: Vue is running on localhost:8080 as an SPA, and Laravel backend is running on localhost:80 as an API Rest. Now everything on my pc works perfectly fine.
But when I try to view my localhost web app on my phone through the network IP, Vue is not connecting to the backend correctly. I access to the frontend on my phone with my network IP 192.168.1.38:8080
I do see my vue SPA but it is not retrieving data from the backend. I have set up the backend URL through a env file on my vue project: VUE_APP_API_URL=http://localhost:80/api
I set up a laravel route so that I can check the status of the API, if i go to 192.168.1.38:80/api/status in my phone I can see it works perfectly fine. Could the problem vue on my phone is calling the backend on http://localhost:80 instead of 192.168.1.38:80 ?
If that is the case, how can I tell my vue project to dynamically change the backend URL, to localhost:80/api when on my pc and to 192.168.1.38:80 on my phone?
I'm a bit lost here, thank you in advance.
Yes you are correct. You need to set your api url as the IP address in your vue app i.e. 192.168.1.38:80/api/...
you could potentially use some javascript to check if your on a mobile device and change the url dynamically but the IP i believe should work both on local and from the mobile device
Related
I have an express app running inside an electron app using http on port 6001 and used ngrok to connect to that port. My question is how can I set the redirect url in Slack's dashboard without knowing the first part of the url i.e https://xxxx.ngrok.io. Also, I'm planning to distribute my electron app, what happens when multiple users run the application?
If you are running your Express App locally and exposing that to Slack using ngrok, then it must be for development only.
Using the ngrok free version, your endpoint will keep on changing every time you restart your desktop.
For development -> Update the Slack webhook with the new ngrok URL everytime it changes.
For production -> Deploy your Express app to a cloud based runtime and then expose that IP address as the URL for the Slack webhook
I just started an ionic app and dev spins up http:localhost:8081. I will be hitting an api that needs to whitelist the apps url. What will that be? https:localhost:8081?
You most likely need to whitelist the IP adress of the app. Which is going to change depending on the phone it is installed on.
For your usecase you most likely want to have a server communicating with both the app and api so you can use it's IP address to whitelist.
I am working on an app and used json-server for the backend api. I published the app using github pages and everything seemed to be working fine on my laptop. But when I try to open the app on another device, it does not work. I realized this was because I am using localhost:3001 as the resource for my api, and this only exists on my laptop. I am now trying to change the resource from localhost:3001 to a custom url 'https://my-json-server.typicode.com/vbrambila2/1RM/movements'. The issue I'm running into now is that the POST, PATCH, and DELETE methods in my actions aren't updating the api anymore. Anyone know what I might be doing wrong?
I have a NestJS server and Ionic app. During development, these two apps do not have any errors when communicating with each other. Deployed my Ionic app to my phone, but now it doesn't communicate with my server upon testing. I have my NestJS's server URL set as http://<myLaptopIP>:3000 on my Ionic app. I also tried accessing that URL from my phone's browser, but it also doesn't work. I already have CORS enabled in my NestJS app with default configurations, so I'm not sure where the problem is.
we have built UI using react js framework and html +css + js code is deployed inside apache 2. When I browse website it works fine but if I refresh page then I get 404. Can someone tell me how can I fix it.
Perhaps this answer is relevant to you:
Apache web server doesn't allow me to refresh on /about but on localhost its working fine
I know I also had problems related to HTML5 mode when first setting up react-router.
If you are using React-Router you are probably having this problem: React-router urls don't work when refreshing or writting manually.
You can also see the React Router tutorial for how to set up a production Express server.