https://github.com/NagariaHussain/doppio_frappeui_starter

A Vite + Vue 3 + TailwindCSS + Frappe UI starter template for building frontends for Frappe Apps
https://github.com/NagariaHussain/doppio_frappeui_starter

Last synced: 2 months ago
JSON representation

A Vite + Vue 3 + TailwindCSS + Frappe UI starter template for building frontends for Frappe Apps

• Host: GitHub
• URL: https://github.com/NagariaHussain/doppio_frappeui_starter
• Owner: NagariaHussain
• Fork: true (netchampfaris/frappe-ui-starter)
• Created: 2022-01-18T11:45:29.000Z (almost 3 years ago)
• Default Branch: main
• Last Pushed: 2024-05-12T08:42:28.000Z (6 months ago)
• Last Synced: 2024-05-15T20:07:58.214Z (6 months ago)
• Language: CSS
• Size: 5.04 MB
• Stars: 10
• Watchers: 0
• Forks: 7
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

• awesome-frappe - Doppio FrappeUI Starter - A Vite + Vue 3 + TailwindCSS + Frappe UI starter template for building frontends for Frappe Apps. (Uncategorized / Uncategorized)

README

        
# Frappe UI Starter

This template should help get you started developing custom frontend for Frappe

apps with Vue 3 and the Frappe UI package.

![Auth](https://user-images.githubusercontent.com/34810212/236846289-ac31c292-81ea-4456-be65-95773a4049be.png)

![Home](https://user-images.githubusercontent.com/34810212/236846299-fd534e2b-1c06-4f01-a4f2-91a27547cd55.png)

This boilerplate sets up Vue 3, Vue Router, TailwindCSS, and Frappe UI out of

the box. It also has basic authentication frontend.

## Docs

[Frappe UI Website](https://frappeui.com)

## Usage

This template is meant to be cloned inside an existing Frappe App. Assuming your

apps name is `todo`. Clone this template in the root folder of your app using `degit`.

```

cd apps/todo

npx degit NagariaHussain/doppio_frappeui_starter frontend

cd frontend

yarn

yarn dev

```

In a development environment, you need to put the below key-value pair in your `site_config.json` file:

```

"ignore_csrf": 1

```

This will prevent `CSRFToken` errors while using the vite dev server. In production environment, the `csrf_token` is attached to the `window` object in `index.html` for you.

The Vite dev server will start on the port `8080`. This can be changed from `vite.config.js`.

The development server is configured to proxy your frappe app (usually running on port `8000`). If you have a site named `todo.test`, open `http://todo.test:8080` in your browser. If you see a button named "Click to send 'ping' request", congratulations!

If you notice the browser URL is `/frontend`, this is the base URL where your frontend app will run in production.

To change this, open `src/router.js` and change the base URL passed to `createWebHistory`.

## Resources

- [Vue 3](https://v3.vuejs.org/guide/introduction.html)

- [Vue Router](https://next.router.vuejs.org/guide/)

- [Frappe UI](https://github.com/frappe/frappe-ui)

- [TailwindCSS](https://tailwindcss.com/docs/utility-first)

- [Vite](https://vitejs.dev/guide/)