Where is the this react libraries / package included in the Wger ?

[kris-gs]

Hello Guys,

I was building an application extension using React and I am trying to figure out where are these libraries used in the original "https://github.com/wger-project/wger". The is this under under the "https://github.com/wger-project/react" that states "This repository contains the React components for the wger app. Note that this React app is not supposed to be used by itself, but rather as a library that is used in wger."

I am trying to leverage the React app I have already built and wondering how to incorporate them into the "https://github.com/wger-project/wger" section.

I don't see the React src files anywhere under the "https://github.com/wger-project/wger" but it indeed renders the React frontend. If someone could point me in the right direction that would be great!

Cheers!

[rolandgeider]

hi! some of the UI in the wger repo is rendered using react, others directly with django. The current setup is that you develop the new react components in the react repo and then build them and copy them over to the static files (wger/core/static/react) in the other one. Depending on whether you want to render a complete page or only a certain div, you'll also need to set some appropriate div-IDs and so.

[rolandgeider]

if you just want to develop for react, you don't need to copy everything over, you can just do a yarn start and do your thing there! (and depending on what you want to do, you don't even need a local instance, the test server might be enough). Also the exercises are saved to the db, but due to caching the changes don't appear immediately.

In general, the workflow is

• work on something on the react repo till you are happy with the results
• run yarn build (this assumes that the checkout for the wger repo is called server, I really should just rename it already) and see if everything works
• commit the changes in the django app

I would like to remove the manual build step and do something with github actions or so (making a package or something like that, not sure yet) but haven't found the time yet

That being said, usually that is all you need to do but if there is a component that will be rendered into a specific div, you will need to edit src/index.tsx or add the appropriate ids to the django side (e.g. wger/core/templates/index.html).

[kris-gs]

Thank you, Roland! I really appreciate your guidance and efforts. I tried running yarn start and encountered some errors, but I understand your point. My initial question was aimed at understanding how the React frontend is rendered within the original wger project. Interestingly, I can view the React frontend just by using this package without using the wger/react and I am not running yarn start. All I'm doing is running "python manage.py runserver", and I can access the frontend (which seems to render React) at localhost:8000.

For extending the React-based frontend, I gather that your suggestion is to build the necessary extensions or modifications in the React repository, start yarn, and use the original wger project as the server-side backend. I hope I’ve understood this correctly! Thanks so much for your help!

[rolandgeider]

yeah, it's not obvious 😅

if you poke around in the django code, you will see that some urls are ReactViews, this basically just renders an empty page and gives the main div an ID. React then just renders itself there, either based on the URL or on that ID. (also for the protocol, I don't know if this is really best practices when you just want to sprinkle some interactivity on an existing web app, there might be a better solution)

For extending the React-based frontend, I gather that your suggestion is to build the necessary extensions or modifications in the React repository, start yarn, and use the original wger project as the server-side backend. I hope I’ve understood this correctly! Thanks so much for your help!

exactly! (or use the test server if you don't want to setup a local instence: https://wger-master.rge.uber.space - 31e2ea0322c07b9df583a9b6d1e794f7139e78d4)

[kris-gs]

Thanks mate, I am still trying to figure a things! The react doesn't seem to render the same page as the original Wger. Would you happen to know why? #1008

[rolandgeider]

just answered in the issue, we're getting there! (and sorry this isn't as straight forward as it could be)