Setup
Using Doppio

Using Doppio

A Frappe app (CLI) to magically setup single page applications on your custom Frappe apps. Doppio helps to setup and manage single page applications (using Vue 3 or React) on any other custom Frappe App.

Check out Doppio (opens in a new tab) for more details.

Installation

In your bench directory:

bench get-app https://github.com/NagariaHussain/doppio

This will install the Doppio frappe app on your bench and enable some custom bench CLI commands that will ease the process of attaching a SPA to your Frappe Application.

Setting Up React/Vue SPA

To set up a new Single Page Application, you can run the following command in your bench directory:

bench add-spa --app <app-name> [--tailwindcss] [--typescript]
 
# or just, and answer the prompts
bench add-spa

You will be prompted to enter a name for your single page application, this will be the name of the directory and the URI path at which the application will be served. For instance, if you enter dashboard (default), then a folder named dashboard will be created inside your app's root directory and the application will be served at /dashboard.

You will then be asked to select the framework you prefer: React or Vue.

You can also select whether you want to use Typescript or Javascript.

You can optionally pass the --tailwindcss flag which will also setup tailwindCSS (who doesn't like tailwind!) along with the Vue 3/React application.

The above command will do the following things:

For React

  1. Scaffold a new React starter application (using Vite)
  2. Add and configure frappe-react-sdk to make the connection with Frappe backend a breeze!
  3. Configure Vite's proxy options (which will be helpful in development), check the proxyOptions.js file to see to what ports the Vite dev server proxies the requests (you frappe bench server).
  4. Optionally, installs and set up tailwindCSS.
  5. Update the website_route_rules hook (in hooks.py of your app) to handle the routing of this SPA.

Run your SPA (local development)

To run your SPA, you can run the following command in your bench directory:

bench start

Once the setup is complete, you can cd into the SPA directory of your app (e.g. dashboard) and run:

yarn dev

This will start a development server at port 8080 by default (any other port if this port's already in use). You can view the running application at: <site>:8080.

Setup your local development serverUsing TypeScript