--- title: Host web apps description: >- Lightning AI enables developers to deploy and host web apps that can be made public or shared internally. We recommend you find a template to something... canonical: 'https://lightning.ai/docs/platform/build/host-web-apps' --- # Host web apps {#host-web-apps} Lightning AI enables developers to deploy and host web apps that can be made public or shared internally. ![A web app built in Gradio.](https://storage.googleapis.com/lightning-avatars/litpages/01hktsq8bbdgq8cck6027bwwm1/0d353664-1a41-4404-ad95-106299421907.png) ## Start from a template {#start-from-a-template} We recommend you find a template to something similar to what you want to build by visiting our [Studio templates](https://lightning.ai/lightning-ai/studios?view=public§ion=featured). [Start from a Studio template.](https://assets.lightning.ai/Docs_Studios_MP4/DeployAIWebApps_StartfromaTemplate2.mp4) ## Web app frameworks {#web-app-frameworks} ### Gradio {#gradio} Gradio is a web framework that mixes the front-end code with the model code. It has prebuilt templates for different machine learning tasks (object-detection, classification, etc...). The advantage is that it is fast to develop a visual interface to share how a model performs without needing to know web development. We recommend using this for demos, but using a more traditional web framework for production use cases. [Use Gradio to quickly build a demo or web application for your ML model or API.](https://assets.lightning.ai/Docs_Studios_MP4/Deploy_Gradio_E2E2.mp4) Read the [full guide for deploying Gradio apps](/docs/platform/build/host-web-apps/gradio-apps.md). ### Streamlit {#streamlit} Streamlit is a web framework that mixes the front-end code with the model code. It has a similar event-loop to React.js but it is built in pure Python. Under the hood, it still generates valid React code, but it does not require the user to know web development. This is useful to build interfaces that require computational code like in AI/ML without needing a stand-alone web app. [Use the Streamlit plugin to create and deploy web apps for ML and Data Science.](https://assets.lightning.ai/Docs_Studios_MP4/Deploy_Streamlit_E2E.mp4) Read the full guide for [deploying Streamlit apps](/docs/platform/build/host-web-apps/streamlit-apps.md). ### Traditional web frameworks {#traditional-web-frameworks} If you know how to build web apps, need a high-performance front-end for a model targeting a production use case, we recommend you use a traditional web framework like React or Vue.js. In this case, the front-end is separated from the ML back-end which you can treat as a black box API. On Lightning AI, you can use any web development framework as well. Here's an example of React. [Use the React plugin to create a high performance web app.](https://assets.lightning.ai/Docs_Studios_MP4/DeployAIWebApps_TraditionalWebFrameworks_ReactApps.mp4) ## Reduce costs {#reduce-costs} Here we describe a few options to lower the cost of hosting web apps. ### Enable auto-start {#enable-auto-start} Auto-start enables apps to run 24/7, but you only pay when the app is being used actively. Under the hood, Lightning AI monitors user traffic to your app and turns it off when no one is using it. For example, if you get one user for 5 minutes on one day of the week, you only pay for those 5 minutes (or it could be free if you still have free credits or a free CPU Studio). ![With auto-start, Studios sleep when the demos are not in use.](https://storage.googleapis.com/lightning-avatars/litpages/01hkvptbxqrqacj15z3zdrckrm/90b15cfd-cb5c-4431-93ce-743fd4550886.png) The downside to auto-start is that the time between requesting a URL and seeing the app may be a few minutes (this is called the "cold-start" time). If you find that 1-2 minute delay is too slow, then consider running the app 24/7 without auto-start. Note: Lightning AI is always working toward reducing cold-start time. Every few months it gets faster and faster. ### One app per Studio {#one-app-per-studio} Option 1 is to set up one app per CPU Studio, enable auto-start and turn them all of. You are not charged for sleeping Studios. If you believe that multiple apps will not be used at once, then it's likely that only one Studio is running at any one time. In this case, that Studio will be free. This means you can have 20 different Studios, each running an app; as long as only one runs at a time, you'll always stay under your free Studio quota. In the rare event when multiple Studios run at the same time, then you may use us some of your free credits while multiple Studios run at the same time. ![Run 1 app per CPU Studio. Keep them all asleep except for the one you want to run.](https://storage.googleapis.com/lightning-avatars/litpages/01hktsq8bbdgq8cck6027bwwm1/858b09a2-8f4b-440d-8b15-ec809a4a0d56.png) ### Host 2+ apps in one Studio {#host-2-apps-in-one-studio} A second option is to run all 20 apps on a single Studio. As long as all demos fit in memory and the performance is what you want, then this guarantees that only 1 Studio is running at any one time which will keep everything free. ![Host multiple apps in a Studio. Be sure that they fit in memory.](https://storage.googleapis.com/lightning-avatars/litpages/01hktsq8bbdgq8cck6027bwwm1/d92307ac-535c-4939-a45a-326e4f0bf0b3.png) ### Studio vs Jobs {#studio-vs-jobs} Apps can either be hosted via Studios or via Jobs. Studios allow interactive development and are great for debugging, testing or a simple app where you don't want to worry about a "production" deployment. We recommend hosting apps on Studios for students, scientists, and developers looking for quick prototypes. For use cases where you may need a production workflow, we recommend you submit a Job that runs the app. [Video (video)](https://assets.lightning.ai/Docs_Studios_MP4/Docs_DevelopmentWorkflow_Step3_Serve%20a%20Model_ProductionDevelopment.mp4) ## Share apps {#share-apps} Lightning AI offers a few ways of sharing apps. The main way to share an app is to click the public link icon on the Studio plugin you're using, either Gradio, Streamlit or React. [Use the "Public link" button to share your web app.](https://assets.lightning.ai/Docs_Studios_MP4/DeployAIWebApps_SharePublicLInk.mp4) To share a custom front-end or a custom app exposing ports manually, simply use the ports plugin. [Use the port plugin to manually expose your app.](https://assets.lightning.ai/Docs_Studios_MP4/Docs_Studios_HostWebApps_ExposingPorts2.mp4) --- **Navigation** - Parent: [Build](/docs/platform/build.md) - Children: - [Expose web apps](/docs/platform/build/host-web-apps/expose-web-apps.md) - [Comfy UI](/docs/platform/build/host-web-apps/stable-diffusion-with-comfyui.md) - [Streamlit apps](/docs/platform/build/host-web-apps/streamlit-apps.md) - [Gradio apps](/docs/platform/build/host-web-apps/gradio-apps.md) - [Host demos](/docs/platform/build/host-web-apps/host-demos.md)