#BuildWithHussain Frappe UI

1

Coming from #buildwithhussain YouTube video #1, I would love to use what’s in the video to build my first front end.

But I’m not sure if I can do the following. Would someone be kind enough to share your thoughts?

Basically I use a tool to build 5 HTML/CSS/JS theme pages. Each user has a custom field in User DocType holding the theme number, and more custom fields holding various data to be presented on a theme page, using JS to populate the DOM.

I want the front end to look up this theme number, and then display the right theme page.

Each user has his own subdomain URL. I can proxy it from front end nginx though.

Or am I better off with web pages? Web Page

Idea sounds simple, but I’m not sure how to handle this entry point which I need to pass some form of data so that the user can be identified.

1 Like
2

So, you can go with one of the below two approaches:

  1. Server rendered with www/dynamic pages. You can use the context in the HTML jinja template to load CSS/JavaScript or render HTML based on the logged in user. Single HTML file, but dynamic based on the session user. Here is a snippet of how it might look like:
<body>
{% if frappe.session.user == "hussain@frappe.io" %}
    <!-- Some HTML -->
{% elif frappe.session.user in ["faris@frappe.io", "rushabh@frappe.io"] %}
    <!-- Some other HTML -->
{% else %}
    <!-- Yet some other HTML -->
{% endif %}
</body>

You can even load other HTML template on this page using:

{% include "frappe/templates/discussions/button.html" %}

Combine if/else with load content and your problem is solved.

  1. The SPA approach. Here you can use a VueJS/FrappeUI frontend, but instead of rendering conditionally on the backend using Jinja, you render on the frontend based on the session user. You can fetch data based on the user, you can apply styles based on the logged in user, etc. Here you can use other modern frontend features like client-side routing, reactive state etc.

Ultimately, its your call. But if you are only to use vanilla HTML/CSS/JavaScript, I would suggest to go with 1.

Hope this answer help!

:v:t3:

3 Likes