Hi I am new to react and would like to change my react port number of 3000
as i have an express server running on the 3000.
So obviously i look through stackoverflow answers and i tried everything recommended.
i created a .env in root folder (public) and set the port to = 4000
tried the same in .env.development
i added:
"scripts": {
"start": "set PORT=3500 && react-scripts start",
"build": "react-scripts build"
}
in my json file.
but only to end up with below upon restart
Local: http://localhost:3000
On Your Network: http://192.168.2.19:3000
What could i possbily be missing in my app that its working for other ppl but not for me??
please let me know
If you're on Mac/Linux the start command is slightly different:
"start": "PORT=3500 react-scripts start"
Related
In the React file structure under components there is index.js file that runs the main character when running the project. Is there anyway to rename this file to any name I want? I am using PM2 server manager and there is no way for me to keep track which server is which when running multiple index.js files. So the only option I got is to rename this index.js to something specific to each project.
I have tried changing the package.json file's start script as below but nothing worked out only gave errors.
"scripts": {
"start": "test.js react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
}
Appreciate all your help!
You can't change the name of the file used by create-react-path.
You'll have to either eject to use custom webpack config by running
npm run eject
But it's a one-way operation (see documentation)
Or you can use Vite instead of create-react-app to bundle your project.
Vite is more configurable than create-react-app, you define in the index.html the name of your js file. So you can put any name you want.
Maybe even this example could help you:
https://vitejs.dev/guide/ssr.html#example-projects
I have a React project and installed mock server with json-server node module.
(For your note: Here is the json-server documentation for better understanding. [link]1)
I can start mock server with npm script [npm run mock].
After run the script, mock server start working with this link: localhost:3000.
This react project is working well on local environment.
Now I am going to deploy react project on vercel.
But I have no idea for start mock server on vercel.
How can I start mock server on vercel?
Here is the scripts of package.json file for the application.
{
...
"scripts": {
"start": "PORT=3001 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject",
"mock": "json-server --watch src/mock/db.json",
"preinstall": "npm install --package-lock-only --ignore-scripts && npx npm-force-resolutions"
}
...
}
Please ask me more information what you want to check.
I had a similar issue and this article save my life.
https://shadowsmith.com/how-to-deploy-an-express-api-to-vercel
Instead of deploying together with my React project, I deploy JSON Server as a separate mock server.
First of all, you need to create a server.js to run JSON Server as a module.
Reference: https://github.com/typicode/json-server#module
At the end of the file, export server in order for Vercel to turn Express into a serverless function
// Export the Express API
module.exports = server;
Last but not least, create a vercel.json in order to deploy to Vercel.
Here are my scripts for your reference purpose: https://github.com/kitloong/json-server-vercel
I am running a server and a React site on the same Heroku app. My server.js is able to access the $PORT environment variable fine, but my React app is not getting anything from it (the variable is blank).
I need to be able to access the PORT environment variable because thats what my server (Radiks) is running on. From what I've read, React environment variables are only allowed if they are prefixed by REACT_APP_, so in the build script in package.json, I added a new environment variable that takes on the same values as $PORT.
My Procfile:
web: REACT_APP_PORT=$PORT node src/server.js
In package.json:
...
"scripts": {
"start": "node server.js",
"heroku-postbuild": "NPM_CONFIG_PRODUCTION=false npm install && npm run build",
"build": "REACT_APP_PORT=$PORT react-scripts build",
"test": "react-scripts build",
"eject": "react-scripts eject",
"predeploy": "npm run build",
"deploy": "gh-pages -d build"
},
...
In my React app (App.js):
...
console.log("Connected to server:" + process.env.REACT_APP_PORT);
configure({ apiServer: process.env.REACT_APP_PORT || "http://localhost:1260", userSession})
...
(This ends up only printing out Connected to server:)
Any help would be greatly appreciated, thank you in advance!
From what I've read, React environment variables are only allowed if they are prefixed by REACT_APP_, so in the build script in package.json, I added a new environment variable that takes on the same values as $PORT.
That's new to me. I looked it up and also saw the passage that said this so I'm going to take your word for it.
web: REACT_APP_PORT=$PORT node src/server.js
Seems plausible.
"build": "REACT_APP_PORT=$PORT react-scripts build",
You are building your html, js, css files here. The port is never used. Heroku's $PORT value is dynamic. It changes from time to time. So when you are building your static files it still references a variable instead of a hardcoded value.
configure({ apiServer: process.env.REACT_APP_PORT || "http://localhost:1260", userSession}
Should be:
configure({ apiServer: "http://localhost:" + process.env.PORT || process.env.REACT_APP_PORT || 1260, userSession}
Just in case $PORT works I put it in there. If it does not exist it will pick $REACT_APP_PORT.
Your previous code was missing protocol and host.
I have recently started working on nextjs framework and I have created an index.js document inside pages folder. I wanted to implement social login authentication and found for some reasons I need to run next js in https mode.
Can anybody tell me how can I do that in dev machine.
Here is my error message
error message
and here is my package.json scripts
"scripts": {
"dev": "next -p 3001",
"build": "next build",
"start": "next start",
},
This article on freeCodeCamp looks promising :
https://www.freecodecamp.org/news/how-to-get-https-working-on-your-local-development-environment-in-5-minutes-7af615770eec/
I would like to go back and forth between two React.js projects in Bash and view them on the web while programming them. Would localhost be able to view them both?
I haven't tried to yarn start them both, I am only asking. I am on a 2009 Macbook version 10.11.6.
Listening localhost/3000
You can run the two projects in different ports (example: run one project on port 3000, and another on port 8000). You can modify package.json under your project root directory to change the port number.
Below is an example of a package.json for running the project on port 8000.
"scripts": {
"start": “PORT=8000 react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject"
}
You need to run them on two separate ports.
As long as the servers are listening on different ports, they will be completely independent.