1
0
Fork 0
llama-bot-docs/docs/web-interface/setting-up.html

17 lines
No EOL
26 KiB
HTML
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!doctype html>
<html class="docs-version-current" lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,initial-scale=1">
<meta name="generator" content="Docusaurus v2.0.0-beta.15">
<title data-react-helmet="true">Setting up | Llama Bot Documentation</title><meta data-react-helmet="true" name="twitter:card" content="summary_large_image"><meta data-react-helmet="true" property="og:url" content="https://docs.llama.developomp.com/docs/web-interface/setting-up"><meta data-react-helmet="true" name="docusaurus_locale" content="en"><meta data-react-helmet="true" name="docusaurus_version" content="current"><meta data-react-helmet="true" name="docusaurus_tag" content="docs-default-current"><meta data-react-helmet="true" property="og:title" content="Setting up | Llama Bot Documentation"><meta data-react-helmet="true" name="description" content="This page will teach you how to set up the Llama bot web Interface."><meta data-react-helmet="true" property="og:description" content="This page will teach you how to set up the Llama bot web Interface."><link data-react-helmet="true" rel="icon" href="/img/logo.png"><link data-react-helmet="true" rel="canonical" href="https://docs.llama.developomp.com/docs/web-interface/setting-up"><link data-react-helmet="true" rel="alternate" href="https://docs.llama.developomp.com/docs/web-interface/setting-up" hreflang="en"><link data-react-helmet="true" rel="alternate" href="https://docs.llama.developomp.com/docs/web-interface/setting-up" hreflang="x-default"><link rel="stylesheet" href="/assets/css/styles.c1c17b9a.css">
<link rel="preload" href="/assets/js/runtime~main.3cd2c3e4.js" as="script">
<link rel="preload" href="/assets/js/main.b812c6db.js" as="script">
</head>
<body>
<script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){var t=null;try{t=localStorage.getItem("theme")}catch(t){}return t}();t(null!==e?e:"light")}()</script><div id="__docusaurus">
<div role="region"><a href="#" class="skipToContent_ZgBM">Skip to main content</a></div><nav class="navbar navbar--fixed-top"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Navigation bar toggle" class="navbar__toggle clean-btn" type="button" tabindex="0"><svg width="30" height="30" viewBox="0 0 30 30" aria-hidden="true"><path stroke="currentColor" stroke-linecap="round" stroke-miterlimit="10" stroke-width="2" d="M4 7h22M4 15h22M4 23h22"></path></svg></button><a class="navbar__brand" href="/docs/overview"><div class="navbar__logo"><img src="/img/logo.png" alt="Llama Bot Logo" class="themedImage_W2Cr themedImage--light_TfLj"><img src="/img/logo.png" alt="Llama Bot Logo" class="themedImage_W2Cr themedImage--dark_oUvU"></div><b class="navbar__title">Llama Bot Docs</b></a></div><div class="navbar__items navbar__items--right"><a href="https://github.com/llama-bot/llama-bot-docs" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link"><span>GitHub<svg width="13.5" height="13.5" aria-hidden="true" viewBox="0 0 24 24" class="iconExternalLink_I5OW"><path fill="currentColor" d="M21 13v10h-21v-19h12v2h-10v15h17v-8h2zm3-12h-10.988l4.035 4-6.977 7.07 2.828 2.828 6.977-7.07 4.125 4.172v-11z"></path></svg></span></a><div class="toggle_Pssr toggle_TdHA toggleDisabled_jDku"><div class="toggleTrack_SSoT" role="button" tabindex="-1"><div class="toggleTrackCheck_XobZ"><span class="toggleIcon_eZtF">🌜</span></div><div class="toggleTrackX_YkSC"><span class="toggleIcon_eZtF">🌞</span></div><div class="toggleTrackThumb_uRm4"></div></div><input type="checkbox" class="toggleScreenReader_JnkT" aria-label="Switch between dark and light mode"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div class="main-wrapper docs-wrapper docs-doc-page"><div class="docPage_P2Lg"><button aria-label="Scroll back to top" class="clean-btn theme-back-to-top-button backToTopButton_RiI4" type="button"></button><aside class="theme-doc-sidebar-container docSidebarContainer_rKC_"><div class="sidebar_CW9Y"><nav class="menu thin-scrollbar menu_SkdO"><ul class="theme-doc-sidebar-menu menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-1 menu__list-item"><a class="menu__link" href="/docs/overview">Overview</a></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist hasHref_VCh3" href="/docs/usage/overview">Usage</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist hasHref_VCh3" href="/docs/bot/overview">Bot</a></div></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist menu__link--active hasHref_VCh3" aria-current="page" href="/docs/web-interface/overview">Web Interface</a></div><ul style="display:block;overflow:visible;height:auto" class="menu__list"><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/web-interface/overview">Overview</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link menu__link--active" aria-current="page" tabindex="0" href="/docs/web-interface/setting-up">Setting up</a></li><li class="theme-doc-sidebar-item-link theme-doc-sidebar-item-link-level-2 menu__list-item"><a class="menu__link" tabindex="0" href="/docs/web-interface/api">API</a></li></ul></li><li class="theme-doc-sidebar-item-category theme-doc-sidebar-item-category-level-1 menu__list-item menu__list-item--collapsed"><div class="menu__list-item-collapsible"><a class="menu__link menu__link--sublist hasHref_VCh3" href="/docs/docs/overview">Docs</a></div></li></ul></nav></div></aside><main class="docMainContainer_TCnq"><div class="container padding-top--md padding-bottom--lg"><div class="row"><div class="col docItemCol_DM6M"><div class="docItemContainer_vinB"><article><div class="tocCollapsible_jdIR theme-doc-toc-mobile tocMobile_TmEX"><button type="button" class="clean-btn tocCollapsibleButton_Fzxq">On this page</button></div><div class="theme-doc-markdown markdown"><h1>Setting up</h1><p>This page will teach you how to set up the <a href="https://github.com/llama-bot/llama-bot-web-interface" target="_blank" rel="noopener noreferrer">Llama bot web Interface</a>.</p><h2 class="anchor anchorWithStickyNavbar_mojV" id="steps">Steps<a class="hash-link" href="#steps" title="Direct link to heading"></a></h2><h3 class="anchor anchorWithStickyNavbar_mojV" id="pre-requirements">Pre-requirements<a class="hash-link" href="#pre-requirements" title="Direct link to heading"></a></h3><ul><li>Node.js version 14 or greater (version 16 is recommended)</li><li>yarn</li><li>Discord account</li><li>Google account</li><li>Payment method (No payment required for light usage. More info <a href="https://firebase.google.com/pricing" target="_blank" rel="noopener noreferrer">here</a>)</li></ul><h3 class="anchor anchorWithStickyNavbar_mojV" id="discord">Discord<a class="hash-link" href="#discord" title="Direct link to heading"></a></h3><ol><li><p>Go to the <a href="https://discord.com/developers/applications" target="_blank" rel="noopener noreferrer">Discord Developer Portal</a> and create an application. Select one if you already have it. You may use the same application used by the discord bot.</p></li><li><p>Go to OAuth2 tab.</p></li><li><p>Add the following redirects:</p><ul><li>testing (http): <code>http://localhost:5000/api/auth</code></li><li>production (https): <code>https://&lt;YOUR_SITE_NAME_HERE&gt;/api/auth</code> (e.g. <code>https://llama.developomp.com/api/auth</code>)</li></ul></li></ol><h3 class="anchor anchorWithStickyNavbar_mojV" id="firebase">Firebase<a class="hash-link" href="#firebase" title="Direct link to heading"></a></h3><ol><li><a href="https://console.firebase.google.com" target="_blank" rel="noopener noreferrer">Create</a> a firebase project. Select one if you already have it. It must be the same project used by the discord bot. Make sure it is using the <a href="https://firebase.google.com/pricing" target="_blank" rel="noopener noreferrer">blaze plan</a>.</li><li>Go to the <code>Firestore Database</code> tab and enable it. Usage of production mode is highly recommended.</li></ol><h3 class="anchor anchorWithStickyNavbar_mojV" id="local">Local<a class="hash-link" href="#local" title="Direct link to heading"></a></h3><p>Clone the <a href="https://github.com/llama-bot/llama-bot-web-interface" target="_blank" rel="noopener noreferrer">llama-bot-web-interface</a> repository.</p><h3 class="anchor anchorWithStickyNavbar_mojV" id="functions">Functions<a class="hash-link" href="#functions" title="Direct link to heading"></a></h3><ol><li><p>Edit <code>functions/src/config.json</code>.</p><div class="codeBlockContainer_I0IT language-json theme-code-block"><div style="color:#393A34;background-color:#f6f8fa" class="codeBlockTitle_BvAR">functions/src/config.json (default values)</div><div class="codeBlockContent_wNvx json"><pre tabindex="0" class="prism-code language-json codeBlock_jd64 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_mRuA"><span class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;pathPrefix&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;/api&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// where the API endpoints will be located. Set it to &quot;/&quot; if it&#x27;s on another domain (example: api.example.com)</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;scopes&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token punctuation" style="color:#393A34">[</span><span class="token string" style="color:#e3116c">&quot;identify&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;email&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;guilds&quot;</span><span class="token punctuation" style="color:#393A34">]</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Discord OAuth2 scopes.</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_wuS7 clean-btn">Copy</button></div></div><p>more info about discord OAuth2 scopes can be found in the <a href="https://discord.com/developers/docs/topics/oauth2#shared-resources-oauth2-scopes" target="_blank" rel="noopener noreferrer">discord developers documentation</a></p></li><li><p>Create <code>functions/src/secret.json</code>.</p><div class="codeBlockContainer_I0IT language-json theme-code-block"><div style="color:#393A34;background-color:#f6f8fa" class="codeBlockTitle_BvAR">functions/src/secret.json</div><div class="codeBlockContent_wNvx json"><pre tabindex="0" class="prism-code language-json codeBlock_jd64 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_mRuA"><span class="token-line" style="color:#393A34"><span class="token punctuation" style="color:#393A34">{</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;clientID&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;DISCORD_CLIENT_ID_HERE&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Discord OAuth2 Client ID</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;clientSecret&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;DISCORD_CLIENT_SECRET_HERE&quot;</span><span class="token punctuation" style="color:#393A34">,</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// Discord OAuth2 Client Secret</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"> </span><span class="token property" style="color:#36acaa">&quot;secret&quot;</span><span class="token operator" style="color:#393A34">:</span><span class="token plain"> </span><span class="token string" style="color:#e3116c">&quot;SECRET_COOKIE_KEY_HERE&quot;</span><span class="token plain"> </span><span class="token comment" style="color:#999988;font-style:italic">// secret key to be used for express session security</span><span class="token plain"></span><br></span><span class="token-line" style="color:#393A34"><span class="token plain"></span><span class="token punctuation" style="color:#393A34">}</span><br></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_wuS7 clean-btn">Copy</button></div></div></li><li><p>Visit <a href="https://console.firebase.google.com/project/_/settings/serviceaccounts/adminsdk" target="_blank" rel="noopener noreferrer">this link</a>, select your firebase project and download the firebase admin sdk key by pressing the &quot;Generate new private key&quot; button. Rename the downloaded file to <code>firebase-adminsdk.json</code> and put it in the <code>functions/src/</code> directory.</p></li><li><p>Install firebase tools.</p><div class="codeBlockContainer_I0IT language-bash theme-code-block"><div class="codeBlockContent_wNvx bash"><pre tabindex="0" class="prism-code language-bash codeBlock_jd64 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_mRuA"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">yarn</span><span class="token plain"> global </span><span class="token function" style="color:#d73a49">add</span><span class="token plain"> firebase-tools</span><br></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_wuS7 clean-btn">Copy</button></div></div></li><li><p>Select your firebase project. You must run this command in the project root.</p><div class="codeBlockContainer_I0IT language-bash theme-code-block"><div class="codeBlockContent_wNvx bash"><pre tabindex="0" class="prism-code language-bash codeBlock_jd64 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_mRuA"><span class="token-line" style="color:#393A34"><span class="token plain">firebase use </span><span class="token operator" style="color:#393A34">&lt;</span><span class="token plain">FIREBASE_PROJECT_ID_HERE</span><span class="token operator" style="color:#393A34">&gt;</span><br></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_wuS7 clean-btn">Copy</button></div></div></li><li><p>Go to the <code>functions</code> directory and install the dependencies.</p><div class="codeBlockContainer_I0IT language-bash theme-code-block"><div class="codeBlockContent_wNvx bash"><pre tabindex="0" class="prism-code language-bash codeBlock_jd64 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_mRuA"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">yarn</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">install</span><br></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_wuS7 clean-btn">Copy</button></div></div></li><li><p>Build production code.</p><div class="codeBlockContainer_I0IT language-bash theme-code-block"><div class="codeBlockContent_wNvx bash"><pre tabindex="0" class="prism-code language-bash codeBlock_jd64 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_mRuA"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">yarn</span><span class="token plain"> build</span><br></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_wuS7 clean-btn">Copy</button></div></div></li></ol><h3 class="anchor anchorWithStickyNavbar_mojV" id="frontend">Frontend<a class="hash-link" href="#frontend" title="Direct link to heading"></a></h3><ol><li><p>Go to the <code>frontend</code> directory and install the dependencies.</p><div class="codeBlockContainer_I0IT language-bash theme-code-block"><div class="codeBlockContent_wNvx bash"><pre tabindex="0" class="prism-code language-bash codeBlock_jd64 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_mRuA"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">yarn</span><span class="token plain"> </span><span class="token function" style="color:#d73a49">install</span><br></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_wuS7 clean-btn">Copy</button></div></div></li><li><p>Test with hot reloading.</p><div class="codeBlockContainer_I0IT language-bash theme-code-block"><div class="codeBlockContent_wNvx bash"><pre tabindex="0" class="prism-code language-bash codeBlock_jd64 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_mRuA"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">yarn</span><span class="token plain"> dev</span><br></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_wuS7 clean-btn">Copy</button></div></div></li><li><p>Build site for production.</p><div class="codeBlockContainer_I0IT language-bash theme-code-block"><div class="codeBlockContent_wNvx bash"><pre tabindex="0" class="prism-code language-bash codeBlock_jd64 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_mRuA"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">yarn</span><span class="token plain"> build</span><br></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_wuS7 clean-btn">Copy</button></div></div></li><li><p>Preview the production build</p><div class="codeBlockContainer_I0IT language-bash theme-code-block"><div class="codeBlockContent_wNvx bash"><pre tabindex="0" class="prism-code language-bash codeBlock_jd64 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_mRuA"><span class="token-line" style="color:#393A34"><span class="token function" style="color:#d73a49">yarn</span><span class="token plain"> preview</span><br></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_wuS7 clean-btn">Copy</button></div></div></li></ol><h3 class="anchor anchorWithStickyNavbar_mojV" id="testing">Testing<a class="hash-link" href="#testing" title="Direct link to heading"></a></h3><p>After building the backend and the frontend code, run the following command to start a local test server:</p><div class="codeBlockContainer_I0IT language-bash theme-code-block"><div class="codeBlockContent_wNvx bash"><pre tabindex="0" class="prism-code language-bash codeBlock_jd64 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_mRuA"><span class="token-line" style="color:#393A34"><span class="token plain">firebase serve</span><br></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_wuS7 clean-btn">Copy</button></div></div><h3 class="anchor anchorWithStickyNavbar_mojV" id="deployment">Deployment<a class="hash-link" href="#deployment" title="Direct link to heading"></a></h3><p>Deploying the code to production is as simple as running the following command:</p><div class="codeBlockContainer_I0IT language-bash theme-code-block"><div class="codeBlockContent_wNvx bash"><pre tabindex="0" class="prism-code language-bash codeBlock_jd64 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_mRuA"><span class="token-line" style="color:#393A34"><span class="token plain">firebase deploy</span><br></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_wuS7 clean-btn">Copy</button></div></div><p>The deployment could take a while so be patient.</p><p>Deploying frontend code only:</p><div class="codeBlockContainer_I0IT language-bash theme-code-block"><div class="codeBlockContent_wNvx bash"><pre tabindex="0" class="prism-code language-bash codeBlock_jd64 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_mRuA"><span class="token-line" style="color:#393A34"><span class="token plain">firebase deploy --only hosting</span><br></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_wuS7 clean-btn">Copy</button></div></div><p>Deploying backend code only:</p><div class="codeBlockContainer_I0IT language-bash theme-code-block"><div class="codeBlockContent_wNvx bash"><pre tabindex="0" class="prism-code language-bash codeBlock_jd64 thin-scrollbar" style="color:#393A34;background-color:#f6f8fa"><code class="codeBlockLines_mRuA"><span class="token-line" style="color:#393A34"><span class="token plain">firebase deploy --only functions</span><br></span></code></pre><button type="button" aria-label="Copy code to clipboard" class="copyButton_wuS7 clean-btn">Copy</button></div></div><h2 class="anchor anchorWithStickyNavbar_mojV" id="more-info">More info<a class="hash-link" href="#more-info" title="Direct link to heading"></a></h2><ul><li><a href="https://discord.com/developers/docs" target="_blank" rel="noopener noreferrer">discord developers documentation</a></li><li><a href="https://firebase.google.com/docs" target="_blank" rel="noopener noreferrer">firebase admin sdk documentation</a></li><li><a href="https://firebase.google.com/docs/functions/typescript" target="_blank" rel="noopener noreferrer">firebase functions documentation</a></li></ul></div><footer class="theme-doc-footer docusaurus-mt-lg"><div class="theme-doc-footer-edit-meta-row row"><div class="col"><a href="https://github.com/llama-bot/llama-bot-docs/edit/master/docs/4-web-interface/2-setting-up.md" target="_blank" rel="noreferrer noopener" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_dcUD" aria-hidden="true"><g><path d="m34.5 11.7l-3 3.1-6.3-6.3 3.1-3q0.5-0.5 1.2-0.5t1.1 0.5l3.9 3.9q0.5 0.4 0.5 1.1t-0.5 1.2z m-29.5 17.1l18.4-18.5 6.3 6.3-18.4 18.4h-6.3v-6.2z"></path></g></svg>Edit this page</a></div><div class="col lastUpdated_foO9"></div></div></footer></article><nav class="pagination-nav docusaurus-mt-lg" aria-label="Docs pages navigation"><div class="pagination-nav__item"><a class="pagination-nav__link" href="/docs/web-interface/overview"><div class="pagination-nav__sublabel">Previous</div><div class="pagination-nav__label">Overview</div></a></div><div class="pagination-nav__item pagination-nav__item--next"><a class="pagination-nav__link" href="/docs/web-interface/api"><div class="pagination-nav__sublabel">Next</div><div class="pagination-nav__label">API</div></a></div></nav></div></div><div class="col col--3"><div class="tableOfContents_cNA8 thin-scrollbar theme-doc-toc-desktop"><ul class="table-of-contents table-of-contents__left-border"><li><a href="#steps" class="table-of-contents__link toc-highlight">Steps</a><ul><li><a href="#pre-requirements" class="table-of-contents__link toc-highlight">Pre-requirements</a></li><li><a href="#discord" class="table-of-contents__link toc-highlight">Discord</a></li><li><a href="#firebase" class="table-of-contents__link toc-highlight">Firebase</a></li><li><a href="#local" class="table-of-contents__link toc-highlight">Local</a></li><li><a href="#functions" class="table-of-contents__link toc-highlight">Functions</a></li><li><a href="#frontend" class="table-of-contents__link toc-highlight">Frontend</a></li><li><a href="#testing" class="table-of-contents__link toc-highlight">Testing</a></li><li><a href="#deployment" class="table-of-contents__link toc-highlight">Deployment</a></li></ul></li><li><a href="#more-info" class="table-of-contents__link toc-highlight">More info</a></li></ul></div></div></div></div></main></div></div><footer class="footer footer--dark"><div class="container container-fluid"><div class="footer__bottom text--center"><div class="footer__copyright">Created by <b>developomp</b>. Built with <a href="https://github.com/facebook/docusaurus">Docusaurus</a>.</div></div></div></footer></div>
<script src="/assets/js/runtime~main.3cd2c3e4.js"></script>
<script src="/assets/js/main.b812c6db.js"></script>
</body>
</html>