Cant get webpack hotreload with create-react-app and docker windows - windows

We are going to develop a react pwa with dockersetup and to publish the app on gitlab pages during deployment to master branch.
I work on a windows device and cant get the feature of hotreloading in dev-mode. Whenever i make some change, the code isnt recompiling. I have to docker-compose up --build every single time for every change.
Is there any possible way to get hotreloading working on a windows/docker/create-react-app setup?
Following the package.json:
{
"name": "Appname",
"version": "0.1.0",
"private": true,
"dependencies": {
"react": "^16.7.0",
"react-dom": "^16.7.0",
"react-scripts": "2.1.1"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"buildandserver": "react-scripts build && serve -s build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": "react-app"
},
"browserslist": [
">0.2%",
"not dead",
"not ie <= 11",
"not op_mini all"
]
}
Now the Dockerfile for Dev-Setup:
FROM node:9.6.1
# set working directory
RUN mkdir /usr/src/app
WORKDIR /usr/src/app
# add `/usr/src/app/node_modules/.bin` to $PATH
ENV PATH /usr/src/app/node_modules/.bin:$PATH
# install and cache app dependencies
COPY package.json /usr/src/app/package.json
RUN npm install
RUN npm install react-scripts#1.1.1 -g
# start app
CMD ["npm", "start"]
And at least the docker-compose for dev-setup:
version: '3.5'
services:
App-Name:
container_name: App-Name
build:
context: .
dockerfile: devsetup/Dockerfile
volumes:
- './:/usr/src/app'
- '/usr/src/app/node_modules'
ports:
- '3000:3000'
environment:
- NODE_ENV=development
Im running docker for windows on the device.
I hope anyone can help me out of here...Thanks!

The problem is mainly caused by the fact you're on Windows.
Why?
Because Docker on Windows does not work well with volumes. To be more precise - it does not notify the container about the volume change. It does expose up to date files in container but the Linux inside the container "doesn't know" about the fact that file has been changed which is required to trigger webpack recompilation.
There is few solutions:
Switch to Linux for development (I know it may be not possible but if you are working with docker a lot and you can move - do that. Linux containers on Linux work much faster, no issues with volumes etc)
If you can't you can either use legacy polling in weback which is already mentioned in comments
You can use e.g. https://github.com/merofeev/docker-windows-volume-watcher which is Python based tool which watch your local files and container files inside the volumes and notify the container about the change...
I found 3 working a bit better than 2 but both will have some performance sacrifice.
I hope it helps. If you have any questions just comment and I will try to edit to explain better.

Related

Suddenly, NPM script variables no longer work

I use package.json variables like this in NPM scripts:
// package.json
{
"version": "0.12.1",
"scripts": {
"get-version": "echo %npm_package_version%"
}
}
npm run get-version currently echoes %npm_package_version% instead of 0.12.1. In the past, the scripts worked without any problems. Suddenly only the variable name comes back. With multiple repositories. I run Windows 10 2004 and NodeJS v15.4.0.
Was there a change for NPM scripts in Node.js 15? Is it a bug or a feature?
UPDATE: Failure to expand environment variables on Windows appears to be a recent high-priority known bug in the npm CLI.
Because this is npm#7 specific, until a fix is released, you can downgrade to npm#6.
ORIGINAL ANSWER:
The easiest solution for the specific case in this question is to use node.
"get-version": "node -p process.env.npm_package_version"
This will work on every platform that Node.js supports.
If you need a more general solution and don't want to rewrite a bunch of scripts to use node, you can try cross-var as mentioned by #RobC in the comments.
As for the source of the problem, perhaps you are running under the Windows bash shell, in which case you can use this:
"get-version": "echo $npm_package_version"
That won't work for non-bash Windows environments though.
I found simple hack which is working perfect in my case,
Specifically in your use case
// package.json
{
"version": "0.12.1",
"scripts": {
"get-version": "node -e \"console.log(process.env.npm_package_version)\""
}
}
Usage
npm run get-version
However you want to pass arguments.
// package.json
{
"scripts": {
"get-argument": "node -e \"console.log('your argument:', process.argv[1] )\"",
}
}
Test example
npm run get-argument hello_world
Default values are a great way to handle undefined values. We use a predefined value instead. Inside our NPM script we can achieve that by using the following syntax;
{
"version": "0.12.1",
"scripts": {
"get-version": "echo ${npm_package_version:0.99}"
}
}
And of course, running npm from a bash prompt might help. I guess running from a Cmd/Powershell "could work" but I would be careful about that.
FYI - A related change in Version 7 if you are using the Package config variables:
The variable name changed from npm_package_config_customFooVar in V6 to npm_config_customFooVar in V7
Delineate these appropriate (as below) to the environment (Windows bash linux etc) being used. or Use lib like cross-var.
Package.json
{
"config": {
"customFooVar": "bar",
"env": "development"
},
"scripts": {
"get-var": "echo using env1 $npm_config_customFooVar OR env2 %npm_config_customFooVar%"
"build": "npm config set myAppName:env"
"postbuild": "cross-var ng build --configuration=$npm_config_env && cross-var node myOtherBuildSript.js $npm_config_env"
}
}
e.g. npm-cli call (note space after --) as this is passed to the script. Not to npm itself.
npm run build -- production
pass args from package.json to cli
echo %npm_package_version%
This solution allowed me to use the npm_package_version variable in both Windows and Unix:
Install run-script-os as a dev dependency. Then in your package.json the variable can be used:
"scripts": {
...
"postversion": "yarn postversion-wrapper",
"postversion-wrapper": "run-script-os",
"postversion-wrapper:windows": "echo %npm_package_version%",
"postversion-wrapper:nix": "echo $npm_package_version"
}

Node js app crashing a couple seconds after running on heroku with no logs

When I deploy my build, the build always succeeds and runs too. However a couple seconds after running it crashes with no logs about why. I have tested locally using the heroku local web command and it works flawlessly. I have also used heroku bash to check node_modules to ensure all my dependencies have been installed correctly. I also tried to run via heroku bash but the same error occured. Node and npm versions are the same on both local and remote with versions node: >=10.16.0 and npm: >= 6.9.0. I have attempted to also copy my files (excluding package-lock.json and node_modules) into a new directory and use npm install and npm run start and still works as intended locally. Any ideas?
Update
I rolled back to a previous commit that was working using the heroku's rollback command and the website is up and running. I create a staging branch and pushed my changes so I am now working off of that. The thing is I just wish there was some kind of error message in the logs that would specify why its crashing because this has left me stumped for days.
another update
I installed ubuntu to test running my project on a linux OS to see if that would repro this issue but it still ran as normal.
** Final Update **
I managed to get things working by completely starting from scratch and adding one thing at a time. I know this isnt helpful but I would like to keep this question open because I still do not know what caused this issue.
package.json
{
"name": "hayewoodbotapi-v2",
"version": "0.0.0",
"scripts": {
"start": "npm run prod",
"build": "npm-run-all clean transpile",
"server": "node ./dist-server/bin/www",
"prod": "npm-run-all build server",
"transpile": "webpack && babel server --source-maps --out-dir dist-server",
"clean": "rimraf dist-server"
},
"dependencies": {
"#babel/node": "^7.2.2",
"babel-loader": "^8.1.0",
"cookie-parser": "~1.4.4",
"crypto-js": "^4.0.0",
"debug": "~2.6.9",
"ejs": "^3.0.1",
"express": "^4.17.1",
"express-generator": "^4.16.1",
"express-session": "^1.17.0",
"http-errors": "~1.6.3",
"jade": "~1.11.0",
"lance-gg": "^4.0.8",
"morgan": "~1.9.1",
"nodemon": "^2.0.3",
"npm-run-all": "^4.1.5",
"passport": "^0.4.1",
"passport-oauth": "^1.0.0",
"passport-twitch": "^1.0.3",
"pg": "^7.18.2",
"query-string": "^6.12.0",
"regenerator-runtime": "^0.13.5",
"request": "^2.88.2",
"rimraf": "^3.0.2",
"sequelize": "^5.21.5",
"sequelize-cli": "^5.5.1",
"socket.io": "^2.3.0",
"webpack": "^3.8.1"
},
"engines": {
"node": ">=10.16.0",
"npm": ">=6.9.0"
},
"devDependencies": {
"#babel/cli": "^7.2.3",
"#babel/core": "^7.3.4",
"#babel/preset-env": "^7.3.4",
"eslint": "^3.16.1",
"express-swagger-generator": "^1.1.17"
}
}
Here are the logs via heroku. As you can see it is executing because I added a console.log statement to output the port.
2020-04-30T18:50:49.307843+00:00 app[web.1]: Successfully compiled 23 files with Babel.
2020-04-30T18:50:50.111523+00:00 app[web.1]:
2020-04-30T18:50:50.111537+00:00 app[web.1]: > hayewoodbotapi-v2#0.0.0 server /app 2020-04-30T18:50:50.111537+00:00 app[web.1]: > node ./dist-server/bin/www
2020-04-30T18:50:50.111538+00:00 app[web.1]:
2020-04-30T18:50:52.021984+00:00 app[web.1]: Warning: connect.session() MemoryStore is not
2020-04-30T18:50:52.021997+00:00 app[web.1]: designed for a production environment, as it will leak
2020-04-30T18:50:52.021998+00:00 app[web.1]: memory, and will not scale past a single process. 2020-04-30T18:50:52.028026+00:00 app[web.1]: PORT: 49175 2020-04-30T18:50:52.063057+00:00 app[web.1]: (node:138) [SEQUELIZE0004]
DeprecationWarning: A boolean value was passed to options.operatorsAliases.
This is a no-op with v5 and should be removed.
2020-04-30T18:50:52.063059+00:00 app[web.1]: (Use node --trace-deprecation ... to show where the
warning was created) 2020-04-30T18:50:52.243126+00:00 heroku[web.1]: State changed from starting to crashed
It turned out I just needed to upgrade node version and downgrade webpack version.

Attaching a debugger to a parcel built app

I have my project setup as follows, within my package.json I have the follow:
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "parcel ./public/index.html --open",
"build": "parcel build ./public/index.html NODE_ENV=production --no-source-maps --public-url ./public --out-dir ./dist",
"lint": "eslint --ext .js,.vue src --fix"
},
I can start my project by running: npm run:dev which starts as follows:
To debug the "dev" script, make sure the $NODE_DEBUG_OPTION string is specified as the first argument for the node command you'd like to debug.
For example:
"scripts": {
"start": "node $NODE_DEBUG_OPTION server.js"
}
> impcentral#1.0.0 dev /Users/william/imp/src/impCentral
> parcel ./public/index.html --open
Server running at http://localhost:63188 - configured port 1234 could not be used.
As you can tell it does not stop at my break points within WebStorm. I've tried passing in the $NODE_DEBUG_OPTION within the package.json but to no avail.
Any ideas folks, open to trying this in Visual Studio Code too.
You don't need running your NPM configuration in debugger unless you need debugging parcel itself. As your application, served by parcel, is run in browser, you have to use JavaScript Debug run configuration to debug it.
start your app by running npm run dev (either in WebStorm or in terminal)
create a JavaScript Debug run configuration with your server URL (http://localhost:1234, or http://localhost:63188 in your case):
select this configuration and press Debug

how to breakpoint to webpack in intellij IDEA?

I want to breakpoint to webpack Source Code in Intellij IDEA 2016.2 for Mac.
it tips:
To debug "build-distributor" script, make sure $NODE_DEBUG_OPTION string is specified as the first argument for node command you'd like to debug.
For example:
{ "start": "node $NODE_DEBUG_OPTION server.js" }
but,where is add this code when debugging webpack?
Today I had the same problem and found the place where to put the NODE_DEBUG_OPTION. You have to change or create a new npm script which points to the javascript file. For example, I wanted to set breakpoints in an webpack plugin so my original npm script looked like
"scripts": {
"build": "webpack"
},
my new script with the NODE_DEBUG_OPTION looks like
"scripts": {
"build": "node %NODE_DEBUG_OPTION% ./node_modules/webpack/bin/webpack.js"
},
I'm working on an Windows Machine. Thats the reason why my NODE_DEBUG_OPTION is between two "%" and yours have an "$" in front of.

Doesn't work on DotCloud

I trying to launch app with StrongOps on DotCloud, but information about process/app does not appear in dashboard.Locally it works fine.
API-key and APP-name passed directly in the code. Also, i try to set ENV vars (SL_APP_NAME and SL_KEY), but no result.
App name - is random string and shoudn't represent any real variable, right?
Logs. Only this
strong-agent profiling
Cluster controls unavailable.
My code
require('strong-agent').profile(KEY,APP_NAME);
My package.json
{
"name": "slovohvat",
"version": "0.0.2",
"strongAgentKey": "607dbd9b5cd4c6dd20ae05d128b63652",
"scripts": {
"start": "node app.js",
"test": "echo \"Error: no test specified\" && exit 1"
},
"dependencies": {
"express": "3.4.0",
"nunjucks": "0.1.9",
"socket.io": "0.9.16",
"bigint-node": "1.0.1",
"connect": "2.9.0",
"request":"2.27.0",
"node-logentries": "0.0.2",
"redis": "0.8.6",
"socket.io-clusterhub": "0.2.0",
"connect-redis": "1.4.x",
"async": "0.2.9",
"nodetime": ">=0.8.0",
"emailjs ":"0.3.6",
"strong-agent":"0.2.18",
"raygun": "~0.3.0"
},
"repository": "",
"author": "",
"license": "BSD"
}
And my dotcloud.yaml
www:
type: nodejs
approot: app
process: node app.js 0
config:
node_version: v0.8.x
smtp_server: smtp.XXX.org
smtp_port: 587
smtp_username: XX#XX.XX
smtp_password: XXX
data:
type: redis
strongloop.json exists at same dir as dotcloud.yaml and looks correct.
Please, give me any advice i should to try.
Thank you. And sorry for my English :)
You should create a strongloop.json by using the slc strongops command, it will write the config file after you login. It sounds like you might already have done that.
Note that if you have a stongloop.json, you should NOT provide any args to .profile(). The API arguments are a mechanism for fine-grained control, and for environments when you cannot deploy a config file.
Also, you should remove strongAgentKey from your package.json (it lets anyone on stackoverflow publish data to your account), and the env variables. It sounds like you are configuring strong-agent using all 4 mechanisms at the same time! Sorry about the confusion.
After clearing the redundant config, you should be able to run your app (node .). Login to your strongops console, and see the app after a few minutes as data starts coming in.
If that doesn't work, we will need more details. It might be easier to work through this over irc or email, check out our support page: http://strongloop.com/developers/forums/

Resources