I have added a .env file to my root folder and added the below variable.
REACT_APP_API_URL=http://localhost:4000
I have used this in a component as below.
process.env.REACT_APP_API_URL
After adding the above, I have restarted the reactJS application and run the application via npm start. I see the below message in the console, but still, the variable gives an undefined value.
ready - started server on 0.0.0.0:3000, url: http://localhost:3000
info - Loaded env from D:\ReactJsProj.env
info - Using webpack 5. Reason: no next.config.js https://nextjs.org/docs/messages/webpack5
it seems you just want to change your port, not the whole app url. so just do this in your .env file:
PORT=4000
and then restart the dev server. it will do the job!
In nextjs you should add env variables in .env.locale
Related
Vite + Reactjs server is running but I am getting
"This localhost page can’t be found
No webpage was found for the web address: https://localhost:4200/"
on the browser
A common mistake when moving from create react app/react-scripts to Vite is having the index.html in the public folder.
Make sure your index.html file is in the root directory for your Vite project.
TLDR: Change the Port
For me, it was that I already had something running on the port that Vite was trying to serve the app on (3000).
Doing a quick lsof -nPi :3000 (MacOSX) I saw that my docker desktop was running on that port.
You can do this statically by updating a server key in the vite config (vite.config.js)
// https://vitejs.dev/config/
export default defineConfig({
plugins: [react()],
server: {
port: 8000
}
})
Or dynamically via the start command:
vite --port 8000
https://vitejs.dev/config/#config-file
I had the same problem and it was related to the project folder name.
It had some spaces in the name of the project's folder.
I removed spaces and the node_module folder then I installed packages again, and now it's working fine.
Just in case someone is looking for a solution and the other answers didn't work, here is what worked for me.
In vite.config.js I had to set the host to '127.0.0.1' in the server options.
{
server: {
host: '127.0.0.1'
}
}
The default value is localhost but why that doesn't work I still don't know...
I got the same problem. click collapse your project structure in vscode, vite config file was not at the level of index.html. So make sure it should be at where index.html is, Double check please!!
My issue that happened to me that seems possible to commonly happen was I had another index.html file in my public dir. That file will take precedence over the one in your project root, so make sure you delete that or move it elsewhere. For me, it was a remnant of a vite build that I didn't notice hung around
None of the answers here helped me. It turns out uBlock Origin was preventing the index.html page from loading when accessing it through localhost:3000. Disabling it or trying it in incognito mode works!
For me, beside server host true in the vitejs settings, I needed to update the docker run command with "--service-ports" (https://docs.docker.com/engine/reference/commandline/compose_run/):
docker-compose -p myservice run --service-ports --rm node npm run dev
I have the same issue, but there was nothing using the port 3000, but anyways, I change it to port 8000 and it's working
export default defineConfig({
plugins: [react() tsconfigPaths()],
server: {
port: 8000
}
});
I pulled a nextJS application from git and tried starting it using npm run dev ,npx next dev npm run start, matter of fact, every single command I ran gave me the same error.
To further troubleshoot, I followed a youtube tutorial and I started a brand new project ran npx create-next-app appname and again. Same error.
H:\Documents\Projects\React\NextTutorial\ninjalist>npm run dev ninjalist#0.1.0 dev next dev ready - started server on 0.0.0.0:3000, url: http://localhost:3000 error - Failed to load next.config.js, see more info here https://nextjs.org/docs/messages/next-config-error Error: Not supported at Object.loadConfig [as default] (H:\Documents\Projects\React\NextTutorial\ninjalist\node_modules\next\dist\server\config.js:399:74) at async NextServer.loadConfig (H:\Documents\Projects\React\NextTutorial\ninjalist\node_modules\next\dist\server\next.js:110:22) at async NextServer.prepare (H:\Documents\Projects\React\NextTutorial\ninjalist\node_modules\next\dist\server\next.js:92:24) at async H:\Documents\Projects\React\NextTutorial\ninjalist\node_modules\next\dist\cli\next-dev.js:126:9
Most prominent is it's failing to load next.config.js
and the contents of that file is simply
/** #type {import('next').NextConfig} */ module.exports = { reactStrictMode: true, }
Appreciate if I could be informed on what i'm missing cause I have not written any code, this is straight from the create app and I am getting this error.
Gratitude for the assistance.
Dont waste even a single minute. Just update to the latest version of node
Solved it by upgrading to the latest version of NodeJS
when I create a .env.local file in my project root, it's not setting up properly.
in the file, I have my API key like so
API_KEY=SOME_API_KEY
Then when i try to access it in getServerSideProps with process.env.API_KEY, it doesn't work. When I console.log(process.env.API_KEY) i get undefiend. Which I assume is because the file isn't set up properly?
I even tried installing dotenv but I know you don't need that with Next.js.
next config file
module.exports = {
reactStrictMode: true,
}
You’ll notice that the browser will log undefined. This happens since the environment variable is only defined on our server so far.
Since Next.js 9.4, Next.js will make all environment variables that start with NEXT_PUBLIC_ available to the client without any further configuration!
Create .env (all environments), .env.development (development environment), .env.production (production environment), .env.local (local enviroment)
Add the prefix NEXT_PUBLIC_ to all of your environment variables.
NEXT_PUBLIC_BASE_URL=http://localhost:3000/
Use with prefix process.env
process.env.NEXT_PUBLIC_BASE_URL
Stop the server and restart it:
npm run dev
OR
yarn dev
.env.local works with +v9.4.
if you are using older version please try with next config file https://nextjs.org/docs/api-reference/next.config.js/environment-variables.
Note:
Next.js will replace process.env.customKey with 'customKey' at build time. Trying to destructure process.env variables won't work due to the nature of webpack
Restarting the server solved it for me as in #Igmer Rodriguez comment above .
I am trying to add .env file and variables but I am unable to access any variable. I am using React Biolerplate Code.
I am following this React Docs File.
I have added one .env file in my root folder like this:
REACT_APP_SECRET_NAME=secretvaluehere123
And I am trying to access this using this code:
<small>You are running this application in <b>{process.env.NODE_ENV}</b> mode.</small>
I am getting NODE_ENV as development but when I am trying to access:
REACT_APP_SECRET_NAME
I can't access it.
Mine react boilerplate is using:
cross-env NODE_ENV=development
in the start command.
I removed (cross-env NODE_ENV=development) from package.json but it is not working. I tried solutions from this answer: Possible answer.
According to React Docs it should work. I want to add api_url for local it should be x and for the production, it should be y:
The following issue from React Boilerplate seems to suggest a working solution:
Install env-cmd, a node module
Update your start script to use it:
{
start: "cross-env NODE_ENV=development env-cmd node server"
}
This should work if your .env is in the root folder as you've said.
Otherwise, you can specify the path of .env by doing so
{
start: "cross-env NODE_ENV=development env-cmd -f ./custom/path/.env node server"
}
I assume you are trying to access your .env variables inside index.html, if so then syntax is a bit different that in render function. Try to access it like this.
%REACT_APP_SECRET_NAME%
It looks like you're looking at two types of React starters:
React Boilerplate
Create React App
These aren't the same. I don't know React Boilerplate, but I'm not sure if they provide the same environment variables strategy with .env files as Create React App does.
Maybe have a look at the dotenv Node package and perhaps you can add that to your project. I think (not 100% sure) that Create React App uses the same one.
Seems like you have everything right. Just remember to restart your development server every time you change information in your .env file.
Also, your .env file needs to be in the root directory of your react app. You can find all this information in the React Docs - Adding Development Environment Variables In .env
I found similar question here When specified, "proxy" in package.json must be a string ,
but the solution is not working for me , please help me to set up proxy in create-react-app(2.0)
I use "proxy": "http://localhost:8888" in my package.json , but some times it gives error like Error connect from http://localhost:3000 to http://localhost:8888
How to avoid this kind of error ?
This means your proxy server is not running. Please make sure it's started before or alongside your application!
If your node server is being restarted by Nodemon or something similar, it's expected you see these failed requests every once and a while.
In the client side directory:
npm i http-proxy-middleware --save
Create setupProxy.js file in client/src. No need to import this anywhere. create-react-app will look for this directory
Add your proxies to this file.
const proxy=require("http-proxy-middleware")
module.exports=function(app){
app.use(proxy(['/api','/auth/google'],{target:"http://localhost:8888"}))}
We are saying that make a proxy and if anyone tries to visit the route /auth/google or /api (specify your routes)on our react server, automatically forward the request on to localhost:8888.