Deploying Frappe UI Frontend on Self-Hosted Server

Frappe Framework App Development
, , ,
1

I have a self-hosted production Frappe server with several webpages created through the desk. Recently, I developed a new app, installed it on my site, and set up the Frappe UI in the app using the command npx degit netchampfaris/frappe-ui-starter frontend.

I initiated the frontend with yarn dev --host and altered the common_site_config.json to "webserver_port": 80 since the backend is operational on port 80, and I can successfully ping the backend from the frontend. Both the frontend and backend are hosted on the same server, but the frontend development is running on port 8080/frontend.

Now, I am facing a challenge with deploying the Frappe frontend on the same server. After running yarn build, I need guidance on where to relocate these files to serve as the primary frontend of my application, replacing the webpages created from the desk.

2

@netchampfaris @buildwithhussain Hello, if anyone could provide a reply on this topic, it would be greatly appreciated as I am stuck and a response would be helpful.

3

HI @snm:

Restore your common_site_config.json

Use bench build and your application should be served by default in yoursite/frontend

Hope this helps.

1 Like
4

Hi @avc,

Thank you for the reply. I reverted the changes in the common_site_config.json, ran the yarn build in the app’s frontend folder, and then executed the bench build command. However, when I navigate to https://domainname/frontend, I get a 404 page not found error, I did the same in my local environment still the same.

I hope there will be some documentation on how to deploy the frappe UI frontend in production apps.

5

Could you please share youreexperience with Frappe UI? I already have several custom Pages in my custom app and I want to see if it’s worth the change

6

Hi @ahassoun:

Yes, I used FrappeUI on some projects and it’s really powerful.

7

Hi @snm:

Probably some missconfiguration on Vite config, router.js or something like this.

I’d strongly recommend this:

It will build magically your Vue (or React) app structure.
It’s pretty easy.

Hope this helps.

8

I followed these step but i can’t see the frappeui desk page
sitename/dashboard works in the url but sitename/frontend does not work and its giving 404 error page.

my server is on production mode and its live server self-hosted.

9

Run yarn build in your app.

10

image

please see the screen-shot
when yarn build run the dashboard part is updated but frappe ui -frontend not show.

11

May I know your app name?