A Frappe app to magically setup single page applications on your custom Frappe apps.

When i try to create an app using add-spa command: bench add-spa --app <app-name> [--tailwindcss]

it is throwing the below error: bash: app-name: No such file or directory

When I check bench commands by running: bench --help

it did show the that add-spa command under framework commands list:

Framework commands: add-spa add-system-manager Add a new system manager to a site add-to-email-queue Add an email to the Email Queue add-to-hosts Add site to hosts backup Backup

Hey @NagariaHussain ,

I am planning to create a similar Frappe app to setup a React SPA with Frappe. Should I contribute to this repository or would you recommend creating a new project (Frappe app) for React?

I have created a doppio react app for a shopping cart that is support to list items on the /shop page.

I tried loading the items using a React useEffect hook, it didn't work.

Ps: Nothing works on the useEffect Hook: alert, console.log etc.

@NagariaHussain @nikkothari22

Traceback (most recent call last): File "/home/frappe/frappe-bench/apps/frappe/frappe/utils/bench_helper.py", line 68, in get_app_commands app_command_module = importlib.import_module(app + '.commands') File "/home/frappe/frappe-bench/env/lib/python3.5/importlib/init.py", line 126, in import_module return _bootstrap._gcd_import(name[level:], package, level) File "", line 986, in _gcd_import File "", line 969, in _find_and_load File "", line 958, in _find_and_load_unlocked File "", line 673, in _load_unlocked File "", line 665, in exec_module File "", line 222, in _call_with_frames_removed File "/home/frappe/frappe-bench/apps/doppio/doppio/commands/init.py", line 2, in from .spa_generator import SPAGenerator File "/home/frappe/frappe-bench/apps/doppio/doppio/commands/spa_generator.py", line 17 self.spa_path: Path = self.app_path / self.spa_name ^ SyntaxError: invalid syntax

Hi Hussain,

I know my issue isn't directly related to this project, but I tried setting up a SPA with React + Vite - by looking at your Vue + Vite example. Thank you!

I am able to run the React app, both on production (after bench update --build) as well as in live reload (yarn dev). However, my API calls to the backend encounter the CSRF Token Error while live reloading. The API calls work after building the application and serving it using bench start. I assume this is because the build files are generated when I run bench update --build and the Python context adds the CSRF token.

How do I make this work in live reload since that's critical to a great developer experience?

Thank you!

I've created a SPA and it runs on the dev environment, but doesn't render anything on the browser /path when I yarn build

I don't know what I might have missed.

I have added support for React in the Doppio CLI.

Major changes and tasks:

• [x] Add option to select framework while setting up SPA
• [x] Split logic for Vue and React. Some file changes (e.g. proxy options, CSRF) were common.
• [x] Add frappe-react-sdk for React apps in package.json. This will provide hooks for auth. database, search, file management, API calls and realtime listeners using Socket.io. Also ensure to initialise the library in App.jsx.
• [x] Update documentation

I have also added a prompt for the app name - in case users do not specify it in the initial command.

Closes #7

next i installed it in my frappe bench site, i run de command bench add-spa --app , but console show that add-spa is not a command, but when i run bench --help, add-spa is show in commands list.

run in a docker container running debian:buster-slim as image

Bumps vite from 2.6.14 to 2.9.13.

Dependabot will resolve any conflicts with this PR as long as you don't alter it yourself. You can also trigger a rebase manually by commenting @dependabot rebase.

The default Vite configuration adds "type": "module" to package.json. Refer here

This causes an error while starting the live server because proxyOptions is exported

One possible solution is to remove "type": "module" from package.json. Or we could export proxyOptions in a cjs file or as a standard export.

Hello, I have created a React SPA within an app, and the website_route_rules are automatically set up in hooks as follows.:

-Frappe app name: haulster -SPA name : frontend

-website_route_rules = [{'from_route': '/frontend/<path:app_path>', 'to_route': 'frontend'}]

-react-router-dom routes:

          <Routes>
            <Route path="/" exact element ={<Trip/>}/>
            <Route path="/fuel" exact element ={<FuelRequest/>}/>
            <Route path="/maintenance" exact element ={<MaintenanceRequest/>}/>
          </Routes>
        </Router>```

-Problem: None of those routes are being rendered on production that is returning a blank page. Yet in developer mode (```localhost```)  the pages are being rendered.


![prod_environment](https://user-images.githubusercontent.com/12731579/209992337-9d12d0a4-1d16-4352-ad62-8b6e08aa5119.png)
![dev_environment](https://user-images.githubusercontent.com/12731579/209992354-0fbeb277-dedd-46fb-8ab6-0decc1077164.png)

We can add an option to use the Typescript starter templates for Vue or React (vue-ts/react-ts). We would have to make some changes to boilerplates and file names for this.

• [ ] Add flag for Typescript in CLI options
• [ ] Initialise Vite with vue-ts and react-ts templates if TS selected.
• [ ] For Vue - main.js will be main.ts in link_controller_files. (If TS selected)
• [ ] For React - App.jsx will be App.tsx in create_react_files. (If TS selected)
• [ ] vite.config.js will be vite.config.ts
• [ ] Update documentation