To start, clone the Streamlit components template on your machine and move the
template folder into a new
streamlit-custom-slider in your workspace.
$ git clone https://github.com/streamlit/component-template $ mv component-template/template/ ~/streamlit-custom-slider/
This folder contains the React template code needed to build your first Streamlit component. Let’s have a closer look at its structure:
Next, refactor the project into a
setup.pyfile, change the name of the Python project with
frontend/package.json, edit the name of the Node project
Now it’s time to prepare the Python and JS environment.
On the Python side, build a virtual environment activated with Streamlit 0.63+ installed. You can follow the tutorial for venv in the template, but I’m more of a conda user, so the following steps will use conda environments.
Since we’re working on a Python package here, we will also install the package in editable mode in the environment by running
pip install -e . next to
setup.py. This ensures that any code changes will be directly reflected in the installed package of the environment.
$ conda create -n streamlit-custom python=3.8 # Create a new python venv $ conda activate streamlit-custom # Activate the venv $ pip install streamlit # Install Streamlit $ pip install -e . # Install package in editable mode
Verify your install by running
streamlit hello in a terminal, which should give you the Streamlit demo on
On the JS side, you should have
npm installed globally. The
package.json file defines your frontend project. When you use a npm command, you should always make sure you’re at the same level as the
$ cd streamlit_custom_slider/frontend $ npm install # Initialize the project, and install npm dependencies
When the install is over, you should see a
package-lock.json file and a
node_modules folder. The
package-lock.json is automatically generated and pins all dependencies of the libraries defined in package.json — the
node_modules contain your npm libraries. You shouldn’t have to go into one of those.
npm run start to start the local server. It is accessible on
http://localhost:3001, but it will only display a blank page because the custom component is waiting for a specific JS event sent by Streamlit apps to actually render.
You can test the full template by running
streamlit run streamlit_custom_slider/__init__.py and then browse to
http://localhost:8501 to see the template’s result. If all is well, your Web browser should display the Streamlit app with the custom buttons retrieved and rendered.
You now have a Python environment configured with Streamlit and your
streamlit-custom-slider package installed on the Python side, with your frontend dependencies setup in the
├── LICENSE ├── MANIFEST.in ├── setup.py <- With `name="streamlit_custom_slider"` │ └── streamlit_custom_slider ├── __init__.py └── frontend <- `npm install` run in this folder ├── public/ ├── src/ ├── .env ├── .prettierc ├── package.json <- With `"name": "streamlit_custom_slider"` ├── package-lock.json <- Pinned versions appears after `npm install` ├── node_modules <- JS libraries installed by `npm install` └── tsconfig.json
In the next section, we will display the very classic “Hello world” example through a Streamlit component.