eel-react-typescipt-scss

Template for a React-Typescript-SCSS setup with the python eel library

Version: 1.0.0

Installation

Use yarn or npm to install.

yarn install

Development

There are 3 scripts to start React, Eel or both respectively If you are working with an IDE like PyCharm, it makes sense to only run React from console and use the IDE's function to run your python script in the debugger.

The 3 scripts are:

yarn start:js
yarn start:eel
yarn start

Production build

Your final production files will end up in the dist folder.

yarn build

To change name or icon:
Edit the script build:eel in package.json

Transferring images from Python to JS

Eel is configured to run on localhost:1234 which you can change in settings.py. React will run on localhost:3000 in development, to allow hot reloading. Therefore in development you will work on localhost:3000.

In production eel will host html/js on localhost:1234 inside a root folder located somewhere in your OS.

In order to pass files, like images, loaded/processed/created by python to the live react application they will need to be copied into this folder.

This template is set up to create a tmp folder that gets emptied every time the application starts. The example script shows you how to pass images.

Reloading App in Development

An issue with create-react-app is that in development, it will automatically reload the app if it detects new files in the public folder (which contains your tmp folder). It has no influence about in production, but gets tricky in development, since you don't have an easy access to CRAs webpack config. The issue is descibed here. The simplest solution is to simply change the file node_modules\react-scripts\config\webpackDevServer.config.js to ignore the tmp folder by modifying the watchOptions object like so:

watchOptions: {
      ignored: [ignoredFiles(paths.appSrc),paths.appPublic+'/tmp'],
},

/tmp here is the default name of your temp directory, that you might have changed.

Note that this probabyl has to be done every time you add or remove packages in yarn.

eelutil.py

This file contains small helpers to deal with file handling, generating a temporary folder for iamges generated by python etc. It also helps with generating the correct names and URLs to pass data from python to js.

Pitfalls

Whenever you expose js functions to python, eel will scan your src folder for eel.expose strings. This will only work if

• You do not write "eel.expose" even in comments or elsewhere
• The file(s) where the functions are exposed are .js not .ts or .tsx files.
• You pass a name to eel.expose, since otherwise during build the names get minified and you can't use them on python side anymore.