Project Setup

Prerequisites

Before we go further, make sure you have Python, Node.js and npm (which should come with your node.js installation) installed on your system.

Clone the project

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:

    ├── LICENSE
    ├── MANIFEST.in            <- To package all JS code into the Python package
    ├── setup.py               <- Responsible for packaging
    │
    └── my_component
        ├── __init__.py        <- Defines Python functions accessible to the end user
        └── frontend
            ├── public/        <- Static files like images and css
            ├── src/           <- Javascript code
            ├── .env
            ├── .prettierc
            ├── package.json   <- Project definition and dependencies, like setup.py
            └── tsconfig.json

Next, refactor the project into a streamlit-custom-slider package:

• Rename the my_component folder into streamlit_custom_slider;
• In the setup.py file, change the name of the Python project with name="streamlit-custom-slider"; and,
• In frontend/package.json, edit the name of the Node project "name": "streamlit_custom_slider"

Now it’s time to prepare the Python and JS environment.

Setup your Python 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 http://localhost:8501.

Setup your Frontend Environment

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 package.json.

$ cd streamlit_custom_slider/frontend
$ npm install    # Initialize the project, and install npm dependencies

Finally, run 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.

Recap

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 frontend folder.

    ├── 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.