{"id":14449358,"url":"https://github.com/NagariaHussain/doppio","last_synced_at":"2025-08-28T03:31:39.644Z","repository":{"id":37765427,"uuid":"387125427","full_name":"NagariaHussain/doppio","owner":"NagariaHussain","description":"A Frappe app (CLI) to magically setup single page applications and Vue/React powered desk pages on your custom Frappe apps.","archived":false,"fork":false,"pushed_at":"2025-08-15T06:53:43.000Z","size":214,"stargazers_count":271,"open_issues_count":10,"forks_count":110,"subscribers_count":9,"default_branch":"master","last_synced_at":"2025-08-15T08:32:06.995Z","etag":null,"topics":["frappe","frappe-framework","python","react","reactjs","spa","tailwindcss","vitejs","vue","vuejs"],"latest_commit_sha":null,"homepage":"","language":"Python","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/NagariaHussain.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"license.txt","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null}},"created_at":"2021-07-18T08:17:35.000Z","updated_at":"2025-08-15T08:00:15.000Z","dependencies_parsed_at":"2023-02-08T05:17:03.567Z","dependency_job_id":"d5aa5aa5-6f8f-43e7-86c6-e7679f8d70ff","html_url":"https://github.com/NagariaHussain/doppio","commit_stats":{"total_commits":102,"total_committers":4,"mean_commits":25.5,"dds":0.07843137254901966,"last_synced_commit":"74553e578ba6467512008d67bece82de34324471"},"previous_names":[],"tags_count":18,"template":false,"template_full_name":null,"purl":"pkg:github/NagariaHussain/doppio","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NagariaHussain%2Fdoppio","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NagariaHussain%2Fdoppio/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NagariaHussain%2Fdoppio/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NagariaHussain%2Fdoppio/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/NagariaHussain","download_url":"https://codeload.github.com/NagariaHussain/doppio/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/NagariaHussain%2Fdoppio/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":272430581,"owners_count":24933890,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","status":"online","status_checked_at":"2025-08-28T02:00:10.768Z","response_time":74,"last_error":null,"robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":true,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["frappe","frappe-framework","python","react","reactjs","spa","tailwindcss","vitejs","vue","vuejs"],"created_at":"2024-09-01T08:01:15.039Z","updated_at":"2025-08-28T03:31:39.403Z","avatar_url":"https://github.com/NagariaHussain.png","language":"Python","funding_links":[],"categories":["Uncategorized"],"sub_categories":["Uncategorized"],"readme":"# Doppio\n\nA Frappe App to setup and manage single page applications and custom desk pages (using Vue 3 or React) on your custom Frappe App.\n\n## Installation\n\nIn your bench directory:\n\n```bash\nbench get-app https://github.com/NagariaHussain/doppio\n```\n\nThis will install the `Doppio` frappe app on your bench and enable some custom bench CLI commands\nthat will ease the process of attaching a SPA to your Frappe Application.\n\n## Setting Up React/Vue SPA\n\nTo set up a new Single Page Application, you can run the following command in your bench directory:\n\n```bash\nbench add-spa --app \u003capp-name\u003e [--tailwindcss] [--typescript]\n\n# or just, and answer the prompts\nbench add-spa\n```\n\nYou 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`.\n\nYou will then be asked to select the framework you prefer: React or Vue.\n\nYou can also select whether you want to use Typescript or Javascript.\n\nYou can optionally pass the `--tailwindcss` flag which will also setup tailwindCSS (who doesn't like tailwind!) along with the Vue 3/React application.\n\nThe above command will do the following things:\n\n### For Vue 3\n\n1. Scaffold a new Vue 3 starter application (using [Vite](https://vitejs.dev/))\n\n2. Add and configure Vue router\n\n3. Link utility and controller files to make the connection with Frappe backend a breeze!\n\n4. 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).\n\n5. Optionally, installs and set up tailwindCSS.\n\n6. Update the `website_route_rules` hook (in `hooks.py` of your app) to handle the routing of this SPA.\n\n### For React\n\n1. Scaffold a new React starter application (using [Vite](https://vitejs.dev/))\n\n2. Add and configure [frappe-react-sdk](https://github.com/nikkothari22/frappe-react-sdk) to make the connection with Frappe backend a breeze!\n\n3. 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).\n\n4. Optionally, installs and set up tailwindCSS.\n\n5. Update the `website_route_rules` hook (in `hooks.py` of your app) to handle the routing of this SPA.\n\nOnce the setup is complete, you can `cd` into the SPA directory of your app (e.g. `dashboard`) and run:\n\n```bash\nyarn dev\n```\n\nThis 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: `\u003csite\u003e:8080`.\n\n## Adding FrappeUI\n\nIf you want to add a [frappe-ui](https://github.com/frappe/frappe-ui) starter project to your custom app, you can do that using just a single command:\n\n```bash\nbench add-frappe-ui\n```\n\n## Creating Desk Pages\n\nIf you want to setup Vue 3 or React powered custom desk pages, you can do that with just a single command:\n\n```bash\nbench --site \u003csite-name\u003e add-desk-page --app \u003capp-name\u003e\n```\n\nFollow the prompt to select the framework of your choice and **everything will be setup for you auto-magically**! Once the setup is done, the page will be opened up in the browser.\n\n\u003e Note: Restart your bench to get auto-reload on file changes for your custom app\n\n## Building for Production\n\nThe below command builds the application and places it in the `www` directory of your frappe app:\n\n```bash\ncd \u003cyour-spa-name\u003e \u0026\u0026 yarn build\n```\n\nCheck the `package.json` file inside the Vue application directory to learn more about the dev server / build steps.\n\nIf you already have a package.json file with scripts in your app's root directory, you can add the following two scripts to your app's package.json file in order for the `bench build` command to work as expected:\n\n```json\n\"dev\": \"cd \u003cyour-spa-folder\u003e \u0026\u0026 yarn dev\",\n\"build\": \"cd \u003cyour-spa-folder\u003e \u0026\u0026 yarn build\"\n```\n\n### License\n\n[MIT](./license.txt)\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNagariaHussain%2Fdoppio","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FNagariaHussain%2Fdoppio","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FNagariaHussain%2Fdoppio/lists"}