One item that we did not touch upon is how to compile all of the React/TypeScript code (plus every dependency installed with npm), into a single folder with plain HTML/CSS/JS code. Such output can then be shared with other people and rendered by the browser without the need of a build toolchain.
In this instance, we use Babel to compile to JS code and Webpack (configured by create-react-app) for serving the component and bundling into a single folder. We could run Parcel and Rollup as Webpack alternatives in a new Streamlit Component template.
_component_func returned by
declare_component accepts a
path argument instead of
url, which loads frontend code from files in the given path instead of from a webserver. Your npm project can run the command
npm run build to build all the frontend code in production mode (and optimized for the best performance) into the
frontend/build/ folder. The
path argument can be used in the declaration of the component in the
__init__.py file to point to the optimized
import streamlit.components.v1 as components # Define location of the packaged frontend build parent_dir = os.path.dirname(os.path.abspath(__file__)) build_dir = os.path.join(parent_dir, "frontend/build") _component_func = components.declare_component( "custom_slider", path=build_dir # Change how to access component by path instead of url )
You lose the hot-reloading from a running Webpack server, but now your app should work with a single
streamlit run app.py command! Also, other users will be able to use this
build/ folder in Streamlit without having to install a frontend build toolchain to understand the fancy Typescript.
Instead of using an external web server to deliver the component, you can now bundle the compiled frontend code into your Python package. The command
python setup.py bdist_wheel --universal will build the Python package as a wheel file, and include the
build/ folder inside as defined by the
MANIFEST.in file of the template (don’t forget to include the name of the package in the
MANIFEST.in file). You can then share this wheel file to others or even upload it to PyPi.
Be sure to check out the Streamlit docs for a tutorial on uploading to PyPi.