How to start nuxt project on IP Address - vue.js

This might be a stupid question since it seems pretty simple, but I can't get my nuxt project to run on my IP address.
The Nuxt.js docs say that I have to put this in my package.json file in order for it to start on my IP:
"config": {
"nuxt": {
"host": "0.0.0.0",
"port": "3333"
}
}
In a lot of articles online the 0.0.0.0 automatically binds to your IP address so you can access the project in the browser with your IP address. Whenever I run the command yarn dev it just starts the project on 0.0.0.0:8000. Is this normal? If yes, how do I get it to run on my actual IP Address?
I would really like to know how I can get this done, this is really confusing me.

I know you asked this a long time ago and never got an answer. This is currently the top Google result so it is worth a good answer for the future of the internet.
Your setup looks (largely) correct, but it needs to be in your nuxt.config.js file, not your package.json.
There are a few ways to do this:
Option #1 - Inside nuxt.config.js:
export default {
// ... All your other settings are already here
// You will need to add this:
server: {
host: '0',
port: '3000' // optional
}
}
This will expose your app on your local network. When you run npm run dev now it will run on your computer's IP address. The output in the console will link to your computer's IP address followed by the port number. It will no longer use "localhost".
Option #2 - From the Command Line
If you just want to run this as a one-off command to test something briefly, then you can specify HOST=0 in the command line before running your npm run dev command.
It would look like this:
HOST=0 PORT=8000 npm run dev
Option #3 - Create A Script for Hosting the Dev Server
This option is good if you frequently switch between localhost testing and internal network testing. It allows you to create a new NPM script so that you can simply run npm run dev when you want to run locally, or run npm run dev:host if you want to host internally.
This requires adding a script to package.json
/*
* package.json
*/
{
... other options
"scripts": {
"dev:host": "nuxt --hostname '0' --port 8000"
}
}
You can change the name of the script (the part that says "dev:host" to be anything you want to call it. In this example though you would run npm run dev:host in the console to run it on the network. But the npm run dev command would work the same as before (using localhost).
All of these are useful in case you want to open the app in development on a mobile device for testing. Your mobile device will need to be on the same wifi network as your computer to access the page. Just open a web browser on your other device, type in the IP address with the port number and it will connect to your dev server. This does NOT publically expose your app, it only exposes it internally on your network. This is designed for testing, nothing more.
Read More in the Docs: https://nuxtjs.org/docs/2.x/features/configuration#edit-host-and-port

If you wanna run the app in public IP you need a hosting like digitalocean, vultr.
If you wanna run the app in a private IP then you install a web server and you need to use your public ip address and set up port forwarding. But this is not safe.

You can modify this in the nuxt.config.js file it is not advised to as it might cause you issues when hosting your site. It is much better to modify the host direct in the dev command. Like this
HOST=0 npm run dev
or the port that you want
PORT=8000 npm run dev
or both
HOST=0 PORT=8000 npm run dev

Related

vue.js - view index.html without a server

I'm building an app with vue.js and this app needs to run later on a terminal without internet connection and without a running server. I want that my client just have to start the index.html file. Is this possible and what setup do i need?
When i start the index.html my only error message in console i get is:
Uncaught DOMException: Failed to construct 'Worker': Script at 'file:///xxx/dist/ec0098eb6371c2f4342a.worker.js' cannot be accessed from origin 'null'.
my register-service-worker.js looks like this to allow localhost
if (
process.env.NODE_ENV === 'production' &&
('https:' === location.protocol || location.host.match(/(localhost|127.0.0.1)/)) &&
navigator.serviceWorker
) {
navigator.serviceWorker.register('/service-worker.js');
}
i try now for days to find a solution. I already build half of my app and now i see that
it can't run locally. I hope someone knows a trick.
Thanks from Germany
A service worker needs https or localhost to work. It will not work in file:// etc. (https://developers.google.com/web/fundamentals/primers/service-workers)
For a one click start you could start such a server from a batch file, but you would have to assume your client has Node or python installed, then npx http-server or the like would work.
Lastly, if your App is completely offline and without a server, you might not need a service worker in the first place.

Access Vue.js application from other device in the same network (also using proxy)

so my problem is basically the same as here, but the question isn't answered yet.
The problem ist, that I can't view my vue application in the webbrowser when visiting <pc_ip>:8080. However when starting my vue.js app with npm run serve it tells me, that this is how I could access the page besides doing localhost:8080. It works from my PC but with my phone which is connected to the same wifi I get the error that the url is not reachable.
Thanks in advance!
UPDATE:
So after finding some other posts I also tried writing some stuff to a vue.config.js like here, here, here or here e.g.
module.exports = {
devServer: {
port: 8080,
host: '0.0.0.0'
}
}
However the problem still persists. I also tried replacing the host in that file with my actual ip, but it does not work either.
UPDATE 2:
As mentioned in a comment, I had a similar problem some time ago, when trying to access my flask server from my phone which was in the same network. Back then I set the host variable to the pc's IP and it worked. As I tested again just now, I realized that the corporation proxy I have to use in parallel could play a role in this. When I wasn't connected via using plink.exe, I could not access my running flask server from my phone. When I connected after that, everything is working.
Could the proxy or a missing configuration be hindering me to access my vue application?
UPDATE 3: so i turned of my firewall completely and then i could access the page from another device. I wondered if some other rule was blocking the port like in this post Windows Firewall - Laravel Artisan Serve - Allow Port in Inbound Rule (not working). But I am not sure how I would find that rule if there is one blocking my port?
Please follow this link:
Work around this problem
I add the following code to my vue.config.js
module.exports = {
devServer: {
port: 80,
host: '0.0.0.0'
}
}
change the port number according to your need.
Normally when you execute the npm run serve command, it gives you two addresses to access your application. A local address and a network address. Like this :
App running at:
- Local: http: // localhost: 8080 /
- Network: http://IP_ADDRESSE:8080/
So with your phone you should use the network address and not the local one.

Wrong Vue app being serving the on port 8080 [duplicate]

This question already has answers here:
Find (and kill) process locking port 3000 on Mac [closed]
(40 answers)
How do I kill the process currently using a port on localhost in Windows? [closed]
(28 answers)
Closed 2 years ago.
I created a Vue app using Vue CLI (vue create foo-app) to test out the whole process and see how I got on with Vue (using VS Code if it makes any difference).
All good, let's go again but for the actul app I want to use.
The next time I created an app using the Vue JS Template for ASP Net Core Web API from with Visual Studio (2019 edition) (let's call it bar-app). It built correctly and seemingly no problems.
However when I F5 to run the app from within Visual Studio, instead of getting bar-app I instead get foo-app.
The browser launches on port 50800, which is correct and configured within VS.
I can see the Vue server running on 8080, and if I point the browser there, I also get the wrong app displayed.
On startup I have:
app.UseSpa(spa =>
{
spa.Options.SourcePath = "ClientApp";
if (env.IsDevelopment())
{
spa.UseVueCli(npmScript: "serve");
}
});
And package.json has "serve": "vue-cli-service serve".
If I manually run the Vue app on its own i.e. open a cmd window at the correct folder and run npm run serve I can see the server starts but on a different port, 8085, which serves the app I want (bar-app).
I have tried changing the package.json command to pass in the port but this fails as when I F5, VS is automatically appending --port 8080 to it (and so the effective command issues is "serve": "vue-cli-service serve --port 8080 -port8085"
So:
Where have I configured the port to be 8085?
Why is VS running the app on 8080?

How to fix network error in react-native when access localhost api

We're trying to connect to an API (.net core 2.2) from react-native (version 0.59), via localhost, both apparently running on the same ip, different ports, react-native on port 8080, and the api on the 44344, the issue happens the moment we fetch the url from react-native
We’ve also tested running the url from Postman and everything seems ok, also from any of the web browser installed (safari/chrome), even we tested the browser INSIDE react-native iOS, and it works.
Any api running outside localhost works perfectly, is the localhost were we failed.
Network request failed.
onerror
whatwg-fetch.js:504:29
dispatchEvent
event-target.js:172:43
setReadyState
XMLHttpRequest.js:580:29
__didCompleteResponse
XMLHttpRequest.js:394:25
emit
EventEmitter.js:190:12
__callFunction
MessageQueue.js:366:47
<unknown>
MessageQueue.js:106:26
__guard
MessageQueue.js:314:10
callFunctionReturnFlushedQueue
MessageQueue.js:105:17
callFunctionReturnFlushedQueue
[native code]:0
Part of the code (function) that fetch the api, very simple (for now)
async Submit(){
//GET METHOD
try {
let response = await fetch('https://192.168.1.56:44344/api/values');
let responseJson = await response.json();
return Alert.alert(JSON.stringify(responseJson));
} catch (error) {
console.error(error);
}
}
Ok first of all, we've tried EVERY possible solution,to connect my react native app to my .net core api rest, both running in localhost, this is the list so far, of the things that we've tried so far, and still no result.
Localhost
127.0.0.1
Computer ip (network ip not mac address)
React Native blank project (from the ground up)
API .net core blank project (from the ground up)
Running snack expo + api .net core
ip forwarding (We can't do that do to our job policies/Not the solution we're looking for)
http/https
Different ports
Android and ios permissions from react-native
Same network different ip (this sorta worked, but we don't know exactly why it doesn't work running both react-native and the api in the same ip (localhost))
10.0.2.2 (for android)
Enable cors on api .net core (but apparently this doesn't work on native apps, only for web)
Expose the ip through ngrok/serveo (We can't do that do to our job policies/Not the solution we're looking for)
Frisbee
Axios
Websocket (We can't do that do to our job policies/Not the solution we're looking for)
XMLHttpRequest (status code error 0)
Firewall/proxy (our network is free from firewalls and proxies)
Web browser plugins (deactivated and/or uninstalled)
Cache/cookies
Docker (We can't do that do to our job policies/Not the solution we're looking for)
Reboot my macbook pro
we expect react native to fetch the api, so we can continue with the office 365 login authentication.
EDIT: I just discovered that fetching the machine ip (this time running windows), with my ip being 192.168.0.9 both on the api and the react native, the fetch result showed me the 10.0.2.2:80 in the header of the json response. I suppose it is the "localhost" ip from react native. How am I supposed to fetch an ip from localhost if react native is not letting me to do so?
EDIT: We had to go for plan B this time around, we've made it work with a docker on the api, but I need a solution for this problem. I'm 99% sure the issue is react-native and nothing else.
EDIT: After all these weeks one of my colleges managed to solve it. First of all, we couldn't make the firewall in my macbook pro work properly. Second, we solved that and found out our api was having issues. He found out the redirection was on https, and the certifications weren't working properly, so he changed this
"applicationUrl": "http://192.168.0.114:5001;https:192.168.0.114:5001"
to
"applicationUrl": "http://192.168.0.114:5001"
I got the same issue while fetching localhost API from react-native. Here is what I did to solve this issue.
In the startups class, I removed //app.UseHttpsRedirection(); from Configure method.(Not sure if it is needed)
After that in the launchsetting.js file under the properties folder, I changed from
"applicationUrl": "https://localhost:5001;http://localhost:5000"
to
"applicationUrl": "http://localhost:5000"
and in the React native part, I simply changed my localhost with my IP:
fetch('http://localhost:5000/values/') to fetch('http://127.0.0.1:5000/values/')
This completely worked for me
Take command prompt and type ipconfig, so we will be getting many addresses. From that take IPV4 and copy it to the clipboard. Then paste this address to both the back ends port address and front end port address.
eg say IPV4 address is 192.168.1.3 then make you your back end route API similar to this http://192.168.1.3:8080/patients, where 8080 is the port number (never mind). And use the same for the front end to grab the API result.
You have to do two things.
1 - Use http://192.168.1.x:8080 (your local ip ) rather than http:// localhost:8080 in your client.
2 - Add following code snippets to your .net core web api project in Startup.cs.
readonly string MyAllowSpecificOrigins = "_myAllowSpecificOrigins";
services.AddCors(options =>
{
options.AddPolicy(name: MyAllowSpecificOrigins,
builder =>
{
builder.WithOrigins("http://192.168.1.x:8080")
.AllowAnyHeader()
.AllowAnyMethod();
});
});
.
.
.
app.UseCors(MyAllowSpecificOrigins);
Something that worked for me was run adb reverse tcp:<YOUR PORT> tcp:<YOUR PORT> in terminal
I'm not sure of how it works exactely, but I guess it makes some sort of mapping from the virtual device port to your machine's.
Example:
adb reverse tcp:8080 tcp:8080
Using the local IP address worked for me, with no additional configuration.
Example:
fetch("http://192.168.0.103:4000/books", {
method: "GET"
})
Thanks for all the insight, but none of the above solutions worked for me.
What did work:
https://ngrok.com/ - Download ngrok, signup, and connect your account. ngrok creates a private https localhost tunnel.
Setup - https://dashboard.ngrok.com/get-started/setup
Unzip to install:
unzip /path/to/ngrok.zip
Connect your ngrok account (Non functioning example auth token):
ngrok config add-authtoken 2ySPR5UeS3Fjf5YAblNRe7ZcV1o_9sdf2SDFGHjEQaOCE6xEi
Use the command (with your desired port number):
ngrok http 8080
Once ngrok is online, replace your localhost address:
http://localhost:8080
http://127.0.0.1:8080
http://192.168.0.100:8080
with the forwarding web address (Non functioning example address):
https://ebda-61-137-45-130.ngrok.io
I've used ngrok countless times for testing on a variety of networks without issue. So far its the only foolproof method I've found for testing localhost APIs.

Configure Webpack HMR with touching webpack-dev-server from remote (ngrok)

I'm trying to configure Webpack Hot Module Replacement to work with a remote server.
I'm building an application on Salesforce.com platform and want to configure internal application page to get all necessary files from my local machine using ngrok and webpack-dev-server. And the actual result is the same behavior of HMR - replace changed modules using socketio. I use angular-webpack2-starter seed project to test it just from ngrok. But when I open the page from ngrok endpoint and update some module the connection with HMR is lost.
Logs screenshot here