Running react code on other machine - reactjs

Hi I am working on reactJS
Would Like to understand how can I run my local React app running on http://localhost:8888/index.html#/?_k=pu9k2u through my IP address on some other machine ?
Whenever I do a "npm start" it always runs on localhost:8888
How do I change it to run on 0.0.0.0:8888 ?
I know how to change the port for the app,
Following is my webpack.congif.js
module.exports = {
entry: './index.js',
output: {
filename: 'index.js',
path: ''
},
devServer: {
inline:true,
port: 8888
},
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel-loader?presets[]=es2015&presets[]=react' }
]
}
}
Since I am very new to reactJS kindly explain the solution given below or provide with an updated webpack.config.js
How to make the webpack dev server run on port 80 and on 0.0.0.0 to make it publicly accessible?

only by adding host: to webpack.config.js it worked for me
devServer: {
host:'000.000.00.00',
port: 8888
},
then i started react code by giving
webpack-dev-server --host 000.000.00.00 --port 888

You need to change hosting of the react application from localhost to your local ip address. (For example 10.10.54.124), you can get it using ipconfig command in Windows command prompt.
Next you need to open your port (ex. 214) via firewall, to access from the 3rd-party machines. And after that, all of the people, how are in your local, or VPN network can access your application by link 10.10.54.124:214.
P.S. That would work only for people how are in your local network

This is what I do: instead of using an IP address I tell node to use the local hostname of the computer. This is done in the package.json file in the scripts section with the HOST param, there is a PORT param too:
{
...,
"scripts": {
"start": "node scripts/start.js",
"start-local": "HOST='BlueLight.local' node scripts/start.js",
"build": "node scripts/build.js",
"test": "node scripts/test.js --env=jsdom",
....
}
...
My hostname is BlueLight so my local address is BlueLight.local, open the terminal and write hostname command to find out yours.
So any computer in my local network can open http://BlueLight.local:3000 you can even use mobile phones, and I even use iPhone or Android simulators.
Bear in mind that some security checks like WebRTC, live camera, and other https checks will not work since you don't have a SSL certificate for your local address. Some of them can be deactivated in the advanced settings of your browser.

Related

sveltekit build port is always 3000 but it is not available in my server. How do you change port in svelte.config.js?

Port 3000 is occupied in my hosting server. Now I'm building a sveltekit app.
When I use
npm run dev --port 4000
or npm run build and then
npm run preview --port 4000
I'm able to start the sveltekit using localhost:4000
My npm run build is always pointing me to
skapp#0.0.1 preview
> svelte-kit preview
SvelteKit v1.0.0-next.260
network: not exposed
local: http://localhost:3000
after searching online some of the possible solutions available online is to change the port in the adapter-node config env like so:
const config = {
kit: {
adapter: adapter({
out : 'buildit',
env : {
port : 4000,
}
// vite : {
// server : {strictPort : false}
// }
}),
}
};
export default config;
I go back and build the sveltekit again then run the command npm run preview again, like so:
npm run build
npm run preview
but the it gives me the same 3000 port. Some of the discussion online pointed to the vite flag where you set the strictPort to false and it will look for the next available port but that didn't change the port and the build still fixated on port 3000.
When I use npm run build --port 4000, while another app is running on port 3000, I get an error.
Error: listen EADDRINUSE: address already in use 127.0.0.1:3000
at Server.setupListenHandle [as _listen2] (net.js:1318:16)
at listenInCluster (net.js:1366:12)
at GetAddrInfoReqWrap.doListen [as callback] (net.js:1503:7)
at GetAddrInfoReqWrap.onlookup [as oncomplete] (dns.js:69:8)
Emitted 'error' event on Server instance at:
at emitErrorNT (net.js:1345:8)
at processTicksAndRejections (internal/process/task_queues.js:82:21) {
code: 'EADDRINUSE',
errno: -4091,
syscall: 'listen',
address: '127.0.0.1',
port: 3000
}
It seems like it is a server instance error. How to fix it?
It seems like fewer developers are interested in sveltekit because when I used to post a question about sapper, I used to get an answer within hours but I'm noticing that questions about sveltekit getting answered in days. Hopefully there are some developers out there keeping their eyes on sveltekit tag in stackoverflow.
So my question how to change the npm run build so the sveltekit app start using a different port. I'm not asking about npm run dev or npm run preview. My inquiry is about sveltekit to run on port 4000. How the npm run build could be used to build sveltekit app with a different port?
svelte-kit dev and svelte-kit preview are used for development and debugging purposes and should not be run for production builds.
when deploying to a server you run svelte-kit build to generate the final site (in your case that should be located in ./buildit)
i don't think that you can statically specify the port being used, but you can provide it when launching the server using an environment variable.
(i am using #sveltejs/adapter-node, so this might be different for other adapters)
PORT=1234 node buildit/index.js
i hope this is what you were asking for, to be honest i don't think i quite understood the question
change the port mentioned at the bottom on the index.js that was created in build folder...
After "npm run build", you can change the default port 3000 in the build\index.js file(Line 218).
const port = env('PORT', !path && '3000');
->
const port = env('PORT', !path && '1234');

How to access cypress environment variable passed in from command line

Scenario:
I have cypress tests that we run on multiple environments( more than 8), each environment with a separate domain, so we have configured all the domains in cypress.json file under env, now I need to pass the domain dynamically, i.e, from command line and be able to pick it and run the tests on respective domain. but I'm not sure how I can grab that value passed in command line.
Note: I have tried process.env method but did not work.
Code looks like this :
Cypress.json
{
"env": {
"domain1": xyz.com,
"domain2": abc.com,
"domain3": 123.com
}
}
package.json :
{
scripts: {
"test": "npm run cypress open --env domian= $1
}
}
$1 is suppose to get me the command line argument"
From my files under integration folder, Cypress.env(Cypress.env().domain) will/should fetch me the right domain.
However I'm receiving $1 as domain value.
Please help.
Can you share how $1 is supposed to reference the env file? I don't understand that part.
In the meantime, here is an alternative answer to your problem. (just tested it out)
You can write several test scripts which each provide a different domain address.
{
scripts: {
"test1": "npm run cypress open --env domian=xyz.com",
"test2": "npm run cypress open --env domian=abc.com",
"test3": "npm run cypress open --env domian=123.com"
}
}

Is my react code using port 3000 instead of port 80?

Can somebody explain me how is my react application using port 3000.
I have created a web application in react. By default it uses port 3000 when i run the application. But it is accessing the application over http://localhost:3000.
What does that exactly mean. Is it using http i.e. port 80 and port 3000 simultaneously or is it using 3000 instead of 80.
You can modify package.json file and under scripts you have to change start to this:
"start": “set PORT=8000 && react-scripts start",
to change the port. By default it is 3000.

build angularjs 2 with angularjs-cli on codeanywhere

I am getting invalid host header problem while i am trying to server my application by ng serve --host 0.0.0.0 . I have tried the following.
1.install -g angular-cli
2. cd to that app-directory
3. change port in angular-cli.json
"defaults": {
"styleExt": "css",
"component": {},
"serve": {
"port": 1337
}
}
ng serve --host 0.0.0.0
Requested url in browser is http://port-1337.angular2-jobproject0889272.codeanyapp.com/
I was looking to sovle a different problem and came across an answer that may work for you.
ng serve --port 8080 --host 0.0.0.0 --disableHostCheck true
Angular-cli GitHub
If I'm understanding your question correctly, your issue could be stemming from Webpack's security impl.
As the Angular CLI uses Webpack by default to bundle your app, you have to abide by its requirements when using "ng serve". App bundles produced by Webpack now require the Host header of the request to match the listening address OR the host provided in the public option.
The public option is a --public flag passed with the "ng serve" command. On CodeAnywhere you should most likely care to indicate a port # as well. A valid "ng serve" command could look like this:
$ ng serve --host 0.0.0.0 --port 3000 --public myproject-myusername.codeanyapp.com
(For HTTPS service, CodeAnywhere requires you use port 3000)
You can find your specific value for the --public flag in your CodeAnywhere IDE by right-clicking on your project's tree view Connection icon and selecting the "info" option.
To simplify things, you can set this up in your package.json file and then start the Angular server with the command:
$ npm start
For example, you can modify the "start" element of the package.json "scripts" entry as follows:
"scripts": {
"ng": "ng",
"start": "ng serve --host 0.0.0.0 --port 3000 --public myproject-myusername.codeanyapp.com"
}
Hopefully this info is applicable to the issue you are facing. Good Luck!

"Invalid Host header" when web app is served inside a VM (Angular2CLI)

I am trying to run my web app from inside an Ubuntu 16 64-bit virtual machine. Of course, this means I can't have the host be localhost, so I changed the host in the .angular-cli.json file under defaults:
"defaults": {
"serve": {
"host": "0.0.0.0"
},
"styleExt": "css",
"component": {}
}
When I do npm start and go to the URL of the VM, I get a page saying "Invalid Host header". What am I doing wrong? How can I run the web app and access it correctly?
I am new to Angular and was following this tutorial: https://angular.io/guide/quickstart. I am also using Vagrant.
Any help would be appreciated, thank you!
It turns out I had to use the private_network ip address as the host instead, which is located inside the Vagrantfile on this line:
# Create a private network, which allows host-only access to the machine
# using a specific IP.
config.vm.network "private_network", ip: "192.168.100.5"
Though, this only makes it work locally. If someone else has an answer, it would be greatly appreciated!
host should be 192.168.0.100 (your ubuntu server ip).
maybe you can just edit package.json
add host para in start cmd.
"start": "************* --host 192.168.0.100 ",
and npm start will be ok.

Resources