Deploy multiple apps in separate folders and customized landing page

[wang-boyu]

Hi! I'm interested in how this page in Solara docs is deployed: https://solara.dev/documentation/examples. I can see that source code of apps are in different folders, with some fullscreen examples being redirected to another folder: https://github.com/widgetti/solara/tree/master/solara/website/pages/documentation/examples

I'm thinking to build something similar, in that our apps are in different subfolders as well:

.
├── category_1
│   ├── app_1.py
│   ├── app_2.py
│   ├── ...
├── category_2
│   ├── app_3.py
│   ├── app_4.py
│   ├── ...
├── ...

with a landing page similar to https://solara.dev/documentation/examples, where apps from the same category/subfolder are placed together with images linking to their urls.

I looked at https://solara.dev/documentation/getting_started/deploying/self-hosted but couldn't figure out how it was done. Is there any steps to reproduce or deploy your examples locally for me to start with?

[iisakkirotko]

Hey @wang-boyu!

The solara.dev website is included in this repo (and thus also the package), so you can run it with

solara run solara.website.pages

For how to replicate this on your own apps - you probably want to take a look at the Gallery component that we use to make the examples page. You can find the component here. For a bit of background, we do the routing based on modules, meaning that when you look at the examples page of our website, first the module examples is ran (that is, the __init__.py of that folder), then Solara picks up the Page component of that module, and renders it. The Page component actually gets injected as the children of the Layout component of the module, as will any Page / Layout components of child modules when viewing them.

Let me know if you have any other questions!

[wang-boyu]

Thanks for the detailed response! I'll take a look at the Gallery component.