Template for a React-Typescript-SCSS setup with the python eel library
Version: 1.0.0
Use yarn or npm to install.
yarn install
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
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
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.
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.
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.
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.