https://evidence.dev/_app/immutable/nodes/20.CHEnYTIL.js

1import"../chunks/Bzak7iHL.js";import"../chunks/BfBooWUr.js";import{b,a as y,s as e,c as s,f as w,r as a,n as S}from"../chunks/DKy7cE2M.js";import{h}from"../chunks/aVXJQvNX.js";import{P as H}from"../chunks/B37rqYG8.js";import{S as E}from"../chunks/B1K8zcLD.js";const C={og:{title:"Deploy Evidence on Hugging Face Spaces",description:"Deploy your Evidence app on Hugging Face Spaces by combining two Spaces: one to store the source code, and one to host the Evidence App as a static website",image:"/blog/hugging-face-spaces/hf-spaces-card.png"}},{og:c}=C;var T=w('<!> <img src="/blog/hugging-face-spaces/hf-spaces-app.png" alt="Hugging Face Spaces Card" class="rounded-md"/> <h1 id="deploy-evidence-on-hugging-face-spaces">Deploy Evidence on Hugging Face Spaces</h1> <p><em>Deploy your Evidence app on Hugging Face Spaces by combining two Spaces: one to store the source code, and one to host the Evidence App as a static website</em></p> <!> <h2 id="hugging-face-">Hugging Face 🤗?</h2> <p><a href="https://huggingface.co/" rel="nofollow">Hugging Face</a> is a popular platform for sharing machine learning models and datasets.</p> <p>Hugging Face <em>Spaces</em> is a feature that allows you to deploy applications. It’s a great way to host static sites, and it’s free!</p> <p>Here you can see the finished product:</p> <ul><li><a href="https://huggingface.co/spaces/evidence-dev/template-deployed" rel="nofollow">The Hosting Space</a> with the Evidence app (<a href="https://evidence-dev-template-deployed.static.hf.space" rel="nofollow">see without Hugging Face header</a>)</li> <li><a href="https://huggingface.co/spaces/evidence-dev/template/tree/main" rel="nofollow">The Source Code Space</a> with the Evidence source code and build process</li></ul> <h2 id="how-to-create-and-host-an-evidence-app-on-huggingface-spaces">How to Create and Host an Evidence App on Huggingface Spaces</h2> <h3 id="step-1-create-a-space-for-the-source-code">Step 1: Create a Space for the Source Code</h3> <p>First, create a Huggingface Space to store your code and build the app. For this one, use the Docker SDK, and select a blank template. This will be the “Source Code Space”.</p> <p><img src="/blog/hugging-face-spaces/docker-sdk-space.png" alt="Docker SDK"/></p> <h3 id="step-2-get-the-source-code">Step 2: Get the Source Code</h3> <p>We need to get our Evidence source code into the Space. Huggingface Spaces are just git repositories, so we start by cloning the repo.</p> <p><img src="/blog/hugging-face-spaces/git-clone-hf.png" alt="Git Clone"/></p> <p>With the local copy of the repo, put an Evidence project inside it.</p> <pre class="language-bash"></pre> <p>Use the <code>--force</code> flag because the directory already contains some Huggingface files. Once we push these files to git, our source control setup is complete!</p>

1 <h3 id="step-3-set-up-the-builder-with-docker">Step 3: Set Up the Builder with Docker</h3> <p>Evidence is deployed as a static site, meaning the source code is built into HTML, CSS, and JS. We need something to run this process, and that’s where Docker comes in.</p> <p>Add this Dockerfile at the root of your project and push it to git.</p> <pre class="language-dockerfile"></pre> <p>This Dockerfile does the following:</p> <ul><li>Installs Node.js, Python, and the Hugging Face CLI</li> <li>Builds the app</li> <li>Uploads the app to the other “Hosting Space” (more on this later!)</li></ul> <h3 id="step-4-configure-credentials">Step 4: Configure Credentials</h3> <p>Go into your Source Code Space and observe a build attempting to run. It’ll fail because we need to add two environment variables for the Dockerfile:</p> <ul><li><strong>STATIC_SPACE</strong>: Name of your static Space</li> <li><strong>HF_TOKEN</strong>: Token with write access to the static Space</li></ul> <p>Add these via the <a href="https://huggingface.co/docs/hub/en/spaces-overview#managing-secrets" rel="nofollow">Space settings</a></p> <p><img src="/blog/hugging-face-spaces/add-env-vars.png" alt="Credentials"/></p> <h3 id="step-5-prepare-the-hosting-space">Step 5: Prepare the Hosting Space</h3> <p>Now, create a second Huggingface Space as a static site host. This Space will contain the built Evidence app, which we’ll refer to as the “Hosting Space”.</p> <p>Choose the “Static SDK” and select a blank template.</p> <p><img src="/blog/hugging-face-spaces/static-site-space.png" alt="Static Site Setup"/></p> <h3 id="step-6-try-a-build">Step 6: Try a Build</h3> <p>If it doesn’t start automatically, you can trigger this by clicking “Factory Rebuild” in the Space settings.</p> <p>If you have a small Evidence app, expect this to take about a minute.</p> <p>N.B. The Souce Code Space will say it has a <code>Runtime Error</code> when it finishes building, but that’s just because we kill the Docker container at the end of the build, and we don’t actually use this Space to <em>run</em> anything once the build is complete.</p> <div><video autoplay="" loop="" playsinline="" class="rounded-xl border"><source src="/blog/hugging-face-spaces/watch-build.mp4" type="video/mp4"/> Your browser does not support the video tag.</video></div> <h3 id="step-7-check-the-published-app">Step 7: Check the Published App</h3> <p>Go look at the published static app in your Hosting Space. It should be live!</p> <div><video autoplay="" loop="" playsinline="" class="rounded-xl border"><source src="/blog/hugging-face-spaces/view-site.mp4" type="video/mp4"/> Your browser does not support the video tag.</video></div> <h3 id="step-8-update-the-app">Step 8: Update the App</h3> <p>To change the app, simply make a change to your local copy of the source code repo and push it. Your app rebuilds automatically!</p> <div><video autoplay="" loop="" playsinline="" class="rounded-xl border"><source src="/blog/hugging-face-spaces/make-change.mp4" type="video/mp4"/> Your browser does not support the video tag.</video></div> <h3 id="step-9-view-without-header">Step 9: View Without Header</h3> <p>You can also view the app without the Huggingface header by going to “Embed this Space” and clicking on the “Direct URL” link.</p> <div><video autoplay="" loop="" playsinline="" class="rounded-xl border"><source src="/blog/hugging-face-spaces/view-without-header.mp4" type="video/mp4"/> Your browser does not support the video tag.</video></div> <h3 id="conclusion">Conclusion</h3> <p>That’s it! You’ve successfully deployed an Evidence App on Hugging Face Spaces.</p> <p>See the <a href="https://huggingface.co/spaces/evidence-dev/template-deployed" rel="nofollow">demo app on Hugging Face →</a>.</p>',3);function I(g){var r=T(),l=b(r);E(l,{get title(){return c.title},get description(){return c.description},get img(){return c.image},domain:"https://evidence.dev"});var d=e(l,8);H(d,{width:"48",round:!0,authorFullName:"Archie Wood",linkedinURL:"https://www.linkedin.com/in/archiesarrewood/",src:"https://www.gravatar.com/avatar/534c3fa2c39cb975bbe7157313a42143?s=200",date:"Jul 31st, 2024",readingTime:"3 min read"});var t=e(d,28);h(t,()=>`<code class="language-bash"><span class="token function">git</span>

1 clone https://huggingface.co/spaces/<span class="token punctuation">[</span>your-username<span class="token punctuation">]</span>/<span class="token punctuation">[</span>your-repo<span class="token punctuation">]</span>
2<span class="token builtin class-name">cd</span> <span class="token punctuation">[</span>your-repo<span class="token punctuation">]</span>
3npx degit evidence-dev/template <span class="token parameter variable">--force</span> <span class="token builtin class-name">.</span></code>`,!0),a(t);var n=e(t,10);h(n,()=>`<code class="language-dockerfile"><span class="token instruction"><span class="token keyword">FROM</span> ubuntu:22.04</span>
4
5<span class="token comment"># Install Node.js 20 - https://github.com/nodesource/distributions?tab=readme-ov-file#installation-instructions-deb</span>
6<span class="token comment"># And python3</span>
7<span class="token instruction"><span class="token keyword">RUN</span> apt update <span class="token operator"></span>
8    &amp;&amp; apt install -y curl python3 python3-pip <span class="token operator"></span>
9    &amp;&amp; rm -rf /var/lib/apt/lists/*</span>
10
11<span class="token instruction"><span class="token keyword">RUN</span> curl -fsSL https://deb.nodesource.com/setup_20.x -o nodesource_setup.sh <span class="token operator"></span>
12    &amp;&amp; bash nodesource_setup.sh <span class="token operator"></span>
13    &amp;&amp; apt update <span class="token operator"></span>
14    &amp;&amp; apt install -y nodejs <span class="token operator"></span>
15    &amp;&amp; rm -rf /var/lib/apt/lists/* <span class="token operator"></span>
16    &amp;&amp; rm nodesource_setup.sh</span>
17
18<span class="token instruction"><span class="token keyword">RUN</span> pip install --upgrade <span class="token string">"huggingface_hub[cli]"</span></span>
19
20<span class="token comment"># Build the app</span>
21<span class="token instruction"><span class="token keyword">WORKDIR</span> /usr/app</span>
22<span class="token instruction"><span class="token keyword">COPY</span> ./ /usr/app</span>
23<span class="token instruction"><span class="token keyword">RUN</span> npm install</span>
24<span class="token instruction"><span class="token keyword">RUN</span> npm run sources &amp;&amp; npm run build</span>
25
26
27<span class="token comment"># Upload the app</span>
28
29<span class="token comment">## The site space name must be passed as an environment variable</span>
30<span class="token comment">## https://huggingface.co/docs/hub/spaces-sdks-docker#buildtime</span>
31<span class="token instruction"><span class="token keyword">ARG</span> STATIC_SPACE</span>
32<span class="token comment">## The Hugging Face token must be passed as a secret (https://huggingface.co/docs/hub/spaces-sdks-docker#buildtime)</span>
33<span class="token comment">## 1. get README.md from the site space</span>
34<span class="token instruction"><span class="token keyword">RUN</span> <span class="token options"><span class="token property">--mount</span><span class="token punctuation">=</span><span class="token string">type=secret,id=HF_TOKEN,mode=0444,required=true</span></span> <span class="token operator"></span>
35    huggingface-cli download --token=$(cat /run/secrets/HF_TOKEN) --repo-type=space --local-dir=/usr/app/build <span class="token variable">$STATIC_SPACE</span> README.md &amp;&amp; rm -rf /usr/app/build/.cache</span>
36<span class="token comment">## 2. upload the new build to the site space, including README.md</span>
37<span class="token instruction"><span class="token keyword">RUN</span> <span class="token options"><span class="token property">--mount</span><span class="token punctuation">=</span><span class="token string">type=secret,id=HF_TOKEN,mode=0444,required=true</span></span> <span class="token operator"></span>
38    huggingface-cli upload --token=$(cat /run/secrets/HF_TOKEN) --repo-type=space <span class="token variable">$STATIC_SPACE</span> /usr/app/build . --delete <span class="token string">"*"</span></span>
39
40<span class="token comment">## Halt execution because the code space is not meant to run.</span>
41<span class="token instruction"><span class="token keyword">CMD</span> [<span class="token string">"true"</span>]</span></code>`,!0),a(n);var o=e(n,32),m=s(o);m.muted=!0,a(o);var p=e(o,6),k=s(p);k.muted=!0,a(p);var i=e(p,6),v=s(i);v.muted=!0,a(i);var u=e(i,6),f=s(u);f.muted=!0,a(u),S(6),y(g,r)}export{I as component};