Skip to content

anjarabus/fastapi-react-electron-app

Repository files navigation

FastAPI-React Desktop App with ElectronJS

In this project, I use electronJS to build a simple desktop calculator app which has a React front-end and Python (FastAPI) back-end. The python back-end (script backend/backend.py and dependencies in requirements.txt) is bundled into a standalone executable using PyInstaller. This is a very powerful tool as it allows people who do not have python installed on their machines to use your app!

You can adapt this project to your own needs by modifying backend/backend.py and frontend/src/App.jsx and the relevant configuration files. For example, you can use this framework to convert an exisiting web application to a desktop application --- electron/main.js will spawn the python back-end, make a desktop window, and load frontend/public/index.html into the desktop window instead of a browser window.

Or...you can just have fun using my "Weasel Calculator" (and don't ask LOL)....

weasel_calculator.mov

Explanation of files:

   root/ 
      |-- backend/ 
          |-- backend.py           Python back-end script
          |-- api.spec           Configuration needed for PyInstaller
      |-- electron/
          |-- main.js           Entry-point for ElectronJS (makes desktop window) and FastAPI back-end (spawns python process)
          |-- preload.js   
          |-- resources/           Contains the app logo in .icns format for MacOS (change to .ico for Windows) 
      |-- frontend/
          |-- public/
              |-- index.html          Entry-point for React front-end in dev mode
               ...                Any images (svg) used in the front-end
          |-- src/
              |-- App.jsx           React front-end script
              |-- index.js
              |-- style.css    
          |-- package.json            React dependencies; scripts: start, build
          |-- webpack.config.js
          |-- .babelrc
       |-- requirements.txt                Python packages to install (preferrably inside a venv in the root directory)  
       |-- electron-builder.config.json         Configuration for electron-builder
       |-- package.json                      ElectronJS dependencies; scripts: py-install, py-build, electron-dev, electron-build 
  

How to run the app in development mode:

  1. Make and activate a python venv, then install requirements:

    python -m venv desktop_env
    source desktop_env/bin/activate
    pip install -r requirements.txt
    
  2. Make sure app is in development mode by changing isDev=false to isDev=true in electron/main.js.
    (Only because electron-is-dev package was not working correctly for me so I resorted to changing isDev manually.) Additionally, ensure pythonExecutable in main.js is set to the correct location on your computer.

  3. Start the React front-end from frontend/ directory:

    cd frontend
    npm start
    
  4. Start the Python back-end from root directory:

    cd ..
    npm run electron-dev
    

Steps to build and execute app in production mode:

(MacOS only: for windows you will need to make some changes to your configuration first)

  1. Build the React front-end:

    cd frontend
    npm run build
    

    Should create folder frontend/build/.

  2. Use PyInstaller to bundle Python back-end (scripts + dependencies) into a standalone executable:

    Activate desktop_env (I believe, but am not totally certain, that PyInstaller must be called from an environment where all dependencies to be included in the bundle are installed):

    source desktop_env/bin/activate
    

    Bundle back-end from root directory:

    cd ..
    npm run py-build
    

    Should create folders backend/dist/ and backend/build/.

  3. Make sure app is in production mode by changing isDev=true to isDev=false in electron/main.js.

  4. Build the Electron app:

    npm run electron-build
    

    Should create folder dist/.
    To launch app, navigate to dist/mac-arm64/calculator-app, cross your fingers, and click!

Things to watch out for:

  1. PyInstaller is tested on MacOS, Windows and Linux, but cannot cross-compile. If you want to make a Windows app, you need to build the app on Windows. Additionally, PyInstaller seems to be quite version-specific: If you test the app on a Mac with an OS older than the one used to build the app, the Python back-end may not work (this was my experience, and upgrading the OS fixed the issue).

  2. Currently, asar: false is set in electron-builder.config.js. To build with asar, you might need to spend some time figuring out how to unpack the scripts you need to call from main.js.

  3. If you get an error that says something like ENODIR ... ensureSymlink ... Contents/Versions/Python (I don't remember the exact wording) when running npm run electron-build, try downgrading your version of electron-builder (some people say downgrading to "electron-builder": ^23.0.0 worked for them).

About

Simple electronJS desktop app build configuration using React front-end and Python (FastAPI) back-end.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published