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.
Related
Every time I install a new dependency with npm it's like cutting the read wire and hoping the bomb doesn't go off.
This error keeps coming up now:
[BABEL] React Refresh Babel transform should only be enabled in
development environment. Instead, the environment is: "dev_local". If
you want to override this check, pass {skipEnvCheck: true} as plugin
options.
It's a Gatsby app and I can't figure out how or where to achieve {skipEnvCheck: true} I've tried various things in gatsby-node.js such as:
exports.onCreateWebpackConfig = ({ actions, plugins }) => {
actions.setWebpackConfig({
plugins: [
plugins.define({
skipEnvCheck: true,
}),
],
});
};
But it doesn't help. I have different development .env configs (e.g. this "dev_local" environment) for testing with different settings and I want to keep doing that.
Or am I just chasing ghosts here and really there is some other problem with the dependencies?
I ran into the same error when attempting to deploy a Gatsby app to Heroku. A frustrating rabbit hole ensued, but I eventually narrowed the fix down to using gatsby serve instead of the default gatsby develop for the start script.
In package.json:
"scripts": {
"start": "gatsby serve --port $PORT --host 0.0.0.0",
"build": "gatsby build",
...
},
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 have a React app running as part of a docker-compose setup, with the following configuration:
version: "3.7"
services:
client:
image: node:10-jessie
volumes:
- ./client:/app:rw
ports:
- 9000:9000
working_dir: /app
command: npm run dev
...
The client folder that the volume points to, has webpack.config.js and the src folder. When i run docker-compose up the application loads up fine. I can navigate to localhost:9000 and view my app, and by navigating to the console, i can see that Live reloading is enabled.
But when i make changes to the files, which webpack-dev-server would detect and update had i run the app locally, no changes are captured. If i refresh the page manually, the changes are not detected either.
Are there anyone with any suggestions as to what i am doing wrong? I will happily provide more of my code, i just wasn't sure what else was needed to initially convey my problem.
I solved the problem by adding the following to my webpack.config.js:
watchOptions: {
ignored: /node_modules/,
aggregateTimeout: 300,
poll: 500
},
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.
I have to restart my server every-time to see new changes to be reflected on the html. I believe that react should be able to automatically re-render when the js/jsx component codes are changed.
I am currently running my server on vagrant.
I have tried adding "--hot" and "--watch" separately in package.json.
Thanks
You have to use the webpack-dev-server to serve up your JS. That's what provides the hot-reloading feature.
i.e. you should be building your project similarly to this (from package.json):
"start": "node_modules/.bin/webpack-dev-server --inline --content-base dist --history-api-fallback"
and your webpack.config.js should include something similar to:
devServer: {
colors: true,
historyApiFallback: true,
inline: false,
port: 8080,
hot: true
},