Hi, I created a custom app with custom frontend using Vue and tailwind css stack. That code in in “frontend” folder in the custom frappe app. I installed the app into my site in frappe cloud. I can see the custom doctypes appearing in frappe desk. But, the custom frontend is not working.
Is it not a direct way for frappe bench to identify frontend code and serve it? Is there a good document on the best practice to host custom frontend for a custom app in frappe cloud?
Are you in docker or vm/bm?
Can you confirm you have built the app correctly?
Try: bench --site <YOUR_SITE> build --app <YOUR_APP>
(If you’re on a bare-metal deployment. For Docker, please check your build CI/container logs).
The reason you don’t see your frontend is likely because Frappe only serves files from its /assets/ or /www/ directories. If your Vue app is just sitting in a “frontend” folder, Frappe doesn’t know it exists yet. You need to “glue” them together.
You can refer to this for the exact workflow: https://www.youtube.com/watch?v=Ik-Y6zN3Bkw
In simple terms, you need to update your package.json to handle the hand-off:
-
Build the Vue app into the Frappe public folder:
“build”: “vite build --base=/assets/<APP_NAME>/frontend/” -
Copy the index.html to /www/ so it’s accessible via a URL:
“copy-html-entry”: “cp ../<APP_NAME>/public/frontend/index.html ../<APP_NAME>/www/frontend.html”
Once this is set up, running bench build will trigger your frontend build and place the files where Frappe expects them.
TL;DR;
If you plan to serve your custom FE as a Frappe page and want to support client-side routing (Vue Router), you should register a route rule in yourhooks.py
website_route_rules = [
{"from_route": "/<APP_NAME>/<path:app_path>", "to_route": "<ROUTE>"},
]