How to use Quokka.js within a Razzle project?

[silviubogan]

Issue description or question

Is this issue related to Quokka not outputting the expected results of your code?: No

Sample code

N/A

Steps to reproduce

1. docker pull plone && docker run -it --rm --name=plone2.1 -p 8080:8080 -e SITE=Plone -e ADDONS="kitconcept.volto eea.schema.slate" -e VERSIONS="plone.schema=1.3.0" -e ZCML="kitconcept.volto.cors" -e PROFILES="kitconcept.volto:default-homepage" plone
2. Then, in parallel, run npm install -g yo @plone/generator-volto
3. yo @plone/volto my-volto-project --addon volto-slate:asDefault
4. cd my-volto-project
5. Add the following to file mrs.developer.json directly inside my-volto-project directory:

   {
   "volto-slate": {
       "url": "https://github.com/eea/volto-slate.git",
       "package": "volto-slate",
       "branch": "develop",
       "path": "src"
   }
   }

6. Run yarn develop
7. In file src/addons/volto-slate/src/index.js put, after line 23, alert('!!!');
8. Wait until yarn start process recompiles
9. Open in the browser http://localhost:3000/
10. See the alert window showing up in the browser on page load
11. Open directory my-volto-project in VS Code
12. Open command palette with Ctrl+Shift+P then select >Quokka.js: Select Workspace Folder
13. The command does not work

Sample repository link

https://github.com/eea/volto-slate

It is a Volto addon. Volto is a Razzle project. Razzle usually uses 2 WebPack processes for client and server.

I would like to know if you plan on supporting this use case. It would help me a lot and I would like to buy your product.

Quokka.js Console Output

N/A

Code editor version

VS Code

Version: 1.62.3 Commit: ccbaa2d27e38e5afa3e5c21c1c7bef4657064247 Date: 2021-11-17T08:00:36.721Z Electron: 13.5.2 Chrome: 91.0.4472.164 Node.js: 14.16.0 V8: 9.1.269.39-electron.0 OS: Linux x64 5.14.18-1-MANJARO snap

OS name and version

Manjaro Linux with latest updates

Thank you for your great product.

[smcenlly]

We're not familiar with razzle, but looking at their website, it seem it expects you to run the files using a web browser and connecting to localhost? Is that right?

Quokka runs your code in node.js and can emulate a browser environment using jsdom. You may read more about how it works here.

If we're missing something and it's possible to compile/run your razzle project code in node.js, could you please provide us with some steps for how to do this with your sample repo and we will re-open the issue.