Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
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: about 1 month 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 (over 2 years ago)
- Default Branch: main
- Last Pushed: 2024-05-12T08:42:28.000Z (about 1 month ago)
- Last Synced: 2024-05-12T09:30:08.598Z (about 1 month ago)
- Language: CSS
- Size: 5.01 MB
- Stars: 10
- Watchers: 0
- Forks: 6
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Lists
- 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.
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/)