<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0" xmlns:atom="http://www.w3.org/2005/Atom" xmlns:dc="http://purl.org/dc/elements/1.1/">
  <channel>
    <title>Forem: Willy Douhard</title>
    <description>The latest articles on Forem by Willy Douhard (@willydouhard).</description>
    <link>https://forem.com/willydouhard</link>
    <image>
      <url>https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F1092286%2F80ea78c8-c2d4-4b0c-a001-b6e31ff454c0.jpg</url>
      <title>Forem: Willy Douhard</title>
      <link>https://forem.com/willydouhard</link>
    </image>
    <atom:link rel="self" type="application/rss+xml" href="https://forem.com/feed/willydouhard"/>
    <language>en</language>
    <item>
      <title>How to deploy your ChatGPT-like app with Chainlit and Fly.io</title>
      <dc:creator>Willy Douhard</dc:creator>
      <pubDate>Wed, 31 May 2023 10:29:39 +0000</pubDate>
      <link>https://forem.com/willydouhard/how-to-deploy-your-chainlit-app-to-flyio-38ja</link>
      <guid>https://forem.com/willydouhard/how-to-deploy-your-chainlit-app-to-flyio-38ja</guid>
      <description>&lt;p&gt;🔗💡&lt;em&gt;Chainlit is an open-source Python package that allows you to create ChatGPT-like UIs on top of any Python code in just minutes! Visit the &lt;a href="https://github.com/Chainlit/chainlit" rel="noopener noreferrer"&gt;GitHub repo&lt;/a&gt; to get started!&lt;/em&gt;&lt;/p&gt;

&lt;p&gt;This post is designed to guide you through deploying your Chainlit apps to Fly.io.&lt;/p&gt;

&lt;p&gt;Fly is an excellent choice for two reasons:&lt;/p&gt;

&lt;ol&gt;
&lt;li&gt;💸 It offers a free plan&lt;/li&gt;
&lt;li&gt;✨ It's super easy&lt;/li&gt;
&lt;/ol&gt;

&lt;p&gt;In this tutorial, we'll be using this &lt;a href="https://github.com/Chainlit/cookbook/tree/main/fly-io-deployment" rel="noopener noreferrer"&gt;simple example&lt;/a&gt; from the Chainlit cookbook repo. Feel free to use your own application instead.&lt;/p&gt;

&lt;p&gt;&lt;strong&gt;Prerequisites:&lt;/strong&gt;&lt;/p&gt;

&lt;ul&gt;
&lt;li&gt;Python &amp;gt;= 3.8&lt;/li&gt;
&lt;li&gt;A &lt;a href="https://fly.io/" rel="noopener noreferrer"&gt;Fly.io&lt;/a&gt; account&lt;/li&gt;
&lt;/ul&gt;

&lt;h2&gt;
  
  
  Step 1: Install the Fly CLI 🚀
&lt;/h2&gt;

&lt;p&gt;The Fly CLI enables you to deploy your app with just a couple of command lines! First, you'll need to install it.&lt;/p&gt;

&lt;p&gt;For mac users, run:&lt;br&gt;
&lt;/p&gt;

&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;brew install flyctl
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;For other operating systems, refer to Fly's detailed guide on how to install &lt;a href="https://fly.io/docs/hands-on/install-flyctl/" rel="noopener noreferrer"&gt;here&lt;/a&gt;.&lt;/p&gt;
&lt;h2&gt;
  
  
  Step 2: Login to Fly 🔒
&lt;/h2&gt;

&lt;p&gt;After installing the CLI, you will first need to signup:&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;flyctl auth signup
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Then run:&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;flyctl auth login
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;

&lt;h2&gt;
  
  
  Step 3: Run your Chainlit app locally 🏠
&lt;/h2&gt;

&lt;p&gt;Before deploying, it's a good idea to make sure your application runs locally without any problems.&lt;/p&gt;

&lt;p&gt;If you don't have a Chainlit app ready, clone our example from the cookbook:&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;git clone https://github.com/Chainlit/cookbook.git chainlit-cookbook
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Then, navigate to the app folder:&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;cd chainlit-cookbook/fly-io-deployment
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Finally, run &lt;code&gt;chainlit run main.py&lt;/code&gt;. If you're using your own application, replace &lt;code&gt;main.py&lt;/code&gt; with the appropriate file.&lt;/p&gt;

&lt;p&gt;You should see the application up and running:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5ahc9m2b2envycrqmvb9.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2F5ahc9m2b2envycrqmvb9.png" alt="App running"&gt;&lt;/a&gt;&lt;/p&gt;
&lt;h2&gt;
  
  
  Step 4: Add Procfile and requirements.txt 📄
&lt;/h2&gt;

&lt;p&gt;A &lt;code&gt;Procfile&lt;/code&gt; is a way to declare how to start your application. The cookbook example app we're using already includes one. If you're running your own application, create a &lt;code&gt;Procfile&lt;/code&gt; at the root of your project with the following content:&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;web: python -m chainlit run main.py -h --port 8080
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;If you're using your own application, replace &lt;code&gt;main.py&lt;/code&gt; with the appropriate file&lt;/p&gt;

&lt;p&gt;A &lt;code&gt;requirement.txt&lt;/code&gt; file lists all the Python dependencies of your app. Again, the cookbook example already has one. If you are deploying your own app make sure to create one. If any dependency is missing, the deployment will fail!&lt;/p&gt;
&lt;h2&gt;
  
  
  Step 5: Create the Fly project 🎉
&lt;/h2&gt;

&lt;p&gt;We're almost ready to deploy!&lt;/p&gt;

&lt;p&gt;Although you will be using Fly's free plan, you still need to provide a payment method (you will not be charged) on the Fly website before deploying your application.&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzk1ip16y05q58xxpqdtu.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fzk1ip16y05q58xxpqdtu.png" alt="Add payment method"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Once the payment method is setup, we need to create the Fly project that will host our app. To do that, run:&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;flyctl launch
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;You’ll be prompted with several Fly.io questions. Answer &lt;strong&gt;NO&lt;/strong&gt; to all of them ✋. Here's a screenshot of my setup:&lt;/p&gt;

&lt;p&gt;&lt;a href="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw2yjwxizqvy3ut27vgey.png" class="article-body-image-wrapper"&gt;&lt;img src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fdev-to-uploads.s3.amazonaws.com%2Fuploads%2Farticles%2Fw2yjwxizqvy3ut27vgey.png" alt="flyctl launch output"&gt;&lt;/a&gt;&lt;/p&gt;

&lt;p&gt;Take note of the &lt;code&gt;Hostname&lt;/code&gt;, which is the URL your app will be deployed to.&lt;/p&gt;
&lt;h2&gt;
  
  
  Step 6: Deploy! 🚢
&lt;/h2&gt;

&lt;p&gt;The final (and easiest) step! Run:&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;flyctl deploy
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;Once the deployment finished, you have to run one final command:&lt;br&gt;
&lt;/p&gt;
&lt;div class="highlight js-code-highlight"&gt;
&lt;pre class="highlight plaintext"&gt;&lt;code&gt;flyctl scale count 1
&lt;/code&gt;&lt;/pre&gt;

&lt;/div&gt;


&lt;p&gt;The reason for that is that Fly does not support sticky Websocket sessions out of the box, meaning that scaling to multiple machine will prevent your Chainlit app to work.&lt;/p&gt;

&lt;p&gt;If you need features like autoscaling, I advise you to deploy your app on AWS ECS or GCP, with an Application Load Balancer that support sticky sessions.&lt;/p&gt;

&lt;p&gt;🎊 &lt;strong&gt;And voilà! Your app is available at the &lt;code&gt;Hostname&lt;/code&gt; provided in the previous step.&lt;/strong&gt; 🎊 In my case:&lt;/p&gt;


&lt;div class="crayons-card c-embed text-styles text-styles--secondary"&gt;
      &lt;div class="c-embed__cover"&gt;
        &lt;a href="https://summer-pond-3349.fly.dev/" class="c-link s:max-w-50 align-middle" rel="noopener noreferrer"&gt;
          &lt;img alt="" src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fchainlit-cloud.s3.eu-west-3.amazonaws.com%2Flogo%2Fchainlit_banner.png" height="auto" class="m-0"&gt;
        &lt;/a&gt;
      &lt;/div&gt;
    &lt;div class="c-embed__body"&gt;
      &lt;h2 class="fs-xl lh-tight"&gt;
        &lt;a href="https://summer-pond-3349.fly.dev/" rel="noopener noreferrer" class="c-link"&gt;
          Fly demo
        &lt;/a&gt;
      &lt;/h2&gt;
        
      &lt;div class="color-secondary fs-s flex items-center"&gt;
          &lt;img alt="favicon" class="c-embed__favicon m-0 mr-2 radius-0" src="https://media.dev.to/dynamic/image/width=800%2Cheight=%2Cfit=scale-down%2Cgravity=auto%2Cformat=auto/https%3A%2F%2Fsummer-pond-3349.fly.dev%2Ffavicon.svg"&gt;
        summer-pond-3349.fly.dev
      &lt;/div&gt;
    &lt;/div&gt;
&lt;/div&gt;



&lt;p&gt;If you have any questions or suggestions, please let me know in the comments below, or feel free to get in touch on &lt;a href="https://discord.gg/ZThrUxbAYw" rel="noopener noreferrer"&gt;Discord&lt;/a&gt;!&lt;/p&gt;

</description>
      <category>chatgpt</category>
      <category>tutorial</category>
      <category>python</category>
      <category>ui</category>
    </item>
  </channel>
</rss>
