Documentation on how to compile frontend code for building from source?

[kapily]

I'm trying to create a PR to modify some frontend code (.tsx) but not sure how I can build from source so I can test the entire change locally. Could you add some documentation on how to modify the UI code locally and have it compile the javascript and then be able to run mercury?

Would make it easier to contribute, thanks!

[pplonski]

Thanks @kapily for pointing this, @apjanusz please add contributing to docs

[adam-antonik]

To add to this, I'm trying to build the frontend. Having run yarn install --frozen-lockfile and then yarn local-build I get the output

`yarn run v1.22.22 $ REACT_APP_LOCAL_URL="/static" react-scripts build && mv build/ ../mercury/fr node:internal/modules/cjs/loader:599 throw e; ^

Error [ERR_PACKAGE_PATH_NOT_EXPORTED]: Package subpath './lib/tokenize' is notome/proc/mercury_test/mercury/frontend/node_modules/postcss-safe-parser/node_m at exportsNotFound (node:internal/modules/esm/resolve:304:10) at packageExportsResolve (node:internal/modules/esm/resolve:651:9) at resolveExports (node:internal/modules/cjs/loader:592:36) at Module._findPath (node:internal/modules/cjs/loader:669:31) at Module._resolveFilename (node:internal/modules/cjs/loader:1131:27) at Module._load (node:internal/modules/cjs/loader:986:27) at Module.require (node:internal/modules/cjs/loader:1233:19) at require (node:internal/modules/helpers:179:18) at Object. (/home/proc/mercury_test/mercury/frontend/node_modulsafe-parser.js:1:17) at Module._compile (node:internal/modules/cjs/loader:1358:14) { code: 'ERR_PACKAGE_PATH_NOT_EXPORTED' }

Node.js v20.15.0`

If I delete the postcss@^8.1.0 entry in the lockfile then it now compiles, but when running the result the cells, inputs and outputs in the notebook are not being populated, though the Sidebar shows the parameters, and updating them does cause the notebook to be run, nothing is shown.

Could we get a quick description of the current build process, versions of node, etc, that work for getting this to run?

[adam-antonik]

An update: on an ubuntu 18.04 image, running the standard ancient node version (12.18.3), with npm install npm run local-build there are many many warnings, but compilation succeeds. However. Having done that, in a fresh python3.9 venv python setup.py install fails with some compilation errors. pip install mercury succeeds and brings in the dependencies, and I can then then pip uninstall mercury and put my version in with python setup.py install. If I run this in a checkout of mercury-deploy-demo, then selecting the hello-world notebook, I see the "Hello Piotr!" message. If I change the text in the widget and submit, then I see on the websocket that the new value is transmitted, and the expected output is received back by the webpage, but the cells contents remain unchanged.

It would be nice to be able to build this locally with some changes, as I'd rather like to replace the ugly hacky code I wrote to do something very similar before I found this.

[adam-antonik]

I don't really know what I'm doing with javascript, but putting in logging shows that setNotebookSrc does indeed get called. For some reason this however isn't triggering the selector used in the component that displays the source

[pplonski]

Hi @adam-antonik,

Apologize for late response, I was on holidays.

I'm using node 14.17.0 to build frontend. Steps to build frontend:

1. rm -rf mercury/frontend-dist - remove frontend build from backend directory
2. cd frontend
3. yarn install
4. yarn local-build - this command build frontend and copy files to backend directory.

We need to copy files to backend directory because when you run mercury locally Django (backend) is serving files.

You can also start frontend as standalone app, with yarn start and in second terminal you can run backend. Please let me know if it works for you.