I am new to the whole nodejs/reactjs world so apologies if my question sounds silly. So I am playing around with reactabular.js.
Whenever I do a npm start it always runs on localhost:8080.
How do I change it to run on 0.0.0.0:8080 to make it publicly accessible? I have been trying to read the source code in the above repo but failed to find the file which does this setting.
Also, to add to that - how do I make it run on port 80 if that is at all possible?
Something like this worked for me. I am guessing this should work for you.
Run webpack-dev using this
webpack-dev-server --host 0.0.0.0 --port 80
And set this in webpack.config.js
entry: [
'webpack-dev-server/client?http://0.0.0.0:80',
config.paths.demo
]
Note If you are using hot loading, you will have to do this.
Run webpack-dev using this
webpack-dev-server --host 0.0.0.0 --port 80
And set this in webpack.config.js
entry: [
'webpack-dev-server/client?http://0.0.0.0:80',
'webpack/hot/only-dev-server',
config.paths.demo
],
....
plugins:[new webpack.HotModuleReplacementPlugin()]
This is how I did it and it seems to work pretty well.
In you webpack.config.js file add the following:
devServer: {
inline:true,
port: 8008
},
Obviously you can use any port that is not conflicting with another. I mention the conflict issue only because I spent about 4 hrs. fighting an issue only to discover that my services were running on the same port.
Configure webpack (in webpack.config.js) with:
devServer: {
// ...
host: '0.0.0.0',
port: 80,
// ...
}
I am new to JavaScript development and ReactJS. I was unable to find an answer that works for me, until figuring it out by viewing the react-scripts code. Using ReactJS 15.4.1+ using react-scripts you can start with a custom host and/or port by using environment variables:
HOST='0.0.0.0' PORT=8080 npm start
Hopefully this helps newcomers like me.
Following worked for me -
1) In Package.json add this:
"scripts": {
"dev": "webpack-dev-server --progress --colors"
}
2) In webpack.config.js add this under config object that you export:
devServer: {
host: "GACDTL001SS369k", // Your Computer Name
port: 8080
}
3) Now on terminal type: npm run dev
4) After #3 compiles and ready just head over to your browser and key in address as http://GACDTL001SS369k:8080/
Your app should hopefully be working now with an external URL which others can access on the same network.
PS: GACDTL001SS369k was my Computer Name so do replace with whatever is yours on your machine.
I struggled with some of the other answers. (My setup is: I'm running npm run dev, with webpack 3.12.0, after creating my project using vue init webpack on an Ubuntu 18.04 virtualbox under Windows. I have vagrant configured to forward port 3000 to the host.)
Unfortunately putting npm run dev --host 0.0.0.0 --port 3000 didn't work---it still ran on localhost:8080.
Furthermore, the file webpack.config.js didn't exist and creating it didn't help either.
Then I found the configuration files are now located in build/webpack.dev.conf.js (and build/webpack.base.conf.js and build/webpack.prod.conf.js). However, it didn't look like a good idea to modify these files, because they actually read the HOST and PORT from process.env.
So I searched about how to set process.env variables and achieved success by running the command:
HOST=0.0.0.0 PORT=3000 npm run dev
After doing this, I finally get "Your application is running here: http://0.0.0.0:3000" and I'm finally able to see it by browsing to localhost:3000 from the host machine.
EDIT: Found another way to do it is by editing the dev host and port in config/index.js.
If you're in a React Application created with 'create-react-app' go to your package.json and change
"start": "react-scripts start",
to ... (unix)
"start": "PORT=80 react-scripts start",
or to ... (win)
"start": "set PORT=3005 && react-scripts start"
Following worked for me in JSON config file:
"scripts": {
"start": "webpack-dev-server --host 127.0.0.1 --port 80 ./js/index.js"
},
I feel dirty for telling you this b/c of the security implications of what you're trying to do, but here you go.
npm run dev -- -h 0.0.0.0 -p 80
For me: changing the listen host worked:
.listen(3000, 'localhost', function (err, result) {
if (err) {
console.log(err);
}
console.log('Listening at localhost:3000');
});
was changed to :
.listen(3000, '0.0.0.0', function (err, result) {
if (err) {
console.log(err);
}
console.log('Listening at localhost:3000');
});
and the server started listening on 0.0.0.0
I tried the solutions above, but had no luck. I noticed this line in my project's package.json:
"bin": {
"webpack-dev-server": "bin/webpack-dev-server.js"
},
I looked at bin/webpack-dev-server.js and found this line:
.describe("port", "The port").default("port", 8080)
I changed the port to 3000. A bit of a brute force approach, but it worked for me.
For me, this code worked. Just add it on your package.json file :
"scripts": {
"dev-server": "encore dev-server",
"dev": "webpack-dev-server --progress --colors",
"watch": "encore dev --watch",
"build": "encore production --progress"
},
And run the script "build" by running npm run build
For windows create file runMobile.bat
set PORT=8081
set HOST=192.168.3.20
npm run dev
I tried this to easily use another port:
PORT=80 npm run dev
Related
I'm attempting to start my react server through linux CLI with a specified port number. I am NOT asking about changing the package.json script to include a defined port number.
I need to be able to start multiple react instances with different ports through CLI.
I have seen recommendations such as
npm start --PORT=4000,
npm start --PORT 4000,
npm start -- --PORT=4000
Of which none work, they all set the port to the default of 3000, or if I have a defined port in the package.json such as 5000, it defaults to that.
Whats the correct command for setting the port through CLI?
you can do it by adding PORT=4000 before react-scripts start in package.json.
"scripts": {
"start": "PORT=4000 react-scripts start"
}
then you can execute npm start
It's actually an environment variable for the port, so you can specify a PORT environment variable beforenpm start
export PORT=3005; npm start #For Linux
$env:PORT=3005; npm start #For Powershell
I have a react app and server that provides REST services to the react app. In development the react app runs on port 3000 and the server on port 3001.
To support this the package.json file has proxy statement "proxy": "http://localhost:3001"
However in production this isn't wanted so I like a means of controlling this from "yarn start" so that I need only one package.json that uses the proxy in development but not in production. Thanks in advance
so that I need only one package.json
you should only have one package.json...
You probably have something that looks like
"scripts": {
"start": "webpack-dev-server --host 0.0.0.0 ..."
...
}
in your package.json - when you run yarn start, ^ that is what is actually being run. That's not something you would run in production though. If you want something else to run in production, add another item to scripts that runs your express (?) app directly (something like node /path/to/index.js is probably close).
I have a Sails server running, and I want to execute some commands from inside of lifted Sails.
The problem is, then I run sails console - it bootstraps another instance of Sails, and trying to load another webserver next to existing, by default using the same ports.
By some environment limits, I can use only one port at the time. So I cannot load another webserver on the same machine.
Is there a way how to run sails console without using any ports?
Thank you.
There is an option. Use sails console --dontLift
Running console without port is I belive not possible at all.
Add inside package json npm script to run console on another port (or if you have sails installed globally just run sails console --port xxxx).
Part of my package json:
"scripts": {
"start": "node app.js",
"console": "sails console --port 1338",
"test": "mocha",
"docs": "rimraf public/docs && apidoc -i config/routes -o public/docs"
},
As you can see... npm run console will run sails console on port 1338 while deafult port of my app is 1337...
So in my npm package I currently have this script:
"start": "concurrently --kill-others \"npm run dev\" \"electron .\""
The problem is that since the server wouldn't be up yet when electron runs its command, it shows up as blank. This is resolved by reloading the app once the server starts.
So I was wondering if there was a way to wait for the server to start by detecting the port or some other method so that I don't have to do the reload myself.
Here's how I'm setting up the url (trying to implement Vue into it).
let format = live ?
url.format({
pathname: path.join(__dirname, 'dist/index.html'),
protocol: 'file:',
slashes: true
})
:
'http://localhost:8080'
// Specify entry point to default entry point of vue.js
win.loadURL(format);
The key here is to get your dev server up immediately and then implement auto reload or hot module replacement.
Have you looked at electron-webpack? Then your start script would look like:
"dev": "electron-webpack dev"
And your main.js:
const url = process.env.NODE_ENV !== 'production'
? `http://localhost:${process.env.ELECTRON_WEBPACK_WDS_PORT}`
: `file://${__dirname}/index.html`
window.loadURL(url)
I'll recommend you to checkout electron-webpack-quick-start for an example of implementation.
You can use readyator if you want to wait for ports (or URLs) to be ready before starting your script.
Installation: npm i readyator
Waiting for port 80 to be ready before starting Electron with readyator:
readyator 80 "electron ."
It also comes with a handy Node.js API:
import {runWhenReady} from 'readyator';
await runWhenReady([80], 'electron .');
I've been following this(http://socket.io/get-started/chat/) tutorial on how to make a simple chat application using socket.io.
I tried to however use Express to create it and I was wondering why port 3000 is already in use? The code below will not work unless I change the port number.
/* Make the http server listen on port 3000. */
http.listen(3000, function(){
console.log('listening on *:3000');
});
Does express use the port to do other things like routing or something?
Is there a simple way to find what is happening on that port?
I may also be doing something dodgy with my require things:
var express = require('express');
var app = require('express')();
var http = require('http').Server(app);
var router = express.Router();
var io = require('socket.io')(http);
Thanks.
I ran into this problem too and I solved it by this:
Do not use npm start to start your web app
Use node app.js instead
Try running:
netstat -anp tcp | grep 3000
This should show you the name of the process that is using port 3000. Here's another issue on StackOverflow that covers this issue in more depth.
One of the best way to do this during the development would be through IDE where you can do comprehensive debugging and step through the code.
If you are using WebStorm, this works.
From run configurations -> Edit Configurations -> Nods.js and add the app.js as the node parameter. See below arrow in the screenshots for more details.
I resolved the same problem with an express app doing this:
Edit the file "yourap/bin/www"
find the line :
var port = normalizePort(process.env.PORT || '3000');
replace it by:
var port = normalizePort('XXXX');
where XXXX is the port number you want to use
Then youre free to do npm start! xD
I had (forgotten that I had) previously installed ntop, which by default also uses port 3000, and was therefore getting the same error as described here.
As others have mentioned, use netstat or lsof to find the offending service (and prefix the command with sudo, to get the correct process name):
sudo lsof -P | grep ':3000'
- or -
sudo netstat -anp tcp | grep 3000
On Ubuntu, the service is disabled with (simply):
service ntop stop
Similar to answer above to not use npm start.
I was using nodemon and with expressjs and expressjs generator. I was using nodemon to execute npm start, while npm start itself execute node ./NodeApp/bin/www
So i edited to make nodemon to execute node ./NodeApp/bin/www by itself and that error go away.
Conclusion
Before
package.json
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "node ./NodeApp/bin/www",
"build": "webpack --watch",
"dev": "nodemon --exec npm start"
},
After
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --watch",
"dev": "nodemon --exec node ./NodeApp/bin/www"
},
So now I run my sever with npm run dev and no more errors.
for me helps to make use 3000 || 3333, and it's fix the issue
I solved it by this:
npm install shelljs
and add code for kill nodejs process before start listen port
var shell = require('shelljs');
shell.exec("pkill nodejs");
shell.exec("pkill node");
/* Make the http server listen on port 3000. */
http.listen(3000, function(){
console.log('listening on *:3000');
});