Run in development

Hi, I’m new to Pydio, and I’m trying to run the project and develop on the UI.

But I cannot run it. Does anybody have experience developing on the frontend?

I could not understand how the project runs and does it has HMR ?

because once I tried with ./cell start it has not hmr

Hello @rezaser74 and welcome to the forum

Good luck with this: the front end is a React client that is quite complex.
Maybe if you could explain what you are trying to do we could give you some hints

Thanks for the reply. For example, I want to make UI RTL or install another system design like Ant Design, and add Arabic language to it.
I see too many files and assets in here, and it is too complex for me :smile:

but i want contribute on it

Hi @rezaser74 :waving_hand:

You could certainly design your own UI and call (almost) everything via the Cells REST API :slight_smile: — but this would be a tremendous amount of work (essentially replicating all the functionality of the React client, but using your own preferred framework).

The listed Cells API is for the currently stable version, 4 (version 5 is under development and may have a slightly different API…).

But you can certainly start with some basic things, calling the main functionality you need for your purposes, and slowly work your way adding further features… it’s a long API :slight_smile:

Yes, many individuals who are visiting Pydio for the first time are confused by this.

Briefly put,./cells start is not a front-end development server. There is no HMR, no hot reload, and nothing dynamic it just executes the built React bundle that comes with Cells. That is the intended behavior.

Built in advance and integrated into Cells, the user interface (UI) is a stand-alone React application that resides in the frontend/packages. You must run the frontend tooling directly, not the Go binary, if you want the full frontend development flow.

About how it works in real life:

You set up deps and node/yarn.

Go into the appropriate frontend package (it seems overwhelming since there are numerous).

launch the webpack development build there.

proxy API requests to the active Cells backend

Although it’s not a “swap theme” scenario, RTL + Ant Design is feasible. With many internal components, style presumptions, and layout logic that is LTR by default, the React client is highly customized. Routing, flex layouts, iconography, and possibly a few unexpected things will all be impacted by RTL. Since there is already an i18n layer, Arabic i18n is simpler, but careful wiring is still required.

To be honest, if you want to contribute, start very modest. Select one screen, comprehend its data flow (state, Redux, and API calls), and disregard the others. The file sprawl begins to make sense until you see how one module fits together.

In summary, frontend is strong but not beginner-friendly, Pydio UI development is a marathon, not a weekend tweak, and there is no HMR via cells start. However, there is HMR via the React dev stack.

1 Like

Just for info,

our front end developers are using hot reload when they are working on cells,
But it’s not totally straight forward to configure.

And as Maria said, tweaking to full UI to fully support RTL is a little bit more than a week-end tweak, but good luck with it :innocent: