How to make the app built by chainlit run completely offline?

[Valdanitooooo]

I noticed that there will be access to external CSS resources here https://github.com/Chainlit/chainlit/blob/f6159d506e745ad4e8fe00a03f9e2914b46b473c/frontend/index.html#L17

[dosubot[bot]]

To make a Chainlit app run completely offline, you need to replace external resources with local ones. Here's how you can do it:

1. Download External Resources Locally: Download the CSS files from the external links, such as the KaTeX library and Google Fonts, and save them in your project's directory.

2. Update index.html: Modify the index.html file to reference these local files instead of the external URLs. For example, replace:

   <link href="https://cdn.jsdelivr.net/npm/katex@0.16.8/dist/katex.min.css" rel="stylesheet">
   <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">

   with:

   <link href="/path/to/local/katex.min.css" rel="stylesheet">
   <link href="/path/to/local/inter.css" rel="stylesheet">

3. Serve Local Files: Ensure that your local server is configured to serve these files correctly.

4. Configure Chainlit: Use the config.toml file to specify any custom CSS or JavaScript if needed. You can use custom_css and custom_js settings to point to your local resources.

By following these steps, you can ensure that your Chainlit app does not rely on external resources and can run offline.

To continue talking to Dosu, mention @dosu.

[Valdanitooooo]

My current solution is to replace index.html when deploying the Chainlit application on the server using docker compose.

volumes:
    - ${VOLUME_DIR_PROD}/html/index.html:/root/.local/lib/python3.11/site-packages/chainlit/frontend/dist/index.html