Getting Started ​

This page will help you with setting up frappe-ui in a new project as well as an existing Frappe project.

Quick start ​

You can quickly set up frappe-ui with npm create frappe-ui. If you already have a Frappe app for which you want to build a frontend, start with Step 2. The initializer requires Node.js 20.19 or newer, or Node.js 22.12 or newer.

Create your Frappe app ​

bench new-app todo

Setup frappe-ui ​

cd apps/todo
# this will setup a vue project with frappe-ui set up
# inside the frontend directory
npm create frappe-ui@latest frontend

Choose yes when prompted to configure the project with a Frappe backend. The starter will ask for the frontend base route and configure Vite, Vue Router, and the Frappe proxy/build plugin for that route. Frappe-backed projects must be created inside apps/<appname>/<folder>.

Ignore_csrf config ​

bench --site todo.test set-config 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.

Start dev server ​

cd frontend
npm install
npm run dev

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.