npm run serve on vue does not serve to localhost - vue.js

I am trying to get a grasp on Vue, because frameworks, frameworks, frameworks. I installed vue with npm using npm install -g #vue/cli which worked, then i made my project folder using vue create myproj, choosing all default options. When I tried to run with npm run serve this was my output:
App running at:
- Local: http://x86_64-conda_cos6-linux-gnu:8080/
- Network: http://x86_64-conda_cos6-linux-gnu:8080/
Which doesn't connect in browser. As far as I understand, it should have localhost or 127.0.0.1 followed by the port numbers. The port is not being used by anything else. I checked my hosts:
(base) alan#skynet:~/dev/myproj$ cat /etc/hosts
127.0.0.1 localhost
127.0.1.1 skynet
I followed the steps in this similar question: https://forum.vuejs.org/t/npm-run-serve-is-not-defaulting-to-localhost/88007/13 and added a vue.config.js with the following:
module.exports = {
devServer: {
host: '127.0.0.1',
port: 8080,
public: 'localhost:8080',
}
}
but it only changed my network. I have not changed my package.json or any of the default files that come with vue create. I even deleted the directory, uninstalled and reinstalled vue in the same location and that did not resolve. This other SO thread Not running at local when "npm run serve" command in vue project was also similar, but I do not have a .bash_profile and I'm not sure if I can just throw in HOST="localhost" anywhere into my .profile file, as I'm relatively new to Linux and don't want to break things. I'm just trying to get the initial setup off the ground so I can move on to actually doing vue stuff.

I'm not sure if what I did worked, but it now works. See https://github.com/vuejs/vue-cli/issues/4081#issuecomment-694904714

Related

environmental variable not being read (NPM)

So I have a project running with nodejs, and an env file using multiple variables. For some reason one of these does not seem to be working though.
Here the code should be printing out the port and namespace/ip of that the env file should have specified
`==> API is running on port ${process.env.API_PORT}`,
'\n',
`==> Send requests to http://${process.env.API_HOST}:${process.env.API_PORT}`
But for some reason it is only finding the host, as this is what the console actually outputs
==> API is running on port undefined
==> Send requests to http://127.0.0.1:undefined
Here is the .env file entries for these two variables
API_PORT=8080
API_HOST=127.0.0.1
The only guidance I have found so far was that I had to include require('dotenv').config(); but this did not resolve anything either.
What could be blocking the API_PORT variable?
UPDATE: So it seems when I host the server using npm, it works, but when I try to run code coverage over it using chai is when this error pops up (still npm run test).
Fast solution at the moment
in your package.json
Put your envs in your scripts
"scripts": {
"dev": "API_PORT=8080 API_HOST=127.0.0.1 node index.js",
"test": "your script here"
},
npm run dev should work fine.

vue-cli · Failed to download repo vuejs-templates/webpack-simple: tunneling socket could not be established, statusCode=403

I just started with Vue today and got stuck.
Following is the summary:
npm install -g vue-cli [Result - Successful]
vue init webpack-simple C:\vue [Result - Unsuccessful]
vue init webpack-simple ./ [Result - Unsuccessful]
Throws following error:
vue-cli · Failed to download repo vuejs-templates/webpack-simple: tunneling socket could
not be established, statusCode=403
Then tried the following commands:
npm config set http-profix null
vue init webpack-simple ./
It still throws the error.
Any pointers to this. I am running the script behind proxy wall.
Thanks.
The issue, I suspect is that you're installing from behind a VPN.
You can try disabling it to do the install
on corporate networks that's not always the option
If you don't have the option to disable...
you may be able to use
npm config set registry=http://registry.npmjs.org/
The reason that works is that you're no longer connecting to the default which uses https, where the SSL is failing due the the proxy.
Note that there is an issue of security if you opt to use http instead of https
You may also be able to use a proxy definition in a .npmrc file
If you have your proxy information, you can add it to the .npmrc file in the directory.
https://docs.npmjs.com/misc/config#https-proxy
proxy http://{proxy_server}:{proxy_port}
https-proxy http://{proxy_server}:{proxy_port}
strict-ssl=false
src gist

Can not access localhost or 127.0.0.1 server started by vue cli webpack-dev-server

I initialized a vue project by vue/cli, and i do not change any code.After init completion, i run the command to start a development server by npm run dev.And the output show the the server running on localhost:8080, but i can not access it neither by localhost:8080 nor 127.0.0.1:8080.
I haved tried to uninstall safety software, choose vue/cli#2, check hosts file.
C:\Users\Administrator\Desktop\cl>node -v
v10.16.3
C:\Users\Administrator\Desktop\cl>npm -v
6.9.0
"webpack-dev-server": {
"version": "2.11.5",
Try npm run serve. You are not telling vue-cli-service to start a server, only to build locally.

NPM fallback dependency URL

I have a npm dependency in my project which is pointing to a private git repo. Unfortunately the git repo link does not work in my local but it works fine when we do a jenkins build since that git repo link only allows certain whitelisted ip's (i.e. jenkins ip address).
I have looked into apache proxypass and verdaccio but I am not sure if that is the right approach for this
dependencies": {
"api-module": "git+https://example/repo-name.git",
},
Locally, I want https://example/repo-name.git to route to https://differentUrl/repo-name.git when I do npm install but don't want to update package.json
I had to setup a host entry and provide an alias to that

Cannot run an app from vue-cli on localhost

I installed the Vue-CLI in version 3.7. Run vue create my-project and npm run serve. Everything was fine and got message
App running at:
- Local: http://localhost:8080/
Though on the http://localhost:8080/ I got This site can’t be reached.
I managed to use vue init webpack-simple my-project and then in ./node_modules/webpack-dev-server/bin/webpack-dev-server.js change port number and with the new one it's working but this "trick" doesn't work for vue create anyway.
Node version 11.11 and OSX Mojave. There should not be anything that could block the port. I have no idea what to do with this.
please run this command in your vue project directory:-
npm run serve
OR
yarn serve
After run command refresh your browser. this command would be run repeatedly when you get 'This site can’t be reached'.
Do this:
Remove your Node.js and again install latest version here
On the installation path choose npm package manager and install
Open cmd and enter this:
npm install -g #vue/cli
After install vue cli (Previous step) enter to cmd this:
vue create name-app
After some minutes (It depends on how fast your internet is) be sure You have the correct installation
So enter in cmd this:
npm run serve
Then you should be able to navigate to localhost page http://localhost:8080
You can override webpack dev host like this:
vue.config.js
module.exports = {
devServer: {
host: '127.0.0.1',
port: 8080,
public: 'localhost:8080',
},
};
Terminal output
App running at:
Local: http://127.0.0.1:8080/
Network: http://localhost:8080/
The answer is from shenron.