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?
Related
i have problem with project deployment, so the application appear just if I put the port of the server like screen,s I use "angular" "expressjs" "ovh"
the error
here i need to put the port to appear the app
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.
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.
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
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