My Vue app runs on port 8080. The setting of scripts: "serve": "vue-cli-service serve" and I start it up with yarn run serve.
My express server is set to run on port 4000. I start it up with yarn run dev with this scripts:
"client-install": "yarn add --prefix client",
"start": "node server.js",
"server": "nodemon server.js",
"client": "yarn start --prefix client",
"dev": "concurrently \"yarn run server\" \"yarn run client\""
while I try to run, it displays an error:
See what is already running on that port
netstat -a -n -o | find "4000"
TCP 127.0.0.1:4200 0.0.0.0:0 LISTENING 25160
get the pid, for example if pid is 25160 then
tasklist /fi "pid eq 25160"
node.exe 25160 Console 1 399,528 K
So then you can see what is using that port, in this case node.
Also checkout this project: https://github.com/pietheinstrengholt/vue-express-boilerplate
this problem's solve by using npm package called concurrently
Related
I need to run in the background a web app programmed in react and node which is hosted on a linux server. To do this I have created a service in
/etc/systemd/system
that does the following:
Description=Load React-Node Service.
[Service]
ExecStart=/usr/bin/yarn startLinux
WorkingDirectory=/home/developer/projectFolder/
[Install]
WantedBy=multi-user.target
But when I run it with systemctl start webapp.service I get the following error:
On the other hand if I run it with yarn start directly from ssh it works, but I need to run it through a service so I don't have to have the terminal open. The yarn start and yarn startLinux commands do the following:
"start": "cross-env NODE_ENV=development concurrently --kill-others-on-fail \"yarn server\" \"yarn client\"",
"startLinux": "cross-env NODE_ENV=development concurrently --kill-others-on-fail \"yarn server\" \"yarn clientLinux\"",
"client": "cd frontend && yarn start",
"clientLinux": "cd frontend && yarn startLinux",
"server": "nodemon --exec babel-node src/server.js"
Do you know what could be the problem?
Thanks!
I'm trying to have my npm start script run json-server in the background in parallel to then running react-scripts to start UI. How would I go about doing this? I've tried various things with single & and prestart, etc but everything results in json-server starting to watch my db file but then react-scripts doesn't run.
The main 2 which I thought should do the trick are below, but neither work.
"scripts": {
"prestart" : "json-server --watch ../sample-db.json --port 3010 --delay 800&",
"start": "set HTTPS=true&&react-scripts start",
and
"scripts": {
"start": "json-server --watch ../sample-db.json --port 3010 --delay 800&set HTTPS=true&&react-scripts start",
Not quite a duplicate, but as indicated by #Max this has a few options:
How can I run multiple npm scripts in parallel?
So here's one way:
"scripts": {
"start": "set HTTPS=true&&react-scripts start",
"mockserver": "json-server --watch ../sample-db.json --port 3010 --delay 800",
"startdev": "concurrently --kill-others \"npm start\" \"npm run mockserver\"",
}
And I see that on windows I need to use "start" which was why single ampersand wasn't working.
My app did work but I want to re-organise it so it is easier to manage. I want to move the server files from the root to their own directory.
Currently I use concurrently to load my server and client so they can run simultaneously.
When I run npm run dev I want concurrently to load the server and the client. When run the server loads, the client fails and a new folder called client gets generated in within the server directory.
My new folder structure
client
client/package.json
server
server/package.json
The previous (working) folder structure
server files in root
package.json {for server}
/client {all client files including /client/package.json}
I am using concurrently and am trying to get it now to work. I think I need to do is change to the correct syntax in my server/package.json file but the changes have not worked.
concurrently code in my server package.json file
"dev": "concurrently \"npm run server\" \"npm run client\"",
I get the error
] /bin/sh: ..npm: command not found
[1] ..npm run client exited with code 127
I have tried changing the line different ways but still cannot get the client to load
"dev": "concurrently \"npm run server\" \"cd ../client && /npm run client\"",
"dev": "concurrently \"npm run server\" \"cd ../client && /npm run client\"",
"dev": "concurrently \"npm run server\" \"npm run ./client\"",
"dev": "concurrently \"npm run server\" \"npm run ../client\"",
"dev": "concurrently \"npm run server\" \"npm run //client\"",
I think it may be a simple syntax change however the fact a new directory is getting created makes me a bit more concearned. Any solutions or thoughts would be appreciated.
The correct code in the package.json for the server is below
"scripts": {
"start": "node server.js",
"server": "nodemon server.js",
**"client": "npm start --prefix ../client/",**
"clientinstall": "npm install --prefix client",
"dev": "concurrently \"npm run server\" \"npm run client\"",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install --prefix client && npm run build --prefix client "
},
I had to put the path to the new client directory after the command. Seems obvious now I know but I was focussing on the other line.
Combine two commands in the second argument that target the client location and npm command
"dev": "concurrently \"npm run server\" \"cd ../client && npm run client\"",
Here back-end project the port is 3002 & front-end port is default 3000 which are different , i added "proxy": "http://localhost:3002" in react project
still getting the proxy issue i don't understand the issue here
please help me thanks in advance
Install concurrently by using npm i concurrently
then add below scripts to your backend pakage.json
This will allow you to run your backend and frontend servers at the same time.
"start": "node server",
"client": "npm start --prefix client",
"dev": "concurrently \"npm run start\" \"npm run client\"",
Then run npm run dev in backend application directory to run the application
package.json file :
"start": "concurrently \"nodemon index.js --port 3000 \" \"react-scripts start --port 3000 \" ",
"start": "concurrently \"react-scripts start --port 3000\" ",
"build": "react-scripts build",
"server": "NODE_ENV=production node index.js",
so I can run both nodejs server and react at the same time. Either with npm run server and npm start or just with npm start which includes both
but because I have PORT=3001 in .env file
both server and react try to run on 3001 server. Of course it gives error "Something is already running on port 3001."
How can I make react have its own port 3000? Option --port 3000 do not help
You can override environment variables for each script.
For example:
{
"start": "concurrently \"PORT=3000 nodemon index.js\" \"PORT=3001 react-scripts start\""
}
You have to provide the ports explicitly either on the CLI or via your script.
{
"start:client": "PORT=3001 react-scripts start",
"start:server": "PORT=3000 nodemon index.js",
"start": "concurrently \"start:client\" \"start:server\""
}
This should make it easier to read.