How to view a component in release mode using Vite?

[gabrieltempass]

Hi everyone!

I’m creating a new Streamlit Component template for the community, that uses Vue 3 and Vite. I’m basing this template on the one made by @andfanilo, streamlit-component-template-vue, that uses Webpack instead of Vite.

When I serve the code locally using Vite and run the example.py file, it works as expected. In other words, when I have _RELEASE = False in __init__.py and run npm run dev and streamlit run example.py I get the following output:

However, when I compile the files with npm run build, switch to _RELEASE = True and run the example file again, the component itself doesn’t render and after a couple os seconds an error appears:

Inspecting the browser, it shows that it failed to load both the javascript and the css compiled files. Somehow it cannot find them. But I checked their paths and they seem to be ok.

Does anyone know what’s going on and how to fix this?

Steps to reproduce the problem:

1. Clone this git repository.

git clone https://github.com/gabrieltempass/streamlit-component-vue-vite-template

2. Go to the repository root directory, create a new Python virtual environment, activate it and install Streamlit and the template as an editable package:

python3 -m venv venv
. venv/bin/activate
pip install streamlit
pip install -e .

3. From a separate terminal, go to the frontend directory, install the npm dependencies and compile the files for production:

npm install
npm run build

4. Open the __init__.py file and change the _RELEASE flag from False to True.

5. Again from the repository root directory, and with the virtual environment activated, run the example:

streamlit run my_component/example.py

[gabrieltempass]

I also checked if the compiled files are working. According to Vite’s documentation:

Once you’ve built the app, you may test it locally by running npm run preview command.

npm run build
npm run preview

The vite preview command will boot up a local static web server that serves the files from dist at http://localhost:4173 . It’s an easy way to check if the production build looks OK in your local environment.

So, with the release flag still set to True, I changed __init__.py line 41 from:

path=build_dir

To:

url="http://localhost:4173"

And the component worked perfectly again. It’s important to note that this method is not meant as a production server. Thus, this is not a solution to the problem, I still need to know how to serve properly from path=build_dir.

[gabrieltempass]

@Tim, do you think you could help me and shed some light on the problem?

[palashb01]

I had a very similar problem recently, so not sure if this thing will work for you or not but I did this for rendering react with vite inside streamlit.

• add a console.log(window.location.href) inside your app.tsx file, this will print something a url: http://localhost:8501/component/.... now go to your vite.config.ts and inside that add this /component/... url in the public path, and this will work:

const defaultConfig: UserConfigExport = {
    plugins: [
      react(),
      tsconfigPaths(),
      splitVendorChunkPlugin(),
      ViteEjsPlugin({
        PUBLIC_PATH: mode === 'development' ? ' ':'/component/...',
      }),
    ],
    server: {
      port: 3000,
    },
    build: {
      outDir: 'build',
      rollupOptions: {
        output: {
          manualChunks: {
            ace: ['ace-builds', 'react-ace'],
          },
        },
      },
    },
    experimental: {
      renderBuiltUrl(
        filename: string,
        {
          hostType,
        }: {
          hostId: string;
          hostType: 'js' | 'css' | 'html';
          type: 'asset' | 'public';
        }
      ) {
        if (hostType === 'js') {
          return {
            runtime: `window.__assetsPathBuilder(${JSON.stringify(filename)})`,
          };
        }

        return filename;
      },
    },
}

this above explanation is for the reactjs, but you can modify it for vue.js.
one problem you might face is the initial rendering of the react goes to 404 page, like not the base url so I am still figuring out the solution for this.

[gabrieltempass]

I found the solution, I knew it was probably something very simple. @palashb01, it wasn’t adding the /component/... URL to the public path though.

I search and discovered another streamlit + vue + vite repository that has the vite.config.js file like this:

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'

// https://vitejs.dev/config/
export default defineConfig({
  base: './',
  plugins: [vue()]
})

Then, comparing it to my file, I noticed the line base: './',. From Vite’s documentation, the base option is:

Base public path when served in development or production.

And when I added base: './', to my vite.config.js file, the component finally rendered in _RELEASE = True.