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!
Related
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');
I just have a question around best method to start my react app when I run cypress test. Right now the way its setup for me I need to start my server then run cypress test. I would like a single command to start react app -> run Cypress test.
I am new to both react and cypress
My package.json looks like this
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "cypress run",
"eject": "react-scripts eject"
},
Currently I need to run npm start then in another window npm test
I tried to start and run test in a single line but I could not get it to work. It just started react app and did nothing else.
I wrote this up recently as part of a series on TDD in JS, you can read the full article on my blog.
First, install some useful helper dependencies:
$ npm install concurrently cross-env wait-on
Then add some extra scripts to the package.json:
"e2e:ci": "concurrently -k -s first \"npm:e2e:ci:*\"",
"e2e:ci:app": "cross-env BROWSER=none PORT=4321 npm start",
"pree2e:ci:run": "wait-on -t 30000 http-get://localhost:4321",
"e2e:ci:run": "cross-env CYPRESS_BASE_URL=http://localhost:4321 npm run e2e",
So what does that do? When we run npm run e2e:ci, the concurrently script is going to run two things in parallel for us:
e2e:ci:app: Run the app using npm start, with some environment variables set via cross-env (this allows it to work on *nix and Windows):
BROWSER=none stops the browser from popping up and taking over the screen [this is the default behaviour of a React app created by CRA, which the article was using]; and
PORT=4321 runs the app on the specified port (so we can still have a version running on port 3000 without causing any conflicts).
e2e:ci:run: Run the E2E tests in a two-step process:
The pre script runs first, and uses wait-on to wait for up to 30,000ms for the app to be running on the specified port; then
If that works (i.e. the app starts in less than 30s) run the actual tests, with the baseUrl configuration overridden to point to the right place.
The other configuration options passed to concurrently itself are:
-k, meaning stop all of the other processes when one exits (in this case we expect our tests to exit at some point and want to stop the app when they do); and
-s first, meaning that the output of the overall command is the output of the first one to exit (i.e. output from the e2e:ci command should be the output from the tests).
Building on the answer by jonrsharpe, I also needed to launch my (golang, though the implementation language doesn't really matter) api server, and I'm running tests via wdio. It uses the same toolset as his answer but with an extra step:
"e2e:ci": "concurrently -k -s first \"npm:e2e:ci:*\"",
"e2e:ci:server": "cross-env SERVER_PORT=40001 ./launchServer.sh",
"pree2e:ci:app": "wait-on -t30000 http-get://localhost:40001/state",
"e2e:ci:app": "cross-env BROWSER=none PORT=40002 npm start",
"pree2e:ci:run": "wait-on -t 30000 http-get://localhost:40002",
"e2e:ci:run": "npx wdio run ./wdio.conf.js --baseUrl http://localhost:40002"
The two extra scripts are:
e2e:ci:server which runs a script to launch the server
pree2e:ci:app just waits until the server is running. Note that it's not just waiting on "/" -- my api server 404s on root requests, and wait-on needs to get a 2xx response, so the http-get url needs to be a valid api endpoint ("/state").
It's also worth noting that wdio just uses an extra command line argument to set the base url instead of the env var in the original cypress solution.
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"
}
}
I'm trying to setup my webpack instance with webpack-dev-server.
I pass into scripts a setting for increase header size "--max-http-header-size=100000".
"dev": "npm run options-to-dev && env targets=manager && node --max-http-header-size=100000 webpack-dev-server --host 0.0.0.0 --progress --config webpack.config.js"
on execution script "dev" I got an error
$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
^^^^^^^
SyntaxError: missing ) after argument list
at Module._compile (internal/modules/cjs/loader.js:891:18)
at Object.Module._extensions..js (internal/modules/cjs/loader.js:991:10)
at Module.load (internal/modules/cjs/loader.js:811:32)
at Function.Module._load (internal/modules/cjs/loader.js:723:14)
at Function.Module.runMain (internal/modules/cjs/loader.js:1043:10)
at internal/main/run_main_module.js:17:11
without "node --max-http-header-size=100000" webpack working perfect.
Problem was in my file webpack-dev-server file. I pass instead webpack-dev-server this line ../../node_modules/webpack-dev-server/bin/webpack-dev-server.js
"dev:windows": "npm run options-to-dev && env targets=customer && node --max-http-header-size=100000 ../../node_modules/webpack-dev-server/bin/webpack-dev-server.js --host 0.0.0.0 --progress --config webpack.config.js"
If you want to run webpack-dev-server with that option then use following:
{
"scripts": "NODE_OPTIONS='--max-http-header-size=100000' webpack-dev-server"
}
A little mention about it can be found at the bottom of this documentation page: https://webpack.js.org/configuration/dev-server/
Hard to find without using search option ;)
It took me some time to figure out. Its essential not a problem with webpack devserver, nuxt or other framework running on top.
Its node that enforces the limit due to avoiding DDOS attacks for any webserver running on a node.
You can when starting node giving the argument --max-http-header-size to change the value.
But many of us that use a framework, react, or nuxt on top is not starting node ourserlf so it is hard to find exactly what to do and having to start everything ourselves is not trivial.
cross-env is really nice, allowing you to set environment variables and node do accept a NODE_OPTIONS environment variable where custom arguments all can be set.
See the example I used o a nuxt project here:
"scripts": {
"build": "nuxt-ts build",
"dev": "cross-env NODE_OPTIONS=--max-http-header-size=200000 DEBUG='express:*' authority=.... resourceApi=... nuxt-ts --port 3001",
"generate": "nuxt-ts generate",
"precommit": "npm run lint",
"start": "nuxt-ts start --port 3001"
},
where I changed the normal dev:"nuxt-ts" option to use cross-env and setting max HTTP header.
Hopefully, this can help others.
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.