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
}
});
Related
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
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 .
everyone. Have been banging my head against this for a while, and maybe someone else has a better idea of what my issue is. I have a react and lb4 application and I want to host it on our kubernetes cluster. I build the react project and put it into a build folder in my lb4 project and serve those files while using the lb4 backend also for APIs. I put everything in a docker container, and when I run the container locally, it works as I would expect. When I put the container on kubernetes, I am able to hit the APIs from the loop back project but get a 404 when trying to hit the GUI.
In my LB4 project, I have this to serve the static files:
constructor(options: ApplicationConfig = {}) {
super(options);
// Set up the custom sequence
this.sequence(MySequence);
// Set up default home page
this.static('/',path.join(__dirname, '../build'));
// Customize #loopback/rest-explorer configuration here
this.bind(RestExplorerBindings.CONFIG).to({
path: '/explorer',
});
this.component(RestExplorerComponent);
this.projectRoot = __dirname;
and here is my docker file that I'm using:
RUN mkdir -p /src/app
COPY . /src/app
WORKDIR src/app
ARG env_name
ENV NODE_ENV=env_name
ENV PUBLIC_PATH "/"
RUN npm install
RUN npm run build:client
COPY /src/client/build /src/server/
EXPOSE 3001
CMD ["npm", "run", "start"]
Anyone notice anything that might be the issue? Would appreciate it greatly. Thanks.
Edit: Kind of found the issue, I think. Looks like the copying of the static files at the copy step in my dockerfile doesn't quite work as I intended, so I think it's looking at an empty folder on the kubernetes cluster. Now just to see why that isn't working.
I have webpack configured and when i used to run webpack-dev-server --inline --config webpack.js locally i was working.
Now I am running this command remotely while still reading my local files, but hot reload is not working.
Which configuration needs to change for the webpack to read the file changes from local.
And I have tried a lot of stuff that i found around here with no luck.
devServer: {
contentBase: 'src',
hot: true,
inline: true,
port: 8080,
}
add host:0.0.0.0 in devserver config and start devserver with the flag --host 0.0.0.0. refer here for more details.
In my case, using a vanilla create-react-app project, I just added a .env file with parameter HOST set to the actual ip from my dev server and hot-reload started working again.
For more details on parameters available for configuration, check create-react-app docs on Advanced Configuration.
For more details on .env file usage, check create-react-app docs on 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.