clarify instructions for contributing to Dash on Windows

[aGitForEveryone]

I am trying to create my first contribution to Dash. I work on Windows, but the instructions for setting up the environment on Windows are unclear. Furthermore, one of the internal scripts uses sh to execute some scripts, making it impossible to run the npm build first-build command via PowerShell or a Command Prompt.

Small intermezzo for thank you:
Thanks for solving the earlier issues with the quotation marks. I tried last year to set up the development environment as well, but the process then failed on these. That doesn't pop up now.

Is it possible to give more clear instructions to set it up? I am currently trying to get it working from a WSL2 terminal, however I would like to stay within the Windows ecosystem as that integrates better with the functionality that my Pycharm IDE provides me while working with Python. (and WSL2 is slow on my system)

To be specific, my installation process failed when running the command npm run extract (which is part of the first-build script). This will in turn call "extract": "cd scripts && sh extract-all.sh", from dash-html-components, where the error occurs. The error is that sh is not known in PowerShell or Command Prompt. There might be errors afterwards as well, I didn't get to that yet.

[aGitForEveryone]

npm run first-build doesn't work on WSL2, it exits with

# line 2 in extract-all.sh: set -e
extract-all.sh: 2: set: Illegal option -

So, this leaves the question, where is npm run first-build supposed to run? It doesn't run in PowerShell, Command Prompt or in WSL2 (running Ubuntu 20.04).

I have also tried in Git Bash terminal earlier, but I didn't keep the error message from that terminal. In any case that also didn't work.

[aGitForEveryone]

I was hoping that running npm run build in WSL2 would work (instead of the failing npm run first-build, unfortunately that also fails. The last step it executed produced the log attached below.

I am at a loss for how to continue. Some guidance would be much appreciated.

npx lerna exec --concurrency 3 --scope='{dash-core-components,dash-html-components,dash-table}' -- npm run build
🛑 (node:3067) [DEP0040] DeprecationWarning: The `punycode` module is deprecated. Please use a userland alternative instead.
(Use `node --trace-deprecation ...` to show where the warning was created)
lerna notice cli v6.6.2
lerna info versioning independent
lerna notice filter including "{dash-core-components,dash-html-components,dash-table}"
lerna info filter [ '{dash-core-components,dash-html-components,dash-table}' ]
lerna info Executing command in 3 packages: "npm run build"
generate-all.sh: 2: set: Illegal option -
lerna ERR! npm run build exited 2 in 'dash-html-components'
lerna ERR! npm run build exited 2 in 'dash-html-components'
lerna WARN complete Waiting for 2 child processes to exit. CTRL-C to exit immediately.
(node:3207) [DEP_WEBPACK_RULE_LOADER_OPTIONS_STRING] DeprecationWarning: Using a string as loader options is deprecated (ruleSet[1].rules[3].use[2].options)
(Use `node --trace-deprecation ...` to show where the warning was created)
(node:3245) [DEP0180] DeprecationWarning: fs.Stats constructor is deprecated.
(Use `node --trace-deprecation ...` to show where the warning was created)

Description for Link.setProps is missing!


Description for Link.setProps is missing!

reformatted dash_core_components/Download.py
reformatted dash_core_components/ConfirmDialogProvider.py
reformatted dash_core_components/Clipboard.py
reformatted dash_core_components/Checklist.py
reformatted dash_core_components/ConfirmDialog.py
reformatted dash_core_components/Dropdown.py
reformatted dash_core_components/DatePickerSingle.py
reformatted dash_core_components/DatePickerRange.py
reformatted dash_core_components/Geolocation.py
reformatted dash_core_components/Interval.py
reformatted dash_core_components/Graph.py
reformatted dash_core_components/Link.py
reformatted dash_core_components/Input.py
reformatted dash_core_components/Loading.py
reformatted dash_core_components/Location.py
reformatted dash_core_components/Markdown.py
reformatted dash_core_components/LogoutButton.py
reformatted dash_core_components/RangeSlider.py
reformatted dash_core_components/RadioItems.py
reformatted dash_core_components/Slider.py
reformatted dash_core_components/Store.py
reformatted dash_core_components/Tabs.py
reformatted dash_core_components/Tooltip.py
reformatted dash_core_components/Tab.py
reformatted dash_core_components/Textarea.py
reformatted dash_core_components/Upload.py
reformatted dash_core_components/_imports_.py

All done! ✨ 🍰 ✨
27 files reformatted, 2 files left unchanged.
reformatted dash_table/_imports_.py
reformatted dash_table/DataTable.py

All done! ✨ 🍰 ✨
2 files reformatted, 3 files left unchanged.

🚨 Finished updating component packages: {dash-core-components,dash-html-components,dash-table} (status=2) 🚨
ERROR: "private::build.components" exited with 1.

[aGitForEveryone]

In an attempt to push forward with creating a PR, I attempted to just copy the changes that @ann-marie-ward proposed in #2880 (hoping that I wouldn't have to run any tests as they already ran in that PR). However, I can't even commit my changes to my local git repo. It presents the following error:

error: cannot spawn .husky/pre-commit: No such file or directory

The file definitely exists and has full access permissions. I did git commit -am "<my message>" from a PowerShell terminal.

The contents of the pre-commit file is

npm run lint && \
(cd components/dash-core-components && npm run lint) && \
(cd components/dash-table && npm run lint)

On the advice of ChatGPT I updated the file to:

#!/bin/bash

npm run lint && \
(cd components/dash-core-components && npm run lint) && \
(cd components/dash-table && npm run lint)

Performing the git commit again, the script now runs, however, it produces this output log:

> lint
> run-s private::lint.*

'run-s' is not recognized as an internal or external command,
operable program or batch file.

It seems I am being blocked by the Dash setup at every opportunity possible.

I will pause working on this issue until I can get some guidance on how to resolve the above issues. Thanks in advance

[BSd3v]

Hello @aGitForEveryone,

You need to run these commands for bash.

First-build runs some things that the unix systems take for granted. XD

first-build fixes this part (as the install of these components is automatic in unix):

You need to make sure that you are running the virtual environment in the bash terminal, otherwise you will end up with errors about different libraries not being imported.

[aGitForEveryone]

Hi @BSd3v,

So, finally I got it working with the Git Bash terminal. I did try that before, but it had failed in me as well. Most likely the result of all the attempts to get the full environment working. It must have broken my Node environment, causing the process to fail. Plus I was also fighting the firewall on my laptop, which prevents access to the Javascript central repositories. Given that the deployment process takes a lot of time, it kept re-enabling itself during the process. In any case, I deleted/uninstalled everything I had and redid the full process in a clean environment and got it working. I wrote down the steps and will make a PR to update the Contribute guide with my findings.

One error is still plaguing me. Like mentioned above, the pre-commit hook still doesn't want to run:

error: cannot spawn .husky/pre-commit: No such file or directory

I have verified that the file exists, and that read access is not blocked for the file. For now, I was able to circumvent this error by splitting the process and using the --no-verify flag (thanks @ann-marie-ward):

npm run format
git add <my files>
git commit -m "<my message> --no-verify

Any idea how to tackle this issue?

Note: I work in Pycharm and use it's Python Interpreter tool to manage my virtual environments. When opening terminals in Pycharm, it will automatically activate my selected virtual environments. Very convenient.

[BSd3v]

Hmm, it's interesting because I didn't have to do many steps to get through the process. I did it from scratch the yesterday.

The main thing was opening the git bash and virtual environment. But I look forward to what you have for your PR.

As far as the verify hooks, yes, it is a pain. For me, I use source tree, which you can bypass the commit hooks.

[aGitForEveryone]

In the end, it was indeed just following the steps you listed in the contribute guide, but on my laptop all the build steps together takes about an hour to complete.

(Plus I don't know what happened to my Node environment. Also, I have little experience with JavaScript, so I am quite unable to precisely debug the state of my Node environment. In the end, uninstalling and deleting everything didn't really take a lot of time and was the easiest way to restart with a clean environment)

But if I understand you correctly, the pre-commit hook is there to be ignored? :p At least, there is no solution available to make it working?

[BSd3v]

Yes, they are working on decreasing the build time for this, windows itself seems to take longer to build than on other systems.

Webpack is going to eventually be replaced with something that will take less time as well.

The good news though, is that this process should only need to be run once and the rest of the time you can just do the run build.

first-build goes through and copies files and npm ci the different packages in each step.