npm run start not working

[alison985]

Right now the state of my local is that npm run start doesn't update the local javascript when I save a change to a javascript file. I have to run npm run build before it will show the change. It did not used to act this way. I think it's related to the upstream merge, but will test.

[alison985]

upstream for my local is the mozilla/redash repo. I tried this to fix:

git checkout master
git fetch upstream
git reset --hard upstream/13.3
git push origin master -f

docker-compose build worker
docker-compose build server
npm install
npm run build

docker-compose up
npm run start

Still, npm run start doesn't work as it has/should :( I have an UglifyJS warnings if that matters.

@washort @emtwo @jezdez any thoughts?

[emtwo]

@alison985 you can look at the state before merge if you checkout the branch master_20180531. If npm run start works there but not in current master then it's possibly related to the merge.

Another suggestion worth trying is to checkout the upstream https://github.com/getredash/redash/ and check if the same issue exists there. If so then we can know it's unrelated to the merge itself but rather an issue in the upstream repo and we can file it there too.

You could also try docker-compose build which should build all of the containers. We did add a new Flower container and perhaps there are changes in others. Though this should probably not be affecting npm run start

[alison985]

@emtwo The first thing I tried was reverting the flower commit and the merge from upstream work. When that didn't work I forced going back to mozilla/redash 13.3 release (CLI process outlined in comment above). I'm still having the issue which is making me think this is an npm package that isn't pinned - so I'm going to go searching google/SO because if that's it someone else will have encountered it.

[jezdez]

@alison985 I wasn't able to reproduce your issue, but I did not use the 13.3 branch as well. To be honest I don't know where the 13.3 branch comes from at all, I've always used master directly instead.

My suggestion for your workflow is to stop using an own fork and work directly in branches of the mozilla/redash repo. That way you only have to handle one other git remote (getredash/redash) instead of two (mozilla/redash and getredash/redash).

My workflow for a successful npm start just now:

• git fetch origin (where origin is mozilla/redash)
• npm install (with npm 6.x)
• docker-compose build (docker: 18.03.1-ce, compose: 1.21.1)
• docker-compose up in terminal 1
• npm start in terminal 2

The npm build log shows a warning in query.js but succeeds generally:

WARNING in ./client/app/services/query.js

/Users/jezdez/Code/git/redash/client/app/services/query.js
  141:45  error  A space is required after '{'   object-curly-spacing
  141:68  error  A space is required before '}'  object-curly-spacing

✖ 2 problems (2 errors, 0 warnings)
  2 errors, 0 warnings potentially fixable with the `--fix` option.

Does that help?

[alison985]

@jezdez
FYI - I made the 13.3 branch from the 13.3 tag so I could do what I did above.

I did what you said above, started with a clean clone of Mozilla's fork. I also had to run
docker-compose run --rm server create_db
docker-compose run --rm postgres psql -h postgres -U postgres -c "create database tests"

I than ran the test suite and got 5 failures. I thought running the tests and having them pass was part of the merge/deploy process? It seems to have been removed from Github PR merges but is it not just somewhere else later in the pipeline? I'm filing bugs for each of the test failures now.

Back to does this fix npm run start for me? I also had to run:
npm run build in terminal 2 (otherwise there is no CSS when you run in the browser)
Added data source.
Created query. Saved. Archived it.
Go to code editor and add a character to a menu option to test if recompile changes anything in the browser. In this case adding an A at the end of "Show API Key". Save the file.
Wait for terminal 2 to finish compiling.
Refresh browser.
Check for newly added character. It's not there.
Ctrl+C in terminal 2 to stop NPM.
Run npm run build.
Run npm run start.
Refresh browser.
Added A appears. "Show API KeyA".

I'm sorry if I wasn't making it clear what I meant by npm run start doesn't work and that " npm run start doesn't update the local javascript when I save a change to a javascript file. " What I mean is that I can be running the npm run start command in terminal 2 but the browser won't update to what I've saved for front-end changes until I do npm run build again. In other words, testing whether front-end code changes work is a way longer process than normal.

I'm running npm 6.1.0. Docker: 18.03.1-ce-mac65 (24312) Docker Compose: 1.21.1

@jezdez, Can you get front-end changes to be picked up when npm run start recompiles?

[alison985]

webpack 3.6.0 and node 8.1.3

[jezdez]

There are a few things in your reply:

1. the test suite passes for me locally so I would guess would be cached Docker images? Could you try purging all previous images and do docker-compose build before a test run to have the most up-to-date version?

2. Circle CI is still running for every PR and would fail if there were any tests no passing

3. I don't need to run npm build to pick up changes in the frontend files (see attached screencapture) which makes me wonder if file system changes are correctly picked up by webpack. I don't have experience debugging thing, maybe @openjck has seen that before? Basically I wonder if the piece that is able to do the automatic file change trigger is broken somehow?

[jezdez]

@alison985 Were you able to make things work? If not, would you mind scheduling a meeting so we can work this through directly?

[openjck]

I recently had a problem in the firefox-hardware-report repo where webpack stopped re-compiling files as they changed. The solution was to add a publicPath property (see this commit). I see that you already have a publicPath set, but it's possible the value is incorrect.

[alison985]

@jezdez @openjck

• removing docker containers and docker images and rebuilding didn't work

current line as is: publicPath: "/static/"

• a publicPath of path.resolve(basePath, './dist') didn't fix it, it actually made the entire app not render. Just white pages in the browser.
• a publicPath of path.resolve(basePath, '/static/') didn't fix it, and makes icons and images not work.
• path.resolve(__dirname, 'static') is just white pages in the browser.

[jezdez]

@alison985 I'm not sure how I can help at this point :( It seems pretty annoying to have to run build every time to update the bundle.

@emtwo @washort @spasovski Can you think about something to fix this?

[spasovski]

I can't think of anything immediately beyond what has already been discussed. I do recall I had an issue in redash (with my query versions work) where the local JS would work yet it would error out on production -> had to start doing npm run build in order to see whether the JS would work on the server going forward.

To further isolate the fresh build I'd try running like an ubuntu VM and trying the local server there. If it works it might be a good place to start checking various framework/build tool versions.

[alison985]

I found this thread about this issue: webpack/webpack-dev-server#875 which seems to happen regularly in edge cases of environment setup. It’s a loooooooooong thread so avoid reading it if you can. But it got me to finding the issue:
http://0.0.0.0:5000/static/app.51a263034da66bf08efd.css <- pulled from network tab of console on working page
http://0.0.0.0:8080/static/app.51a263034da66bf08efd.css <- this is a valid file
http://localhost:8080/static/app.16b9c3f7895391d5499b.css <- this is from http://localhost:8080/webpack-dev-server

basically webpack-dev-server is compiling, it seems to even being putting the file in the right place but the file name association is the issue

[jezdez]

@alison985 Were you able to get anything from the comments upstream?

[alison985]

Yes! Arik's comment covered it. No idea why what I had been doing used to work, but I'm working again now. 🎉

[jezdez]

ZOMG! ヽ(•‿•)ノ