Buckets:

hf-doc-build
/

doc-dev

Files

xet

hf-doc-build/doc-dev / hub /pr_2521 /en /spaces-sdks-docker-dash.html

HuggingFaceDocBuilder

about 1 month ago

download

raw

21 kB

	<meta charset="utf-8" /><meta name="hf:doc:metadata" content="{"title":"Dash on Spaces","local":"dash-on-spaces","sections":[{"title":"Deploy Dash on Spaces","local":"deploy-dash-on-spaces","sections":[],"depth":2},{"title":"Customizing your Dash app","local":"customizing-your-dash-app","sections":[{"title":"1. app.py","local":"1-apppy","sections":[],"depth":3},{"title":"2. Dockerfile","local":"2-dockerfile","sections":[],"depth":3},{"title":"3. requirements.txt","local":"3-requirementstxt","sections":[],"depth":3}],"depth":2},{"title":"Additional Resources and Support","local":"additional-resources-and-support","sections":[],"depth":2},{"title":"Troubleshooting","local":"troubleshooting","sections":[],"depth":2}],"depth":1}">
	<link href="/docs/hub/pr_2521/en/_app/immutable/assets/0.e3b0c442.css" rel="modulepreload">
	<link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/entry/start.d19e5ca7.js">
	<link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/scheduler.409792a1.js">
	<link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/singletons.1ece723a.js">
	<link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/index.0f0d9f26.js">
	<link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/paths.a67d9216.js">
	<link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/entry/app.98ab229a.js">
	<link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/preload-helper.78e52d9f.js">
	<link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/index.92d389ff.js">
	<link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/nodes/0.7799902b.js">
	<link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/each.e59479a4.js">
	<link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/nodes/215.70fdea64.js">
	<link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/CopyLLMTxtMenu.dcf7fb47.js">
	<link rel="modulepreload" href="/docs/hub/pr_2521/en/_app/immutable/chunks/MermaidChart.svelte_svelte_type_style_lang.0c189c7e.js"><!-- HEAD_svelte-u9bgzb_START --><meta name="hf:doc:metadata" content="{"title":"Dash on Spaces","local":"dash-on-spaces","sections":[{"title":"Deploy Dash on Spaces","local":"deploy-dash-on-spaces","sections":[],"depth":2},{"title":"Customizing your Dash app","local":"customizing-your-dash-app","sections":[{"title":"1. app.py","local":"1-apppy","sections":[],"depth":3},{"title":"2. Dockerfile","local":"2-dockerfile","sections":[],"depth":3},{"title":"3. requirements.txt","local":"3-requirementstxt","sections":[],"depth":3}],"depth":2},{"title":"Additional Resources and Support","local":"additional-resources-and-support","sections":[],"depth":2},{"title":"Troubleshooting","local":"troubleshooting","sections":[],"depth":2}],"depth":1}"><!-- HEAD_svelte-u9bgzb_END --> <p></p> <div class="items-center shrink-0 min-w-[100px] max-sm:min-w-[50px] justify-end ml-auto flex" style="float: right; margin-left: 10px; display: inline-flex; position: relative; z-index: 10;"><div class="inline-flex rounded-md max-sm:rounded-sm"><button class="inline-flex items-center gap-1 h-7 max-sm:h-7 px-2 max-sm:px-1.5 text-sm font-medium text-gray-800 border border-r-0 rounded-l-md max-sm:rounded-l-sm border-gray-200 bg-white hover:shadow-inner dark:border-gray-850 dark:bg-gray-950 dark:text-gray-200 dark:hover:bg-gray-800" aria-live="polite"><span class="inline-flex items-center justify-center rounded-md p-0.5 max-sm:p-0 hover:text-gray-800 dark:hover:text-gray-200"><svg class="sm:size-3.5 size-3" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg></span> <span>Copy page</span></button> <button class="inline-flex items-center justify-center w-6 max-sm:w-5 h-7 max-sm:h-7 disabled:pointer-events-none text-sm text-gray-500 hover:text-gray-700 dark:hover:text-white rounded-r-md max-sm:rounded-r-sm border border-l transition border-gray-200 bg-white hover:shadow-inner dark:border-gray-850 dark:bg-gray-950 dark:text-gray-200 dark:hover:bg-gray-800" aria-haspopup="menu" aria-expanded="false" aria-label="Open copy menu"><svg class="transition-transform text-gray-400 overflow-visible sm:size-3.5 size-3 rotate-0" width="1em" height="1em" viewBox="0 0 12 7" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 1L6 6L11 1" stroke="currentColor"></path></svg></button></div> </div> <h1 class="relative group"><a id="dash-on-spaces" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#dash-on-spaces"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Dash on Spaces</span></h1> <p data-svelte-h="svelte-bz6c4">With Dash Open Source, you can create data apps on your laptop in pure Python, no JavaScript required.</p> <p data-svelte-h="svelte-6pg8cl">Get familiar with Dash by building a <a href="https://dash.plotly.com/tutorial" rel="nofollow">sample app</a> with open source. Scale up with <a href="https://plotly.com/dash/" rel="nofollow">Dash Enterprise</a> when your Dash app is ready for department or company-wide consumption. Or, launch your initiative with Dash Enterprise from the start to unlock developer productivity gains and hands-on acceleration from Plotly’s team.</p> <h2 class="relative group"><a id="deploy-dash-on-spaces" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#deploy-dash-on-spaces"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Deploy Dash on Spaces</span></h2> <p data-svelte-h="svelte-ntgfoi">To get started with Dash on Spaces, click the button below:</p> <a href="http://huggingface.co/new-space?template=plotly/dash-app-template" target="_blank" data-svelte-h="svelte-hspdmb"><img src="https://huggingface.co/datasets/huggingface/badges/resolve/main/deploy-to-spaces-lg.svg" alt=""></a> <p data-svelte-h="svelte-h5bo0t">This will start building your Space using Plotly’s Dash Docker template. If successful, you should see a similar application to the <a href="https://huggingface.co/spaces/dash/dash-app-template" rel="nofollow">Dash template app</a>.</p> <h2 class="relative group"><a id="customizing-your-dash-app" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#customizing-your-dash-app"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Customizing your Dash app</span></h2> <p data-svelte-h="svelte-1dfs8sg">If you have never built with Dash before, we recommend getting started with our <a href="https://dash.plotly.com/tutorial" rel="nofollow">Dash in 20 minutes tutorial</a>.</p> <p data-svelte-h="svelte-10symh5">When you create a Dash Space, you’ll get a few key files to help you get started:</p> <h3 class="relative group"><a id="1-apppy" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#1-apppy"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>1. app.py</span></h3> <p data-svelte-h="svelte-uvq519">This is the main app file that defines the core logic of your project. Dash apps are often structured as modules, and you can optionally separate your layout, callbacks, and data into other files, like <code>layout.py</code>, etc.</p> <p data-svelte-h="svelte-mamslw">Inside of <code>app.py</code> you will see:</p> <ol data-svelte-h="svelte-1y64xzk"><li><p><code>from dash import Dash, html</code>
	We import the <code>Dash</code> object to define our app, and the <code>html</code> library, which gives us building blocks to assemble our project.</p></li> <li><p><code>app = Dash()</code>
	Here, we define our app. Layout, server, and callbacks are <em>bound</em> to the <code>app</code> object.</p></li> <li><p><code>server = app.server</code>
	Here, we define our server variable, which is used to run the app in production.</p></li> <li><p><code>app.layout =</code>
	The starter app layout is defined as a list of Dash components, an individual Dash component, or a function that returns either.</p> <p>The <code>app.layout</code> is your initial layout that will be updated as a single-page application by callbacks and other logic in your project.</p></li> <li><p><code>if __name__ == '__main__': app.run(debug=True)</code>
	If you are running your project locally with <code>python app.py</code>, <code>app.run(...)</code> will execute and start up a development server to work on your project, with features including hot reloading, the callback graph, and more.</p> <p>In production, we recommend <code>gunicorn</code>, which is a production-grade server. Debug features will not be enabled when running your project with <code>gunicorn</code>, so this line will never be reached.</p></li></ol> <h3 class="relative group"><a id="2-dockerfile" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#2-dockerfile"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>2. Dockerfile</span></h3> <p data-svelte-h="svelte-819hc7">The Dockerfile for a Dash app is minimal since Dash has few system dependencies. The key requirements are:</p> <ul data-svelte-h="svelte-8oltnt"><li>It installs the dependencies listed in <code>requirements.txt</code> (using <code>uv</code>)</li> <li>It creates a non-root user for security</li> <li>It runs the app with <code>gunicorn</code> using <code>gunicorn app:server --workers 4</code></li></ul> <p data-svelte-h="svelte-1azw1gq">You may need to modify this file if your application requires additional system dependencies, permissions, or other CLI flags.</p> <h3 class="relative group"><a id="3-requirementstxt" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#3-requirementstxt"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>3. requirements.txt</span></h3> <p data-svelte-h="svelte-d6vvu8">The Space will automatically install dependencies listed in the <code>requirements.txt</code> file. At minimum, you must include <code>dash</code> and <code>gunicorn</code> in this file. You will want to add any other required packages your app needs.</p> <p data-svelte-h="svelte-hj0bl9">The Dash Space template provides a basic setup that you can extend based on your needs.</p> <h2 class="relative group"><a id="additional-resources-and-support" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#additional-resources-and-support"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Additional Resources and Support</span></h2> <ul data-svelte-h="svelte-1oym350"><li><a href="https://dash.plotly.com" rel="nofollow">Dash documentation</a></li> <li><a href="https://github.com/plotly/dash" rel="nofollow">Dash GitHub repository</a></li> <li><a href="https://community.plotly.com" rel="nofollow">Dash Community Forums</a></li> <li><a href="https://plotly.com/dash" rel="nofollow">Dash Enterprise</a></li> <li><a href="https://huggingface.co/spaces/plotly/dash-app-template" rel="nofollow">Dash template Space</a></li></ul> <h2 class="relative group"><a id="troubleshooting" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#troubleshooting"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Troubleshooting</span></h2> <p data-svelte-h="svelte-5qd2nl">If you encounter issues:</p> <ol data-svelte-h="svelte-1vm67av"><li>Make sure your notebook runs locally in app mode using <code>python app.py</code></li> <li>Check that all required packages are listed in <code>requirements.txt</code></li> <li>Verify the port configuration matches (7860 is the default for Spaces)</li> <li>Check Space logs for any Python errors</li></ol> <p data-svelte-h="svelte-1fl9s78">For more help, visit the <a href="https://community.plotly.com" rel="nofollow">Plotly Community Forums</a> or <a href="https://github.com/plotly/dash/issues" rel="nofollow">open an issue</a>.</p> <a class="!text-gray-400 !no-underline text-sm flex items-center not-prose mt-4" href="https://github.com/huggingface/hub-docs/blob/main/docs/hub/spaces-sdks-docker-dash.md" target="_blank"><svg class="mr-1" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M31,16l-7,7l-1.41-1.41L28.17,16l-5.58-5.59L24,9l7,7z"></path><path d="M1,16l7-7l1.41,1.41L3.83,16l5.58,5.59L8,23l-7-7z"></path><path d="M12.419,25.484L17.639,6.552l1.932,0.518L14.351,26.002z"></path></svg> <span data-svelte-h="svelte-zjs2n5"><span class="underline">Update</span> on GitHub</span></a> <p></p>

	<script>
	{
	__sveltekit_1bollga = {
	assets: "/docs/hub/pr_2521/en",
	base: "/docs/hub/pr_2521/en",
	env: {}
	};

	const element = document.currentScript.parentElement;

	const data = [null,null];

	Promise.all([
	import("/docs/hub/pr_2521/en/_app/immutable/entry/start.d19e5ca7.js"),
	import("/docs/hub/pr_2521/en/_app/immutable/entry/app.98ab229a.js")
	]).then(([kit, app]) => {
	kit.start(app, element, {
	node_ids: [0, 215],
	data,
	form: null,
	error: null
	});
	});
	}
	</script>

Xet Storage Details

Size:: 21 kB
Xet hash:: 2df88296e80baf97920a388d618795d1815771cc4cea99d308351b7a95a2f4e9

Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.