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

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');

Related

sudo npm run start Admin permissions error?

I am trying to run react application as sudo on port 443 but it is throwing permissions error as follows. I tried running the react script with root privileges too but get the same error.
Command used is
sudo npm run start
Error
? Admin permissions are required to run a server on a port below 1024. Probably:
/Applications/Google Chrome.app/Contents/Frameworks/Google Chrome Framework.framework/Versions/91.0.4472.114/Helpers/Google Chrome Helper.app/Contents/MacOS/Google Chrome Helper --type=utility --utility-sub-type=network.mojom.NetworkService --field-trial-handle=1718379636,2199499938256335430,15968884667410910440,131072 --enable-features=BlockInsecurePrivateNetworkRequests,CookieSameSiteConsidersRedirectChain,CriticalClientHint,CrossOriginEmbedderPolicyCredentialless,CrossOriginIsolated,CrossOriginOpenerPolicyAccessReporting,CrossOriginOpenerPolicyReporting,DocumentPolicyNegotiation,EnableNewCanvas2DAPI,ExperimentalContentSecurityPolicyFeatures,FeaturePolicyForClientHints,LangClientHintHeader,OriginIsolationHeader,OriginPolicy,SchemefulSameSite,UserAgentClientHint --lang=en-US --service-sandbox-type=network --enable-experimental-web-platform-features --metrics-client-id=22a9279b-1648-45cf-a03c-0ce68df69ad5 --shared-files --seatbelt-client=27 (pid 887)
in /
Would you like to run the app on another port instead? (Y/n)
I checked port 443 and it is available to listen. I also wrote a script to listen on port 443 on localhost and it is able to bind on this port as a sudo user. No luck with the react app though.
I was able to run react app earlier in the same laptop but something changed and I don't know what. The error is anyway about permissions but I ruled out this possibility.
I feel it has something to do with Google Chrome Helper which react-scripts is trying to run without Admin Privilege.
Also, it could be some other package I installed which may have caused the issue.
I am at a loss here and am not sure how to debug it further. Googling the problem didn't help either. Any help to debug or fix the issue is greatly appreciated. Thanks in advance.
Mac OS Big Sur - version 11.4
npm version 7.18.1
I was able to get around this issue, by using this package.json command:
{
"scripts": {
"start-https": "sudo PORT=443 HTTPS=true react-scripts start"
}
}
I met the same issue, and solved by downgrading the node version from 16 to 14, don't know why but works.
The only way I found it to work (especially when you install node and npm using nvm) is to call react-scripts directly:
sudo node ./node_modules/.bin/react-scripts start
This assumes you are in the project / repository directory containing .node_modules. Nevertheless, it is different question whether its correct to npm start with sudo. I was just experimenting to run the dev server on port 80 and it was giving error
Admin permissions are required to run a server on a port below 1024.
And I was unable to fix it with various solutions specified on these links: 1, 2, 3, 4. From these links I mostly tried configuration related solutions as I did not wanted to reinstall node (without nvm).

React.js not connecting to (localhost) Ganache on EC2: ERR_CONNECTION_REFUSED 127.0.0.1:8545

Using the following installation on Ubuntu Server 20.04 :
sudo apt-get update
sudo apt-get install nodejs
sudo apt install python2
sudo apt install npm
npm install ganache-cli
npm install node-gyp#3.6.2
npm install truffle#5.1.39
sudo npm install create-react-app#3.3.1 -global
npm install
I am having the error
Failed to load resource: net::ERR_CONNECTION_REFUSED 127.0.0.1:8545/:1
I am running ganache with the command line interface:
I can test the connection via node command prompt
To which I am able to verify a connection to ganache private blockchain
Then I try App.js in React
obtaining the following error:
I have tried the following:
1.) Setting up a proxy under package.json : http://127.0.0.1:8545
2.) Trying http://0.0.0.0:8545
3.) Setting up a middleware proxy account as presented in the following solution:
https://medium.com/bb-tutorials-and-thoughts/react-how-to-proxy-to-backend-server-5588a9e0347
"proxy": "http://127.0.0.1:8545"
4.) addressing cache related issues through rm -r package-lock.json node_modules and npm install updating react.js to latest version
5.) trying different port: 7545
6.) updating react to latest version on ubuntu
I figured it out - thanks to all who reviewed my problem. - hopefully this will help someone in the same situation. To connect to an ec2 instance with React.js / blockchain dapp you need to follow five steps:
1.) set appropriate security rules (you will need to allow access for an instance to reach your server) I set the following rules in a very liberal fashion since this was only a test:
you need to start ganache with explicit chainId specified and a direct reference to your public domain IPv4 DNS domain e.g (
http://ec2-54-186-149-26.us-west-2.compute.amazonaws.com)
the command should look as follows:
3.) the same domain mnemonic needs to be specified in metamask (along with an imported account from your ganache server ) It should look as follows:
4.) React.js also needs to access the domain from EC2 directly (do not use localhost ,even you are running on the server the loopback will not work! - also do not use a shortcut with or (||) condition as that also produced errors for me ). It should look similar to below:
5.) your smart contracts also need this domain specified explicitly - so you will also need to edit your truffle-config.js as follows:
Finally i can read my blockchain via React.js on a test network (ganache) via EC2.
Below is blockchain data presented to screen.
I hope this helps someone out there - this was not found easily.
regards
John D.

How to run Express-React project

I`m trying to understand how to run this project, published on GitHub here
No idea how. I ran npm i, and then npm start, but I got these messages:
npm start
> fed-entry-level-exam-root#1.0.0 start C:\entry-level-exam_19\entry-level-exam
> lerna run start --parallel
lerna notice cli v3.22.1
lerna info Executing command in 2 packages: "npm run start"
#fed-exam/client: > #fed-exam/client#1.0.0 start C:\entry-level-exam_19\entry-level-exam\client
#fed-exam/client: > set CI=true && react-scripts start
#fed-exam/server: > #fed-exam/server#1.0.0 start C:\entry-level-exam_19\entry-level-exam\server
#fed-exam/server: > ts-node-dev index.ts
#fed-exam/server: [INFO] 21:51:34 ts-node-dev ver. 1.1.0 (using ts-node ver. 9.1.1, typescript ver. 3.9.9)
#fed-exam/server: starting server { serverAPIPort: 3232, APIPath: '/api/tickets' }
#fed-exam/server: server running 3232
#fed-exam/client: i 「wds」: Project is running at http://192.168.0.108/
#fed-exam/client: i 「wds」: webpack output is served from
#fed-exam/client: i 「wds」: Content not from webpack is served from C:\entry-level-exam_19\entry-level-exam\client\public
#fed-exam/client: i 「wds」: 404s will fallback to /
#fed-exam/client: Starting the development server...
I tried to open http://localhost:3232/ but I getting this error:
Cannot GET /
Also tried :
http://localhost:3000
Which is known for React localhost.
So far I don't know how to make it work.
Any help will be appreciated.
run the client and server separately,
after running npm install and npm start
open a new terminal and run npm start inside client/ directory
If you carefully read messages on the console you will notice where the api is running.
The lines
#fed-exam/server: starting server { serverAPIPort: 3232, APIPath: '/api/tickets' }
#fed-exam/server: server running 3232
Shows that server project is running at port 3232, but that api path starts at /api/tickets. So, for access the root of the api, access http://localhost:3232/api/tickets.
You could check how this works by checking the express app code on server folder.
And there is a problem with the client code that is related with react-scripts when trying to run projects using lerna package. The line
Content not from webpack is served from C:\entry-level-exam_19\entry-level-exam\client\public
Was previously reported as error here: Content not from webpack is served from /foo
Try to solve the issue using our colleagues suggestions.

Denial of Service - http proxy - React

I am pretty sure that this error appeared only today and it never occurred before.
When I create a new react app, the process found 1 high vulnerability:
High: Denial of Service
Package: http-proxy
Patched in: No patch available
Dependency of: react-scripts
Path: react-scripts > webpack-dev-server > http-proxy-middleware > http-proxy
More info: https://npmjs.com/advisories/1486
(My version of "react-scripts" is 3.4.1). Of course, "npm audit fix" doesn't work.
What can I do about it? Is it something to care about or I can work normally?
All versions of http-proxy are vulnerable to Denial of Service. An HTTP request with a long body triggers an ERR_HTTP_HEADERS_SENT unhandled exception that crashes the proxy server. This is only possible when the proxy server sets headers in the proxy request using the proxyReq.setHeader function.
For a proxy server running on http://localhost:3000, the following curl request triggers the unhandled exception:
curl -XPOST http://localhost:3000 -d "$(python -c 'print("x"*1025)')"
Remediation
No fix is currently available. Consider using an alternative package until a fix is made available.
Conclusion
But for the time being, you can work normally. It should not cause any type of working anomaly as of now.
Upgrade to http-proxy 1.18.1+ which contains a fix for the security issue detailed. NPM have now updated their security APIs to include the information that this issue is now resolved.
See https://github.com/http-party/node-http-proxy/issues/1446 for more info
first install the package
npm install http-proxy --save-dev
in your package.json file add the following statements
"resolutions" :{
"http-proxy": "^1.18.1"
}
"scripts" :{
"preinstall": "npx npm-force-resolutions"
}
then run the command in the command prompt-
npm install
this might fixed your vulnerability

Error: No network specified. Cannot determine current network

Truffle react-box not working as expected with default setup (with ganache and metamask)
I download and run ganache then I followed the first 4 steps in the readme and when I get to truffle migrate it says 'Error: No network specified. Cannot determine current network.' in the console.
On OSX 10.13.3 I went into the truffle.js file in the root folder and changed it to
module.exports = {
networks: {
development: {
host: '127.0.0.1',
port: 7545,
network_id: '*'
}
}
};
npm run start in the terminal and everything works fine. Make sure you have ganache running in the background though.
Also, make sure that the rpc server in ganache matches the host and port in the truffle file you just updated.

Resources