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.
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 have a piece of code that can run on docker or locally.
The hot reload is only working on docker for some reason.
The code is obviously the same and the content is hosted and served properly with webpack dev server. There is no port errors for the hot reload and both solutions are using the same host port.
What could it be?
Here are the differences:
HOST: ubuntu with node v14.1.0
CONTAINER: node:14.0.0-alpine3.10
The command used to run is:
webpack-dev-server --config webpack/webpack.dev.js --hot
And the webpack relevant part is
module.exports = {
...common,
mode: "development",
devServer: {
historyApiFallback: true,
host: "0.0.0.0",
publicPath: "/",
allowedHosts: ["0.0.0.0", "localhost", "*"],
port: process.env.port || 3001
},
watch: true
};
And the package versions are:
"react-hot-loader": "^4.12.20",
"webpack": "^4.42.1",
"webpack-cli": "^3.3.11",
"webpack-dev-server": "^3.10.3"
I can't think why it would only work on the docker and not on the host if anything I would expect the reverse.
An error stack will make it easy for us to help you out.
Maybe your 3001 port is being used by some other service.
Not relevant though, here https://youtu.be/kIe7E02j2jY you will find details about configuring webpack 4 for React from scratch. Helpful resource if you are beginner.
The reason why hot reload is not working, is because of the way webpack-dev-server looks for file changes in a directory, it uses fsevent and inotify. These are modules webpack uses to watch the files in a specified directory. You can check out this answer for more info, and if you feel like its right, do accept and upvote it.
Forgive me I am new to programming in general. I'm having trouble a lot of trouble trying to use pm2 to run a react app that has webpack set up. We are using an apache server for the production. For work we are trying to have the development server constantly running, the way that webpack dev server would have had it running so that more than one person can work on it at the same time. I thought I had enabled and got the app running but I am not sure if I am pointing to the wrong source file or if it should be pointing to a script or if I'm using the wrong interpreter.
I've looked into this https://github.com/facebook/create-react-app/issues/774 but having installed webpack the react scripts stopped working because of babel-cli. I can't afford to go back to react scripts at this point since I spent so much time trying to configure webpack.
Was wondering if anyone can guide me as to where the script in the pm2 should point to for react? is it the index.js? or is it the webpack.config file that i set up? And if I'm using webpack where should I point the interpreter to if i have webpack set up with babel?
Any help would be appreciated.
This is my pm2 config file.
module.exports = {
apps: [{
name: "ucdirectorapp",
script: "./src/index.js",
watch: [
"./build",
"./public",
"./src",
".babelrc",
"package.json"
],
watch_delay: 1000,
ignore_watch: ["node_modules"],
watch_options: {
"followSymlinks": false
},
env: {
name: 'ucdirector-dev',
NODE_ENV: 'development',
"PORT": 3000,
},
error_file: "./resource/log/pm2/err.log",
out_file: "./resource/log/pm2/out.log",
log_file: "./resource/log/pm2/log.log",
max_memory_restart: "500M",
interpreter: "./node_modules/#babel/cli/bin/babel.js"
}],
};
I've been using this script pm2 start config/server/pm2.config.js --watch --interpreter ./node_modules/#babel/cli/bin/babel.js in the package.json
I get this error
[PM2][ERROR] NVM is not available in PATH
[PM2][ERROR] Fallback to node in PATH
and I get a babel parse error. The app's status seem to be online but nothing is showing up on the host at port 3000 saying the site can't be reached and that it refused to connect.
We are having a big environment where we have several applications under the same domain eg:
foo.org/a
foo.org/b
We have set up IIS to act in the same way on localhost, so we can type:
localhost/a
localhost/b
to reach the applications. The setup is done so to avoid CORS problems.
We are now trying to create a new application with "create-react-app" (https://github.com/facebook/create-react-app).
To add relative paths when you build for production is no problem, the problems occur when you try to run this with react-scripts start on localhost.
It seems it doesn't support relative paths so it always try to fetch build.js and other resources from /and there is not possible to set this without ejecting webpack.
So my question is, do you have any good ways of sorting this out? Ejecting webpack is not a good solution for us.
You can ejecting the config files by running: npm run eject
Then you'll find a config folder created in your project.
You will find your webpack config files init, where you should be able to change the "root" folder:
module.exports = {
...
resolve: {
modules: [
path.resolve(__dirname, 'node_modules'),
path.resolve(__dirname, './'), // "root" folder
]
}
...
}
Edit: Oh sorry - didn't see that ejecting is no option for you... And unfortunately I don't know any other solution.
"homepage": "/subfolder/path", in package json file should help
create-react-app uses webpack-dev-server in development mode (i.e. react-scripts start) to run a local server on port 3000, making compiled code available to the browser at http://localhost:3000/static/js/bundle.js.
I'd like webpack-dev-server to emit this as a real file so I can point to is from a symlink on the filesystem. Is this an easy configuration change? The config they are using is here: https://github.com/facebookincubator/create-react-app/blob/master/packages/react-scripts/config/webpack.config.dev.js
Well, the solution is to just eject the config out of create-react-app.