| <!doctype html> |
| <html lang="en" dir="ltr" class="blog-wrapper blog-post-page plugin-blog plugin-id-default" data-has-hydrated="false"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="generator" content="Docusaurus v3.1.1"> |
| <title data-rh="true">Apache Answer Frontend Configuration Guide | Answer</title><meta data-rh="true" name="viewport" content="width=device-width,initial-scale=1"><meta data-rh="true" name="twitter:card" content="summary_large_image"><meta data-rh="true" property="og:url" content="https://answer.apache.org/blog/apache-answer-frontend-configuration-guide"><meta data-rh="true" property="og:locale" content="en"><meta data-rh="true" property="og:locale:alternate" content="zh_CN"><meta data-rh="true" name="docusaurus_locale" content="en"><meta data-rh="true" name="docusaurus_tag" content="default"><meta data-rh="true" name="docsearch:language" content="en"><meta data-rh="true" name="docsearch:docusaurus_tag" content="default"><meta data-rh="true" name="keywords" content="Free, Open-source, Q&A Platform, Knowledge Sharing Platform, Community Forum, Knowledge Base, Developer Hub, Support Center"><meta data-rh="true" name="http-equiv" content="Content-Security-Policy" value="default-src 'self' data: blob: 'unsafe-inline' https://www.apachecon.com/ https://www.communityovercode.org/ https://analytics.apache.org/ https://api-js.mixpanel.com/track/; connect-src https://api-js.mixpanel.com/track/;"><meta data-rh="true" property="og:site_name" content="Answer"><meta data-rh="true" property="og:type" content="article"><meta data-rh="true" property="og:title" content="Apache Answer Frontend Configuration Guide | Answer"><meta data-rh="true" name="description" content="Answer Frontend Configuration Step-by-Step Guide"><meta data-rh="true" property="og:description" content="Answer Frontend Configuration Step-by-Step Guide"><meta data-rh="true" property="og:image" content="https://answer.apache.org/assets/images/2024-08-16-cover@4x-95269a11343d277de5ed5b94f491a5e9.png"><meta data-rh="true" name="twitter:image" content="https://answer.apache.org/assets/images/2024-08-16-cover@4x-95269a11343d277de5ed5b94f491a5e9.png"><meta data-rh="true" property="article:published_time" content="2024-08-16T00:00:00.000Z"><meta data-rh="true" property="article:author" content="https://github.com/CHENJUaaa,https://github.com/IamMelody233,https://github.com/PrimmaAnna"><link data-rh="true" rel="icon" href="/img/favicon.ico"><link data-rh="true" rel="canonical" href="https://answer.apache.org/blog/apache-answer-frontend-configuration-guide"><link data-rh="true" rel="alternate" href="https://answer.apache.org/blog/apache-answer-frontend-configuration-guide" hreflang="en"><link data-rh="true" rel="alternate" href="https://answer.apache.org/zh-CN/blog/apache-answer-frontend-configuration-guide" hreflang="zh-CN"><link data-rh="true" rel="alternate" href="https://answer.apache.org/blog/apache-answer-frontend-configuration-guide" hreflang="x-default"><script data-rh="true">var _paq=window._paq=window._paq||[];_paq.push(["setDoNotTrack",!0]),_paq.push(["disableCookies"]),_paq.push(["trackPageView"]),_paq.push(["enableLinkTracking"]),function(){var a="https://analytics.apache.org/";_paq.push(["setTrackerUrl",a+"matomo.php"]),_paq.push(["setSiteId","75"]);var e=document,p=e.createElement("script"),t=e.getElementsByTagName("script")[0];p.async=!0,p.src=a+"matomo.js",t.parentNode.insertBefore(p,t)}()</script><link rel="search" type="application/opensearchdescription+xml" title="Apache Answer" href="/opensearch.xml"> |
| <link rel="alternate" type="application/rss+xml" href="/blog/rss.xml" title="Apache Answer RSS Feed"> |
| <link rel="alternate" type="application/atom+xml" href="/blog/atom.xml" title="Apache Answer Atom Feed"> |
| |
| |
| |
| <link rel="stylesheet" href="/fonts/fonts.css"><link rel="stylesheet" href="/assets/css/styles.6ce1d592.css"> |
| <script src="/assets/js/runtime~main.15e42951.js" defer="defer"></script> |
| <script src="/assets/js/main.546ee55a.js" defer="defer"></script> |
| </head> |
| <body class="navigation-with-keyboard"> |
| <script>!function(){function t(t){document.documentElement.setAttribute("data-theme",t)}var e=function(){try{return new URLSearchParams(window.location.search).get("docusaurus-theme")}catch(t){}}()||function(){try{return localStorage.getItem("theme")}catch(t){}}();t(null!==e?e:"light")}(),function(){try{const c=new URLSearchParams(window.location.search).entries();for(var[t,e]of c)if(t.startsWith("docusaurus-data-")){var a=t.replace("docusaurus-data-","data-");document.documentElement.setAttribute(a,e)}}catch(t){}}()</script><div id="__docusaurus"><div role="region" aria-label="Skip to main content"><a class="skipToContent_D8pK" href="#__docusaurus_skipToContent_fallback">Skip to main content</a></div><nav aria-label="Main" class="navbar navbar--fixed-top navbar--primary"><div class="navbar__inner"><div class="navbar__items"><button aria-label="Toggle navigation bar" aria-expanded="false" class="navbar__toggle clean-btn" type="button"><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="/"><div class="navbar__logo"><img src="/img/logo.svg" alt="Answer Logo" class="themedImage_Pn4p themedImage--light_PnYV"><img src="/img/logo.svg" alt="Answer Logo" class="themedImage_Pn4p themedImage--dark_eYgw"></div></a><a class="navbar__item navbar__link" href="/docs">Docs<!-- --></a><a class="navbar__item navbar__link" href="/plugins">Plugins<!-- --></a><a aria-current="page" class="navbar__item navbar__link navbar__link--active" href="/blog">Blog<!-- --></a><a class="navbar__item navbar__link" href="/download">Download<!-- --></a><div class="navbar__item dropdown dropdown--hoverable"><a class="navbar__link" aria-haspopup="true" aria-expanded="false" role="button" href="/community/support">Community<!-- --></a><ul class="dropdown__menu"><li><a class="dropdown__link" href="/community/support">Support<!-- --></a></li><li><a href="https://meta.answer.dev" target="_blank" rel="noopener noreferrer" class="dropdown__link">Q&A Community<!-- --></a></li><li><a class="dropdown__link" href="/community/team">Team<!-- --></a></li><li><a class="dropdown__link" href="/community/security">Security<!-- --></a></li><li><a class="dropdown__link" href="/community/security-model">Security Model<!-- --></a></li><li><a class="dropdown__link" href="/community/contributing">Contributing<!-- --></a></li><li><a href="https://github.com/apache/answer/projects" target="_blank" rel="noopener noreferrer" class="dropdown__link">Roadmap<!-- --></a></li></ul></div><div class="navbar__item dropdown dropdown--hoverable"><a href="https://www.apache.org/" target="_blank" rel="noopener noreferrer" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link">ASF<!-- --></a><ul class="dropdown__menu"><li><a href="https://www.apache.org" target="_blank" rel="noopener noreferrer" class="dropdown__link">Foundation<!-- --></a></li><li><a href="https://www.apache.org/licenses/" target="_blank" rel="noopener noreferrer" class="dropdown__link">License<!-- --></a></li><li><a href="https://www.apache.org/events/current-event.html" target="_blank" rel="noopener noreferrer" class="dropdown__link">Events<!-- --></a></li><li><a href="https://www.apache.org/foundation/sponsorship.html" target="_blank" rel="noopener noreferrer" class="dropdown__link">Sponsorship<!-- --></a></li><li><a href="https://privacy.apache.org/policies/privacy-policy-public.html" target="_blank" rel="noopener noreferrer" class="dropdown__link">Privacy<!-- --></a></li><li><a class="dropdown__link" href="/community/security">Security<!-- --></a></li><li><a href="https://www.apache.org/foundation/thanks.html" target="_blank" rel="noopener noreferrer" class="dropdown__link">Thanks<!-- --></a></li></ul></div></div><div class="navbar__items navbar__items--right"><div class="navbar__item dropdown dropdown--hoverable dropdown--right"><a href="#" aria-haspopup="true" aria-expanded="false" role="button" class="navbar__link bi bi-translate"><svg viewBox="0 0 24 24" width="20" height="20" aria-hidden="true" class="iconLanguage_DSK9"><path fill="currentColor" d="M12.87 15.07l-2.54-2.51.03-.03c1.74-1.94 2.98-4.17 3.71-6.53H17V4h-7V2H8v2H1v1.99h11.17C11.5 7.92 10.44 9.75 9 11.35 8.07 10.32 7.3 9.19 6.69 8h-2c.73 1.63 1.73 3.17 2.98 4.56l-5.09 5.02L4 19l5-5 3.11 3.11.76-2.04zM18.5 10h-2L12 22h2l1.12-3h4.75L21 22h2l-4.5-12zm-2.62 7l1.62-4.33L19.12 17h-3.24z"></path></svg>English<!-- --></a><ul class="dropdown__menu"><li><a href="/blog/apache-answer-frontend-configuration-guide" target="_self" rel="noopener noreferrer" class="dropdown__link dropdown__link--active" lang="en">English<!-- --></a></li><li><a href="/zh-CN/blog/apache-answer-frontend-configuration-guide" target="_self" rel="noopener noreferrer" class="dropdown__link" lang="zh-CN">简体中文<!-- --></a></li></ul></div><a href="https://twitter.com/answerdev" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link bi bi-twitter-x navbar-icon-link"></a><a href="https://discord.gg/a6PZZbfnFx" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link bi bi-discord navbar-icon-link"></a><a href="https://github.com/apache/answer" target="_blank" rel="noopener noreferrer" class="navbar__item navbar__link bi bi-github navbar-icon-link"></a><div class="searchBox_H2mL"></div></div></div><div role="presentation" class="navbar-sidebar__backdrop"></div></nav><div id="__docusaurus_skipToContent_fallback" class="main-wrapper mainWrapper_eExm"><div class="container"><div class="justify-content-end mb-4 row"><div class="col-lg-8 col-md-12"><div class="px-0 px-lg-5 pt-5"><header><div class="d-flex align-items-center mb-3"><a class="me-2" href="/blog">Blog<!-- --></a><span class="me-2">/</span><a class="me-2" href="/blog/category/tutorials">Tutorials<!-- --></a></div><h1 class="mb-3"><a class="text-body" href="/blog/apache-answer-frontend-configuration-guide">Apache Answer Frontend Configuration Guide</a></h1><div class="d-flex align-items-center text-secondary"><div class="me-3">Chen Jiaji</div><div class="me-3">Zhu Xuanlyu</div><div class="me-3">Anne Zhu</div><time class="me-3" datetime="2024-08-16T00:00:00.000Z">August 16, 2024</time><div>2 min read<!-- --></div></div></header></div></div><div class="col-lg-2 col-md-12"></div></div><div class="justify-content-end row"><div class="col-lg-8 col-md-12"><article class="px-0 px-lg-5 pb-5 mb-5" itemprop="blogPost" itemscope="" itemtype="http://schema.org/BlogPosting"><meta itemprop="image" content="https://answer.apache.org/2024-08-16-cover@4x.png"><div id="__blog-post-container" class="markdown" itemprop="articleBody"><div class="mb-4"><img decoding="async" loading="lazy" src="/assets/images/2024-08-16-cover@4x-95269a11343d277de5ed5b94f491a5e9.png" class="rounded img_RAU7" width="1280px" height="720px"></div><p>Our official website provides <!-- --><a href="https://answer.apache.org/docs/development" target="_blank" rel="noopener noreferrer">Developer Guides</a> to help developers quickly set up both the frontend and backend of Apache Answer. In today's blog post, we will break down the steps for configuring the frontend and backend in detail.<!-- --></p> |
| <!-- --><p>In the Answer community, we welcome and respect various <!-- --><a href="https://answer.apache.org/community/contributing/" target="_blank" rel="noopener noreferrer">Contributing Methods</a>. Whether you're a developer or not, you can follow the steps outlined in the article to complete the Answer frontend setup.<!-- --></p> |
| <!-- --><h3 class="anchor anchorWithStickyNavbar_loeA" id="1-download-nodejs-and-pnpm">1. Download Node.js and pnpm<!-- --><a href="#1-download-nodejs-and-pnpm" class="hash-link" aria-label="Direct link to 1. Download Node.js and pnpm" title="Direct link to 1. Download Node.js and pnpm"></a></h3> |
| <!-- --><p>Click <!-- --><a href="https://nodejs.org/en" target="_blank" rel="noopener noreferrer">here</a> to download Node.js, and select <!-- --><code>Node.js runtime</code> during installation. It is recommended to install it in the default location. |
| <!-- --><img decoding="async" loading="lazy" alt="node install" src="/assets/images/node-install-4d282d94bd07b1288593740206962174.png" width="921" height="720" class="img_RAU7"></p> |
| <!-- --><p>After Node.js is installed, locate the <!-- --><code>Node.js command prompt</code>. |
| <!-- --><img decoding="async" loading="lazy" alt="node command" src="/assets/images/node-command-995a590c3a872bfe54dd673b59a474c8.png" width="637" height="284" class="img_RAU7"></p> |
| <!-- --><p>Open the Node.js command prompt and enter <!-- --><code>npm install -g pnpm</code>. If you see the following screen, it means pnpm has been successfully installed. |
| <!-- --><img decoding="async" loading="lazy" alt="pnpm install" src="/assets/images/pnpm-install-a9367ed47f4ff2e360e2b610097af2bf.png" width="1280" height="372" class="img_RAU7"> |
| <!-- --><em>Note: pnpm can be installed using various methods suitable for different operating systems. For more details, please refer to its official website.</em></p> |
| <!-- --><h3 class="anchor anchorWithStickyNavbar_loeA" id="2-clone-the-repository">2. Clone the Repository<!-- --><a href="#2-clone-the-repository" class="hash-link" aria-label="Direct link to 2. Clone the Repository" title="Direct link to 2. Clone the Repository"></a></h3> |
| <!-- --><p>Click <!-- --><a href="https://github.com/apache/answer" target="_blank" rel="noopener noreferrer">here</a> to visit the Apache Answer GitHub repository.<!-- --></p> |
| <!-- --><h4 class="anchor anchorWithStickyNavbar_loeA" id="21-fork-answer-porject">2.1 Fork Answer Porject<!-- --><a href="#21-fork-answer-porject" class="hash-link" aria-label="Direct link to 2.1 Fork Answer Porject" title="Direct link to 2.1 Fork Answer Porject"></a></h4> |
| <!-- --><p>Log in to your GitHub account and click 'Fork' to fork the entire Answer project. |
| <!-- --><img decoding="async" loading="lazy" alt="fork answer" src="/assets/images/fork-answer-8136ca68f76bea32ca2c4d4ae99b4de2.png" width="1280" height="713" class="img_RAU7"></p> |
| <!-- --><h4 class="anchor anchorWithStickyNavbar_loeA" id="22-install-gitgit-bash">2.2 Install Git/Git Bash<!-- --><a href="#22-install-gitgit-bash" class="hash-link" aria-label="Direct link to 2.2 Install Git/Git Bash" title="Direct link to 2.2 Install Git/Git Bash"></a></h4> |
| <!-- --><p>Click <!-- --><a href="https://git-scm.com/downloads" target="_blank" rel="noopener noreferrer">here</a> and choose to download Git according to your operating system.<!-- --></p> |
| <!-- --><h4 class="anchor anchorWithStickyNavbar_loeA" id="23-create-and-configuratie-ssh">2.3 Create and Configuratie SSH<!-- --><a href="#23-create-and-configuratie-ssh" class="hash-link" aria-label="Direct link to 2.3 Create and Configuratie SSH" title="Direct link to 2.3 Create and Configuratie SSH"></a></h4> |
| <!-- --><p>You can browse GitHub's documentation on <!-- --><a href="https://docs.github.com/en/authentication/connecting-to-github-with-ssh" target="_blank" rel="noopener noreferrer">connecting to GitHub with SSH</a>. You may skip the section in the documentation about generating a new SSH key for hardware security keys.<!-- --></p> |
| <!-- --><p>The following image shows the SSH key after configuration is complete. |
| <!-- --><img decoding="async" loading="lazy" alt="ssh configuration" src="/assets/images/ssh-configuration-1f6870dad6aaba69b74b932551a63fd7.png" width="1280" height="352" class="img_RAU7"></p> |
| <!-- --><h4 class="anchor anchorWithStickyNavbar_loeA" id="24-clone-answer-project">2.4 Clone Answer Project<!-- --><a href="#24-clone-answer-project" class="hash-link" aria-label="Direct link to 2.4 Clone Answer Project" title="Direct link to 2.4 Clone Answer Project"></a></h4> |
| <!-- --><p>In the Answer GitHub page, find the 'Code' section. Click to expand and copy the SSH address of the Answer repository |
| <!-- --><img decoding="async" loading="lazy" alt="copy ssh" src="/assets/images/copy-ssh-dca3851f8b808e04cc852369a526622c.png" width="1065" height="720" class="img_RAU7"></p> |
| <!-- --><p>Next, open <!-- --><code>Git Bash</code> and enter the following command to clone the project.<!-- --></p> |
| <!-- --><div class="codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-text codeBlock_qGQc thin-scrollbar"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token plain">git clone <Answer SSH address></span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div> |
| <!-- --><p>As shown in the image below, after completing this step, the project will be successfully cloned to your local folder. |
| <!-- --><img decoding="async" loading="lazy" alt="clone answer" src="/assets/images/clone-answer-b84011546c149ae70795a0288f14bb3a.png" width="774" height="284" class="img_RAU7"></p> |
| <!-- --><h3 class="anchor anchorWithStickyNavbar_loeA" id="3-install-dependencies-and-build-local-packages">3. Install Dependencies and Build Local Packages<!-- --><a href="#3-install-dependencies-and-build-local-packages" class="hash-link" aria-label="Direct link to 3. Install Dependencies and Build Local Packages" title="Direct link to 3. Install Dependencies and Build Local Packages"></a></h3> |
| <!-- --><p>We will refer to the Answer project folder as the root directory. Open the <!-- --><code>command line terminal</code> and run the following commands, then navigate to the <!-- --><code>ui</code> subdirectory from that directory.<!-- --></p> |
| <!-- --><div class="codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-text codeBlock_qGQc thin-scrollbar"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token plain">cd ./ui</span><br></span><span class="token-line" style="color:#393A34"><span class="token plain">pnpm install</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div> |
| <!-- --><p><strong>Note: For Windows users, you might encounter the following error:</strong> |
| <!-- --><img decoding="async" loading="lazy" alt="windows-error" src="/assets/images/windows-error-e9f8dbb8076dca27f68f32331e1a94f0.png" width="1280" height="245" class="img_RAU7"> |
| This issue is caused by system permissions. You can first enter the following command:<!-- --></p> |
| <!-- --><div class="codeBlockContainer_APcc theme-code-block" style="--prism-color:#393A34;--prism-background-color:#f6f8fa"><div class="codeBlockContent_m3Ux"><pre tabindex="0" class="prism-code language-text codeBlock_qGQc thin-scrollbar"><code class="codeBlockLines_p187"><span class="token-line" style="color:#393A34"><span class="token plain">Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser</span><br></span></code></pre><div class="buttonGroup_6DOT"><button type="button" aria-label="Copy code to clipboard" title="Copy" class="clean-btn"><span class="copyButtonIcons_FhaS" aria-hidden="true"><svg viewBox="0 0 24 24" class="copyButtonIcon_phi_"><path fill="currentColor" d="M19,21H8V7H19M19,5H8A2,2 0 0,0 6,7V21A2,2 0 0,0 8,23H19A2,2 0 0,0 21,21V7A2,2 0 0,0 19,5M16,1H4A2,2 0 0,0 2,3V17H4V3H16V1Z"></path></svg><svg viewBox="0 0 24 24" class="copyButtonSuccessIcon_FfTR"><path fill="currentColor" d="M21,7L9,19L3.5,13.5L4.91,12.09L9,16.17L19.59,5.59L21,7Z"></path></svg></span></button></div></div></div> |
| <!-- --><p>This command sets the PowerShell execution policy for the current user to <!-- --><code>RemoteSigned</code>, which means local scripts can run, while remote scripts must be signed.<!-- --></p> |
| <!-- --><p>Then you can run it successfully. Once completed, it indicates that the installation is finished. |
| <!-- --><img decoding="async" loading="lazy" alt="install complete" src="/assets/images/install-complete-8fc2bc1fb625db53cf1f85f2d646f557.png" width="1280" height="262" class="img_RAU7"></p> |
| <!-- --><h3 class="anchor anchorWithStickyNavbar_loeA" id="4-run-the-frontend">4. Run the Frontend<!-- --><a href="#4-run-the-frontend" class="hash-link" aria-label="Direct link to 4. Run the Frontend" title="Direct link to 4. Run the Frontend"></a></h3> |
| <!-- --><p>After configuration is complete, navigate to the <!-- --><code>ui</code> folder and enter <!-- --><code>pnpm start</code> to run Answer. |
| <!-- --><img decoding="async" loading="lazy" alt="pnpm start" src="/assets/images/pnpm-start-4655a9e74676b26d13c5d0fb76090e85.png" width="1280" height="572" class="img_RAU7"></p> |
| <!-- --><p>Congratulations! You have completed the frontend configuration for Answer. If you have any questions, feel free to join our <!-- --><a href="https://meta.answer.dev/" target="_blank" rel="noopener noreferrer">community</a> and engage with our team.<!-- --></p></div><div class="mt-3"><div class="d-flex align-items-center text-secondary"><span>Share to<!-- --></span><button aria-label="twitter" class="react-share__ShareButton shareBtn_lEr0" style="background-color:transparent;border:none;padding:0;font:inherit;color:inherit;cursor:pointer"><i class="br bi-twitter" style="font-size:16px"></i></button><button title="Apache Answer Frontend Configuration Guide" aria-label="facebook" class="react-share__ShareButton shareBtn_lEr0" style="background-color:transparent;border:none;padding:0;font:inherit;color:inherit;cursor:pointer"><i class="br bi-facebook" style="font-size:16px"></i></button><button aria-label="linkedin" class="react-share__ShareButton shareBtn_lEr0" style="background-color:transparent;border:none;padding:0;font:inherit;color:inherit;cursor:pointer"><i class="br bi-linkedin" style="font-size:16px"></i></button></div><div class="mt-4"><a href="https://github.com/apache/answer-website/edit/main/blog/apache-answer-frontend-configuration-guide/index.md" target="_blank" rel="noopener noreferrer" class="theme-edit-this-page"><svg fill="currentColor" height="20" width="20" viewBox="0 0 40 40" class="iconEdit_N_05" 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></article></div><div class="col-lg-2 col-md-12"><div class="tableOfContents_PDf4 thin-scrollbar"><ul class="border-0 p-0 table-of-contents table-of-contents__left-border"><li class="m-0 mb-2"><a href="#1-download-nodejs-and-pnpm" class="fs-14 text-secondary table-of-contents__link toc-highlight">1. Download Node.js and pnpm</a></li><li class="m-0 mb-2"><a href="#2-clone-the-repository" class="fs-14 text-secondary table-of-contents__link toc-highlight">2. Clone the Repository</a></li><li class="m-0 mb-2"><a href="#3-install-dependencies-and-build-local-packages" class="fs-14 text-secondary table-of-contents__link toc-highlight">3. Install Dependencies and Build Local Packages</a></li><li class="m-0 mb-2"><a href="#4-run-the-frontend" class="fs-14 text-secondary table-of-contents__link toc-highlight">4. Run the Frontend</a></li></ul></div></div></div></div></div><footer class="footer"><div class="container py-3"><div class="d-flex justify-content-between flex-wrap text-center"><div><div class="mb-3"><a href="https://www.apache.org/" target="_blank"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 256 103.8" width="180" role="img"><path d="M255.178 30.45a2.7 2.7 0 0 1 .822 1.983 2.77 2.77 0 0 1-.822 2c-.55.567-1.214.83-1.997.83s-1.444-.273-2-.822a2.72 2.72 0 0 1-.815-1.983 2.77 2.77 0 0 1 .822-2c.55-.567 1.2-.83 2-.83a2.71 2.71 0 0 1 1.99.823zm-.237 3.74a2.43 2.43 0 0 0 .718-1.75 2.4 2.4 0 0 0-.711-1.742 2.36 2.36 0 0 0-1.746-.722 2.34 2.34 0 0 0-1.75.726 2.39 2.39 0 0 0-.715 1.75c0 .683.237 1.264.708 1.746a2.34 2.34 0 0 0 1.742.722c.7 0 1.27-.244 1.753-.73zm-.395-2.292c0 .503-.22.82-.66.948l.808 1.095h-.654l-.73-1.016h-.668v1.016h-.528V30.9h1.142c.46 0 .8.08 1 .237s.298.4.298.758zm-.68.427c.108-.086.158-.233.158-.43s-.054-.338-.162-.417-.302-.115-.575-.115h-.647v1.095h.63c.3 0 .492-.047.596-.133zM64.78 17.952v5.58h-.718v-5.58h-2.04v-.7h4.8v.7h-2.05zm10.006 5.58V20.77h-3.778v2.762H70.3v-6.275h.718v2.834h3.778v-2.834h.718v6.275h-.718zm5.718-5.58v2.062h3.164v.7h-3.164v2.148h3.656v.682h-4.375V17.27h4.26v.7h-3.54z" fill="#6d6e71"></path><path d="m56.55 66.532 14.988-35.83h2.877l14.988 35.83h-3.786L80.974 55.33H64.876l-4.594 11.202H56.55zM73.004 34.84l-7.367 17.714h14.535l-7.17-17.714zm20.268 31.692v-35.83h14.837c6.156 0 10.6 5.704 10.6 11.253 0 5.854-4.138 11.353-10.294 11.353h-11.66v13.22H93.27zm3.484-16.353H108.2c4.238 0 6.964-3.886 6.964-8.225 0-4.493-3.33-8.124-7.266-8.124H96.756v16.35zm20 16.353 14.988-35.83h2.877l14.988 35.83h-3.786L141.17 55.33h-16.098l-4.594 11.202h-3.732zM133.2 34.84l-7.367 17.714h14.535L133.2 34.84zm33.357-4.343c6.357 0 11 3.23 13.22 7.823l-2.827 1.717c-2.27-4.745-6.713-6.357-10.6-6.357-8.58 0-13.27 7.672-13.27 14.888 0 7.923 5.804 15.1 13.422 15.1 4.037 0 8.782-2.018 11.052-6.663l2.927 1.512c-2.32 5.348-8.68 8.326-14.18 8.326-9.84 0-16.755-9.385-16.755-18.468.004-8.627 6.2-17.865 17-17.865zm47.115.205v35.83h-3.534V49.777h-21.245v16.755h-3.48v-35.83h3.48V46.65h21.245V30.702h3.534zM245.836 63.4v3.128h-24.07V30.702h23.62v3.128H225.25v12.92h17.563v2.977H225.25v13.677h20.587z" fill="#d22128"></path><path d="M59.895 74.118c.424.126.797.298 1.113.5l-.37.812c-.323-.215-.668-.374-1.038-.48s-.718-.158-1.05-.158c-.488 0-.88.086-1.17.262s-.438.424-.438.743c0 .273.083.503.244.682a1.65 1.65 0 0 0 .61.42c.244.1.578.215 1.006.345l1.246.463a2.14 2.14 0 0 1 .808.639c.223.28.334.654.334 1.113 0 .42-.115.783-.34 1.1s-.55.557-.963.73-.894.26-1.437.26a4.13 4.13 0 0 1-1.577-.312 4.47 4.47 0 0 1-1.315-.84l.384-.776a3.72 3.72 0 0 0 1.196.787c.453.187.9.28 1.322.28.55 0 .98-.108 1.297-.32s.474-.5.474-.858c0-.28-.083-.514-.248-.697s-.37-.323-.614-.427a11.49 11.49 0 0 0-1.006-.345 10.77 10.77 0 0 1-1.243-.438 2.06 2.06 0 0 1-.808-.629c-.22-.277-.33-.643-.33-1.1a1.69 1.69 0 0 1 .323-1.027c.216-.294.524-.524.92-.686s.855-.244 1.372-.244c.442 0 .87.068 1.297.194zm11.225.332c.603.338 1.085.8 1.437 1.38a3.62 3.62 0 0 1 .532 1.914 3.63 3.63 0 0 1-.532 1.925 3.91 3.91 0 0 1-1.437 1.386 3.97 3.97 0 0 1-1.983.514 3.97 3.97 0 0 1-2.001-.514c-.603-.34-1.085-.805-1.437-1.386s-.532-1.225-.532-1.925a3.61 3.61 0 0 1 .532-1.922 3.8 3.8 0 0 1 1.437-1.376 4.063 4.063 0 0 1 2-.503c.715 0 1.376.165 1.983.507zm-3.527.715a3.1 3.1 0 0 0-1.128 1.081c-.28.453-.424.952-.424 1.498s.14 1.052.424 1.508a3.08 3.08 0 0 0 2.669 1.483c.557 0 1.067-.133 1.534-.4a3.05 3.05 0 0 0 1.117-1.085c.277-.456.417-.96.417-1.508a2.82 2.82 0 0 0-.417-1.501 3.06 3.06 0 0 0-1.117-1.078 3.04 3.04 0 0 0-1.53-.402 3.07 3.07 0 0 0-1.544.402zm10.94-.372v2.658h3.534v.833h-3.534v3.24h-.866V73.96h4.806v.833h-3.94zm10.968 0v6.73h-.866v-6.73h-2.457v-.833h5.797v.833H89.5zm13.645 6.73-2.04-6.372-2.07 6.372h-.88l-2.532-7.564h.93l2.08 6.562 2.05-6.55.866-.01 2.072 6.562 2.05-6.562h.898l-2.536 7.564h-.9zm7.74-1.9-.844 1.9h-.92l3.4-7.564h.898l3.38 7.564h-.937l-.844-1.9h-4.123zm2.054-4.67-1.684 3.836h3.4l-1.706-3.836zm11.36 4.17-.506.022h-2v2.4h-.862V73.96h2.873c.94 0 1.674.223 2.198.664s.783 1.07.783 1.88c0 .618-.147 1.14-.438 1.555s-.7.718-1.257.898l1.767 2.568h-.98l-1.566-2.4zm1.085-1.26c.37-.302.557-.747.557-1.33 0-.57-.187-1.002-.557-1.293s-.902-.438-1.6-.438h-2v3.513h2c.7 0 1.22-.15 1.6-.453zm7.077-3.06v2.485h3.814v.833h-3.814v2.6h4.4v.823h-5.276V73.96h5.132v.833h-4.267zm16.485-.01v2.658h3.534v.833h-3.534v3.24h-.866V73.96h4.806v.833h-3.94zm13.515-.343c.603.338 1.085.8 1.437 1.38a3.62 3.62 0 0 1 .532 1.914 3.63 3.63 0 0 1-.532 1.925 3.91 3.91 0 0 1-1.437 1.386 3.97 3.97 0 0 1-1.983.514 3.97 3.97 0 0 1-2.001-.514c-.603-.34-1.085-.805-1.437-1.386s-.532-1.225-.532-1.925a3.61 3.61 0 0 1 .532-1.922 3.8 3.8 0 0 1 1.437-1.376 4.063 4.063 0 0 1 2-.503c.718 0 1.38.165 1.983.507zm-3.523.715a3.1 3.1 0 0 0-1.128 1.081c-.28.453-.424.952-.424 1.498s.14 1.052.424 1.508a3.08 3.08 0 0 0 2.669 1.483c.557 0 1.067-.133 1.534-.4a3.05 3.05 0 0 0 1.117-1.085c.277-.456.417-.96.417-1.508a2.82 2.82 0 0 0-.417-1.501 3.06 3.06 0 0 0-1.117-1.078 3.04 3.04 0 0 0-1.53-.402 3.05 3.05 0 0 0-1.544.402zm15.426 5.565c-.564.557-1.34.837-2.327.837-.995 0-1.774-.28-2.338-.837s-.848-1.33-.848-2.32v-4.454h.866V78.4c0 .73.208 1.297.62 1.706s.98.614 1.7.614 1.286-.205 1.692-.6.6-.977.6-1.713v-4.454h.866v4.454c.004.995-.277 1.767-.84 2.324zm11.305.794-4.536-6.074v6.074h-.866V73.96h.898l4.536 6.08v-6.08h.855v7.564h-.887zm11.096-7.064c.6.334 1.056.787 1.397 1.36a3.7 3.7 0 0 1 .514 1.922c0 .704-.172 1.35-.514 1.925a3.67 3.67 0 0 1-1.412 1.36c-.6.33-1.264.496-1.993.496h-3.028V73.96h3.06c.73 0 1.386.165 1.975.5zm-4.17 6.242h2.205c.557 0 1.063-.126 1.52-.38s.82-.607 1.085-1.06.4-.952.4-1.508a2.86 2.86 0 0 0-.406-1.505c-.27-.45-.636-.8-1.1-1.063a3.07 3.07 0 0 0-1.53-.391h-2.173v5.908zm11.002-1.1-.844 1.9h-.92l3.4-7.564h.898l3.38 7.564h-.934l-.844-1.9h-4.127zm2.054-4.67-1.684 3.836h3.4l-1.706-3.836zm9.525-.15v6.73h-.862v-6.73h-2.457v-.833h5.797v.833h-2.478zm6.64 6.73V73.96h.866v7.564h-.866zm11.415-7.062c.603.338 1.085.8 1.437 1.38a3.62 3.62 0 0 1 .532 1.914 3.63 3.63 0 0 1-.532 1.925 3.91 3.91 0 0 1-1.437 1.386 3.97 3.97 0 0 1-1.983.514 3.97 3.97 0 0 1-2.001-.514c-.603-.34-1.085-.805-1.437-1.386s-.532-1.225-.532-1.925a3.61 3.61 0 0 1 .532-1.922 3.8 3.8 0 0 1 1.437-1.376 4.063 4.063 0 0 1 2-.503c.718 0 1.38.165 1.983.507zm-3.523.715a3.1 3.1 0 0 0-1.128 1.081c-.28.453-.424.952-.424 1.498s.14 1.052.424 1.508a3.08 3.08 0 0 0 2.669 1.483c.557 0 1.067-.133 1.534-.4a3.05 3.05 0 0 0 1.117-1.085c.277-.456.417-.96.417-1.508a2.82 2.82 0 0 0-.417-1.501 3.06 3.06 0 0 0-1.117-1.078 3.04 3.04 0 0 0-1.53-.402 3.06 3.06 0 0 0-1.544.402zm15.476 6.36-4.536-6.074v6.074h-.866V73.96h.898l4.536 6.08v-6.08h.855v7.564h-.887z" fill="#6d6e71"></path><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="39.134" y1="8.805" x2="60.867" y2="2.762"><stop offset="0" stop-color="#f69923"></stop><stop offset="0.312" stop-color="#f79a23"></stop><stop offset="0.838" stop-color="#e97826"></stop></linearGradient><path d="M44.18.492c-1.627.963-4.332 3.68-7.56 7.625l2.967 5.6c2.083-2.977 4.2-5.657 6.332-7.945l.25-.27-.25.27c-.7.76-2.784 3.204-5.944 8.06 3.042-.15 7.72-.776 11.533-1.426 1.135-6.357-1.113-9.267-1.113-9.267S47.532-1.487 44.18.492z" fill="url(#a)"></path><g fill="#be202e"><path d="m34.214 47.518-1.167.205.6-.093.578-.115z"></path><path d="m34.214 47.518-1.167.205.6-.093.578-.115z" opacity="0.35"></path><path d="m35.2 42.623.18-.03.743-.133-.923.158z"></path><path d="m35.2 42.623.18-.03.743-.133-.923.158z" opacity="0.35"></path></g><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="-8.437" y1="106.346" x2="35.767" y2="11.546"><stop offset="0.323" stop-color="#9e2064"></stop><stop offset="0.63" stop-color="#c92037"></stop><stop offset="0.751" stop-color="#cd2335"></stop><stop offset="1" stop-color="#e97826"></stop></linearGradient><path d="m30.838 28.184 2.737-4.935 2.906-4.838.172-.277 2.93-4.414-2.967-5.603-.675.833-2.654 3.43-3.153 4.37-3 4.443-2.658 4.195 3.86 7.625 2.5-4.83z" fill="url(#b)"></path><linearGradient id="c" gradientUnits="userSpaceOnUse" x1="6.407" y1="99.336" x2="32.749" y2="42.845"><stop offset="0" stop-color="#282662"></stop><stop offset="0.095" stop-color="#662e8d"></stop><stop offset="0.788" stop-color="#9f2064"></stop><stop offset="0.949" stop-color="#cd2032"></stop></linearGradient><path d="m13.253 71.15-1.782 4.978-1.34 3.886c1.14.52 2.05 1.886 2.913 3.434a6.23 6.23 0 0 0-2.02-4.278c5.607.25 10.437-1.164 12.934-5.265a10.68 10.68 0 0 0 .611-1.156c-1.135 1.44-2.543 2.05-5.2 1.904-.007 0-.01 0-.018.01.007 0 .01 0 .018-.01 3.9-1.746 5.858-3.423 7.586-6.2a28.98 28.98 0 0 0 1.214-2.177c-3.408 3.502-7.363 4.5-11.526 3.743l-3.12.34c-.086.262-.183.524-.28.8z" fill="url(#c)"></path><linearGradient id="d" gradientUnits="userSpaceOnUse" x1="-6.838" y1="100.61" x2="37.367" y2="5.81"><stop offset="0.323" stop-color="#9e2064"></stop><stop offset="0.63" stop-color="#c92037"></stop><stop offset="0.751" stop-color="#cd2335"></stop><stop offset="1" stop-color="#e97826"></stop></linearGradient><path d="m14.7 64.158 2.083-5.287 2.1-5.143 2.198-5.18 2.33-5.262 2.392-5.147.884-1.832 1.548-3.132.086-.165-3.86-7.625-.2.3L21.6 30.2 19 34.93l-2.105 4.1-.406.833-2.288 5-2.065 5.212-1.08 3.14-.772 2.58-1.48 6.045 3.875 7.665 1.58-4.166.453-1.178z" fill="url(#d)"></path><linearGradient id="e" gradientUnits="userSpaceOnUse" x1="-2.331" y1="94.294" x2="20.9" y2="44.474"><stop offset="0" stop-color="#282662"></stop><stop offset="0.095" stop-color="#662e8d"></stop><stop offset="0.788" stop-color="#9f2064"></stop><stop offset="0.949" stop-color="#cd2032"></stop></linearGradient><path d="M8.746 62.115a58.935 58.935 0 0 0-1.006 7.32l-.018.255c-1.2-1.94-4.454-3.836-4.446-3.814 2.32 3.365 4.084 6.706 4.342 9.985-1.243.255-2.945-.115-4.913-.837 2.05 1.886 3.592 2.406 4.2 2.546-1.895.118-3.845 1.4-5.82 2.902 2.9-1.178 5.226-1.645 6.9-1.268C5.32 86.7 2.66 95 0 103.8c.815-.24 1.3-.787 1.577-1.53.474-1.595 3.62-12.054 8.548-25.795l.542-1.512 1.62-4.414.384-1.027.007-.022-3.875-7.66-.057.273z" fill="url(#e)"></path><linearGradient id="f" gradientUnits="userSpaceOnUse" x1="2.974" y1="105.185" x2="47.178" y2="10.385"><stop offset="0.323" stop-color="#9e2064"></stop><stop offset="0.63" stop-color="#c92037"></stop><stop offset="0.751" stop-color="#cd2335"></stop><stop offset="1" stop-color="#e97826"></stop></linearGradient><path d="m28.935 33.654-.334.686-1.016 2.112-1.124 2.388-.575 1.243-1.756 3.9-2.227 5.13-2.187 5.255-2.13 5.326-1.94 5.032-2.1 5.645 3.12-.34L16.48 70c3.732-.467 8.695-3.254 11.903-6.698 1.476-1.588 2.82-3.46 4.06-5.65.923-1.63 1.8-3.44 2.615-5.44a78.984 78.984 0 0 0 2.083-5.696c-.858.453-1.84.783-2.924 1.013l-.578.1a14.35 14.35 0 0 1-.596.093c3.488-1.34 5.682-3.922 7.277-7.1-.916.625-2.403 1.44-4.188 1.835a9.65 9.65 0 0 1-.743.133l-.187.03h.007c1.207-.507 2.227-1.07 3.1-1.738.2-.144.374-.3.55-.442a10.67 10.67 0 0 0 .772-.736 10.25 10.25 0 0 0 .456-.51c.345-.413.672-.858.973-1.34a13.71 13.71 0 0 0 .273-.453l.334-.657a37.57 37.57 0 0 0 1.185-2.615c.154-.38.3-.736.406-1.067l.133-.38c.122-.366.223-.693.302-.98.12-.43.2-.772.23-1.02-.12.093-.255.187-.406.277-1.052.628-2.855 1.2-4.306 1.465l2.866-.316-2.866.316c-.022 0-.043.01-.065.01l-.438.072c.025-.01.05-.025.075-.036l-9.805 1.074a.405.405 0 0 1-.05.1z" fill="url(#f)"></path><linearGradient id="g" gradientUnits="userSpaceOnUse" x1="-0.255" y1="110.838" x2="43.949" y2="16.039"><stop offset="0.323" stop-color="#9e2064"></stop><stop offset="0.63" stop-color="#c92037"></stop><stop offset="0.751" stop-color="#cd2335"></stop><stop offset="1" stop-color="#e97826"></stop></linearGradient><path d="m39.972 13.832-2.852 4.58-.162.273-2.812 4.92-2.67 4.992-2.493 4.95 9.805-1.074c2.855-1.315 4.134-2.503 5.373-4.224l.988-1.483 2.877-5.025 2.18-4.795.866-2.597.427-1.943c-3.807.65-8.487 1.275-11.53 1.426z" fill="url(#g)"></path><g fill="#be202e"><path d="m33.636 47.63-.596.093.596-.093z"></path><path d="m33.636 47.63-.596.093.596-.093z" opacity="0.35"></path></g><linearGradient id="h" gradientUnits="userSpaceOnUse" x1="5.892" y1="106.546" x2="50.096" y2="11.746"><stop offset="0.323" stop-color="#9e2064"></stop><stop offset="0.63" stop-color="#c92037"></stop><stop offset="0.751" stop-color="#cd2335"></stop><stop offset="1" stop-color="#e97826"></stop></linearGradient><path d="m33.636 47.63-.596.093.596-.093z" fill="url(#h)"></path><g fill="#be202e"><path d="m35.198 42.626.187-.03-.187.03z"></path><path d="m35.198 42.626.187-.03-.187.03z" opacity="0.35"></path></g><linearGradient id="i" gradientUnits="userSpaceOnUse" x1="5.558" y1="106.39" x2="49.762" y2="11.59"><stop offset="0.323" stop-color="#9e2064"></stop><stop offset="0.63" stop-color="#c92037"></stop><stop offset="0.751" stop-color="#cd2335"></stop><stop offset="1" stop-color="#e97826"></stop></linearGradient><path d="m35.198 42.626.187-.03-.187.03z" fill="url(#i)"></path><g fill="#be202e"><path d="M35.206 42.623z"></path><path d="M35.206 42.623z" opacity="0.35"></path></g><linearGradient id="j" gradientUnits="userSpaceOnUse" x1="30.325" y1="53.101" x2="40.095" y2="32.148"><stop offset="0.323" stop-color="#9e2064"></stop><stop offset="0.63" stop-color="#c92037"></stop><stop offset="0.751" stop-color="#cd2335"></stop><stop offset="1" stop-color="#e97826"></stop></linearGradient><path d="M35.206 42.623z" fill="url(#j)"></path></svg></a></div><div class="fs-14"><div class="my-3"><span>Copyright © 2023 - <!-- -->2025<!-- --> The Apache Software Foundation, Licensed under the Apache License, Version 2.0.<!-- --></span><br><span>Apache, Apache Answer, the feather logo and the Apache Answer logo are either registered trademarks or trademarks of the Apache Software Foundation in the United States and/or other countries.</span></div><span>Feature icons by <!-- --> <!-- --><a href="https://www.flaticon.com" class="link-secondary" target="_blank">Freepik</a>.<!-- --></span></div></div></div></div></footer></div> |
| </body> |
| </html> |
