DOCSEARCHbyAlgolia
Submit Docs

Doppio

repository·master·Indexed 43 days ago

https://github.com/nagariahussain/doppio

A Frappe app that simplifies the setup and management of Single Page Applications (SPAs) and custom desk pages. It provides CLI tools to scaffold Vue 3 or React projects using Vite, pre-configured with Frappe backend connectivity, proxy options, and support for TailwindCSS and TypeScript. Key commands include `bench add-spa` for creating SPAs, `bench add-desk-page` for custom desk pages, and `bench add-frappe-ui` for adding Frappe UI starter projects.

Tokens
5.6K
Snippets
26
Records
27
Agent score
57%

What's inside Doppio

  1. Build your SPA for production

    master

    To build your application for production, navigate to your SPA directory and run the build command. The resulting build files will be placed in the www directory of your Frappe app.

    Integration with bench build: If you want the standard bench build command to trigger your SPA build, add the following scripts to your Frappe app's root package.json file:

    "dev": "cd <your-spa-folder> && yarn dev",
"build": "cd <your-spa-folder> && yarn build"
    cd <your-spa-name> && yarn build

  2. Set up a React or Vue 3 SPA

    master

    You can scaffold a new Single Page Application (SPA) using the bench add-spa command. This command automates the creation of a Vite-based project, configures routing, sets up backend connectivity, and updates your app's hooks.py to handle routing via website_route_rules.

    Options:

    • --app <app-name>: The name of your custom Frappe app.
    • --tailwindcss: Optionally installs and configures TailwindCSS.
    • --typescript: Optionally configures the project to use TypeScript.

    Interactive Mode: Running bench add-spa without arguments will trigger an interactive prompt to enter the SPA name (which determines the directory and URI path), select a framework (React or Vue), and choose between TypeScript or JavaScript.

    # Using flags
bench add-spa --app <app-name> [--tailwindcss] [--typescript]

# Using interactive prompts
bench add-spa

  4. Create custom Desk Pages

    master

    To set up custom desk pages powered by Vue 3 or React, use the add-desk-page command. This command will prompt you to select your preferred framework and automates the entire setup process. Once complete, the page will automatically open in your browser.

    Note: You must restart your bench to enable auto-reload for file changes in your custom app.

    bench --site <site-name> add-desk-page --app <app-name>

  5. Develop your SPA locally

    master

    After setting up your SPA, navigate into the generated SPA directory and start the development server. By default, the server runs on port 8080 (or the next available port). You can access the application at <site>:8080.

    cd <your-spa-name>
yarn dev

  7. SPA Framework Options: Vue vs React

    master

    The generator supports two primary frontend frameworks. The configuration differs slightly for each:

    Vue

    • Templates: Uses vue or vue-ts.
    • Dependencies: Automatically installs vue-router@^4 and socket.io-client@^4.5.1.
    • File Structure: Creates src/views/ containing Home.vue and Login.vue, and sets up a router directory (src/router/) with index.js and auth.js.

    React

    • Templates: Uses react or react-ts.
    • Dependencies: Automatically installs frappe-react-sdk.
    • File Structure: Creates src/App.tsx (or .jsx) using the React boilerplate.

  8. Vue 3 SPA Boilerplate Structure

    master

    When scaffolding a Vue 3 Single Page Application (SPA) with Doppio, the project uses several key boilerplates to establish the architecture:

    • App Entrypoint (App.vue): Uses $auth via injection to handle logout and provides a <router-view /> for navigation.
    • Resource Management: Components can define a resources object to declare backend method calls. For example, a ping resource calls frappe.ping on the backend.
    • Authentication: A Login.vue component is provided that uses $auth.login(email, password) and handles route redirection via query parameters.
    • Routing: Uses vue-router with a beforeEach guard that checks for authentication status based on the route's meta.isLoginPage property.
    // Example of defining a resource in a Vue component
export default {
  resources: {
    ping() {
      return {
        method: "frappe.ping",
        onSuccess(d) {
          alert(d);
        },
      };
    },
  },
};

  9. React SPA Boilerplate Structure

    master

    For React-based SPAs, Doppio scaffolds a project using Vite and the frappe-react-sdk. The core App component is wrapped in a FrappeProvider to enable seamless integration with the Frappe backend.

    import { FrappeProvider } from 'frappe-react-sdk'

function App() {
  return (
    <div className="App">
      <FrappeProvider>
        {/* Your App Content */}
      </FrappeProvider>
    </div>
  )
}

  10. Configure Tailwind CSS in a generated SPA

    master

    If Tailwind CSS is enabled during the SPA generation process, the generator performs the following setup:

    1. Installs Dependencies: Installs tailwindcss@^3.4, postcss@latest, and autoprefixer@latest via npm.
    2. Initializes Config: Runs npx tailwindcss init -p to create tailwind.config.js (or .ts) and postcss.config.js.
    3. Configures Content Paths: Automatically updates the content array in tailwind.config.js/ts to include all relevant frontend files: content: ["./src/**/*.{html,jsx,tsx,vue,js,ts}"]
    4. Sets up CSS: Creates src/index.css with the standard Tailwind directives:
      @tailwind base;
@tailwind components;
@tailwind utilities;
    5. Links CSS: Automatically adds import './index.css'; to the project's entry point (main.js or main.ts).
    npm install -D tailwindcss@^3.4 postcss@latest autoprefixer@latest
npx tailwindcss init -p

  11. Generate a Single Page Application (SPA)

    master

    The SPAGenerator logic (used via the CLI) scaffolds a modern frontend application (Vue or React) within a Frappe app directory. It automates the creation of a Vite-based project, configures proxy options for backend communication, sets up routing, and integrates CSRF protection for Frappe.

    When a new SPA is generated, the following happens:

    1. Vite Scaffolding: Creates a project using yarn create vite with either vue/react or vue-ts/react-ts templates.
    2. Dependency Installation: Automatically installs necessary packages like vue-router, frappe-react-sdk, or socket.io-client.
    3. Frappe Integration:
      • Creates a www directory and a corresponding Python context file in the app.
      • Injects a CSRF token script into index.html to allow secure communication with the Frappe backend.
      • Adds the new SPA commands to the root package.json.
      • Configures routing rules in the app's hooks.
    4. Development Server: After generation, you can start the development server by running: cd <spa_name> && npm run dev
    cd <spa_name> && npm run dev