Skip to content

Conversation

@ruchamahabal
Copy link
Member

@ruchamahabal ruchamahabal commented Mar 6, 2025

Before

Both the app builder & app renderer were separate Vue app instances using the same index.html file as entry point.
These were the base routes:
app builder → /studio
renderer → /studio-app

Tough to switch routes within the app

During dynamic route addition in the rendered vue app - we had to add the complete routes as /<app-route>/<page-route>. This made navigation from one page to another hard. Technically only page route should be added to the router

Ugly frontend:

prefix prefix-route

Ugly backend:

backend-1 backend-2

After

Cleaner app routes

prefix-after-1

Cleaner page routes

after-prefix image

App loads without any prefix

image

How

  • StudioApp now extends WebsiteGenerator
  • Added a custom page renderer - StudioAppRenderer that checks if the visited path matches any app route and renders the website generator template
  • Vite config: 2 inputs - index.html for studio app builder/editor another for renderer
    image
  • Additional build step to copy the built renderer.html file to the generators directory so that frappe can serve it an any dynamic route
    image

Fixes

  • Fixed duplicate page insertion on app creation
  • Removed font assets folder - referencing it from frappe-ui
  • Cleaned up some list views in desk

PS: There are other ways to do this in Vite documentation - https://vite.dev/guide/backend-integration. But that also requires manifest file, implementation of importedChunks and substituting these asset and CSS urls in the html from the backend. The current way is simpler. Will revisit this if needed later on.

One caveat: When I start development, if I make some changes in renderer code, I need atleast 1 build to copy the output to generators. Then the HMR will work fine due to the absolute URL reference to.ts file in dev mode. But nothing changes for people building apps on studio.

Closes #20

@ruchamahabal ruchamahabal changed the title feat: Eliminate /studio-app prefix in app renderer feat: Eliminate /studio-app prefix in app renderer Mar 6, 2025
- Redirect to the same route to trigger re-evaluation with new routes
- onActivated & watcher both were trying to insert a page asynchronously
- renderer is accessible on the webserver port due to WebsiteGenerator, pass this base URL in page context
… the entry point

- as recommended in https://vite.dev/guide/backend-integration

- this also skips the build step to copy app renderer entry and makes the renderer somewhat faster
…uter

- handle leading slash in page options - so that user doesn't have to type it for every route
…er.ts as the entry point"

This reverts commit eb89e79.
Backend integration with vite also requires a manifest file & custom implementation for importedChunks which seems more complex at the moment: https://vite.dev/guide/backend-integration
@ruchamahabal ruchamahabal merged commit a1c8d62 into frappe:develop Mar 15, 2025
1 check passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Figure out rendering again

1 participant