mirror of
https://github.com/pterodactyl/documentation.git
synced 2025-12-10 09:17:40 -06:00
61 lines
19 KiB
HTML
61 lines
19 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en-US">
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width,initial-scale=1">
|
|
<title>Building Panel Assets | Pterodactyl</title>
|
|
<meta name="generator" content="VuePress 1.9.10">
|
|
<link rel="apple-touch-icon" sizes="180x180" href="/favicons/apple-touch-icon.png">
|
|
<link rel="icon" type="image/png" href="/favicons/favicon-32x32.png" sizes="32x32">
|
|
<link rel="icon" type="image/png" href="/favicons/favicon-16x16.png" sizes="16x16">
|
|
<link rel="mask-icon" href="/favicons/safari-pinned-tab.svg" color="#0e4688">
|
|
<link rel="manifest" href="/favicons/site.webmanifest">
|
|
<link rel="shortcut icon" href="/favicons/favicon.ico">
|
|
<meta name="description" content="Pterodactyl is an open-source game server management panel built with PHP, React, and Go. Designed with security in mind, Pterodactyl runs all game servers in isolated Docker containers while exposing a beautiful and intuitive UI to end users.">
|
|
<meta name="msapplication-config" content="/favicons/browserconfig.xml">
|
|
<meta name="theme-color" content="#0e4688">
|
|
|
|
<link rel="preload" href="/assets/css/0.styles.894cd3e9.css" as="style"><link rel="preload" href="/assets/js/app.322e86a5.js" as="script"><link rel="preload" href="/assets/js/4.0da8214b.js" as="script"><link rel="preload" href="/assets/js/2.638bc23b.js" as="script"><link rel="preload" href="/assets/js/33.940dfd44.js" as="script"><link rel="prefetch" href="/assets/js/1.364681bc.js"><link rel="prefetch" href="/assets/js/10.08b9c98e.js"><link rel="prefetch" href="/assets/js/11.d107c8b2.js"><link rel="prefetch" href="/assets/js/12.469af100.js"><link rel="prefetch" href="/assets/js/13.43a16fbd.js"><link rel="prefetch" href="/assets/js/14.65d10cad.js"><link rel="prefetch" href="/assets/js/15.c66c8d6e.js"><link rel="prefetch" href="/assets/js/16.80d778f6.js"><link rel="prefetch" href="/assets/js/17.aa66495a.js"><link rel="prefetch" href="/assets/js/18.57b733fd.js"><link rel="prefetch" href="/assets/js/19.ec92bd63.js"><link rel="prefetch" href="/assets/js/20.5c80f685.js"><link rel="prefetch" href="/assets/js/21.e2cfd57c.js"><link rel="prefetch" href="/assets/js/22.81755508.js"><link rel="prefetch" href="/assets/js/23.4a3e5e0b.js"><link rel="prefetch" href="/assets/js/24.14d17171.js"><link rel="prefetch" href="/assets/js/25.b2ca157b.js"><link rel="prefetch" href="/assets/js/26.55d35d4f.js"><link rel="prefetch" href="/assets/js/27.005f34ff.js"><link rel="prefetch" href="/assets/js/28.a5eb93d2.js"><link rel="prefetch" href="/assets/js/29.173d87c8.js"><link rel="prefetch" href="/assets/js/30.d2985bea.js"><link rel="prefetch" href="/assets/js/31.1a5025b8.js"><link rel="prefetch" href="/assets/js/32.832c5249.js"><link rel="prefetch" href="/assets/js/34.49d78ff7.js"><link rel="prefetch" href="/assets/js/35.a04be06d.js"><link rel="prefetch" href="/assets/js/36.d63650be.js"><link rel="prefetch" href="/assets/js/37.e0153b42.js"><link rel="prefetch" href="/assets/js/38.059a51d4.js"><link rel="prefetch" href="/assets/js/39.942d570b.js"><link rel="prefetch" href="/assets/js/40.8da7d440.js"><link rel="prefetch" href="/assets/js/41.24a4fd9a.js"><link rel="prefetch" href="/assets/js/42.03a43dda.js"><link rel="prefetch" href="/assets/js/43.9b0bb612.js"><link rel="prefetch" href="/assets/js/44.a7d15b9f.js"><link rel="prefetch" href="/assets/js/45.ec543ccc.js"><link rel="prefetch" href="/assets/js/46.c1ed9730.js"><link rel="prefetch" href="/assets/js/47.0f24220f.js"><link rel="prefetch" href="/assets/js/48.c19ab66e.js"><link rel="prefetch" href="/assets/js/49.f62e3b58.js"><link rel="prefetch" href="/assets/js/5.8c798c34.js"><link rel="prefetch" href="/assets/js/50.8b3d6cae.js"><link rel="prefetch" href="/assets/js/51.e078e2e8.js"><link rel="prefetch" href="/assets/js/52.a29f5524.js"><link rel="prefetch" href="/assets/js/53.709f014a.js"><link rel="prefetch" href="/assets/js/54.57d4e764.js"><link rel="prefetch" href="/assets/js/55.812633bb.js"><link rel="prefetch" href="/assets/js/56.f682278e.js"><link rel="prefetch" href="/assets/js/57.5d950550.js"><link rel="prefetch" href="/assets/js/58.6917e3e6.js"><link rel="prefetch" href="/assets/js/59.74ce363c.js"><link rel="prefetch" href="/assets/js/6.cd87a2b3.js"><link rel="prefetch" href="/assets/js/60.7079ce04.js"><link rel="prefetch" href="/assets/js/61.d30789b5.js"><link rel="prefetch" href="/assets/js/62.c6908404.js"><link rel="prefetch" href="/assets/js/63.dfe26c31.js"><link rel="prefetch" href="/assets/js/64.c028aa01.js"><link rel="prefetch" href="/assets/js/65.61c0bfd2.js"><link rel="prefetch" href="/assets/js/66.69a87c64.js"><link rel="prefetch" href="/assets/js/67.1e397491.js"><link rel="prefetch" href="/assets/js/68.48fdc234.js"><link rel="prefetch" href="/assets/js/69.42581cdd.js"><link rel="prefetch" href="/assets/js/7.f17059bf.js"><link rel="prefetch" href="/assets/js/70.cbd191fe.js"><link rel="prefetch" href="/assets/js/71.023c6d55.js"><link rel="prefetch" href="/assets/js/8.758e7e8b.js"><link rel="prefetch" href="/assets/js/9.ef5a635a.js">
|
|
<link rel="stylesheet" href="/assets/css/0.styles.894cd3e9.css">
|
|
</head>
|
|
<body>
|
|
<div id="app" data-server-rendered="true"><div><div class="theme-container"><header class="nav"><div class="sidebar-button block md:hidden flex-no-shrink"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <div class="logo-container"><a href="/" class="home-link router-link-active"><img src="/logos/pterry.svg" class="logo"> <span class="site-name hidden md:inline can-hide">Pterodactyl</span></a></div> <div class="w-full"><div class="flex"><div class="search-box"><input aria-label="Search" placeholder="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links flex-no-shrink hidden md:flex"><div class="nav-item"><a href="/project/introduction.html" class="nav-link">Documentation
|
|
</a></div><div class="nav-item"><a href="/community/about.html" class="nav-link">Community Guides
|
|
</a></div><div class="nav-item"><a href="https://discord.gg/pterodactyl" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Get Help
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://dashflo.net/docs/api/pterodactyl/v1/" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
API
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <div class="nav-item"><a href="https://github.com/pterodactyl/panel" target="_blank" rel="noopener noreferrer" class="nav-link">
|
|
GitHub
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div></nav></div></div></header> <div class="sidebar-mask"></div> <div class="sidebar"><nav class="nav-links flex-no-shrink block md:hidden"><div class="nav-item"><a href="/project/introduction.html" class="nav-link">Documentation
|
|
</a></div><div class="nav-item"><a href="/community/about.html" class="nav-link">Community Guides
|
|
</a></div><div class="nav-item"><a href="https://discord.gg/pterodactyl" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
Get Help
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div><div class="nav-item"><a href="https://dashflo.net/docs/api/pterodactyl/v1/" target="_blank" rel="noopener noreferrer" class="nav-link external">
|
|
API
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div> <div class="nav-item"><a href="https://github.com/pterodactyl/panel" target="_blank" rel="noopener noreferrer" class="nav-link">
|
|
GitHub
|
|
<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a></div></nav> <ul class="sidebar-links"><li><div class="sidebar-group first"><p class="sidebar-heading"><span>Community Guides</span> <!----> <!----></p> <ul class="sidebar-group-items"><li><a href="/community/about.html" class="sidebar-link">Community Guides and Tutorials</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Panel Installation</span> <!----> <!----></p> <ul class="sidebar-group-items"><li><a href="/community/installation-guides/panel/centos7.html" class="sidebar-link">CentOS 7</a></li><li><a href="/community/installation-guides/panel/centos8.html" class="sidebar-link">Enterprise Linux 8 and Fedora Server 40</a></li><li><a href="/community/installation-guides/panel/debian.html" class="sidebar-link">Debian 11 & 12</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Wings Installation</span> <!----> <!----></p> <ul class="sidebar-group-items"><li><a href="/community/installation-guides/wings/centos7.html" class="sidebar-link">CentOS 7</a></li><li><a href="/community/installation-guides/wings/centos8.html" class="sidebar-link">Enterprise Linux 8 and Fedora Server 40</a></li><li><a href="/community/installation-guides/wings/debian.html" class="sidebar-link">Debian 11 & 12</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Creating Eggs</span> <!----> <!----></p> <ul class="sidebar-group-items"><li><a href="/community/config/eggs/creating_a_custom_egg.html" class="sidebar-link">Creating a Custom Egg</a></li><li><a href="/community/config/eggs/creating_a_custom_image.html" class="sidebar-link">Creating a Custom Docker Image</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Game Configuration</span> <!----> <!----></p> <ul class="sidebar-group-items"><li><a href="/community/games/minecraft.html" class="sidebar-link">Minecraft</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading"><span>Tutorials</span> <!----> <!----></p> <ul class="sidebar-group-items"><li><a href="/community/config/nodes/add_node.html" class="sidebar-link">Creating a New Node</a></li><li><a href="/community/tutorials/artisan.html" class="sidebar-link">Artisan CLI</a></li></ul></div></li><li><div class="sidebar-group"><p class="sidebar-heading open"><span>Customization</span> <!----> <!----></p> <ul class="sidebar-group-items"><li><a href="/community/customization/panel.html" aria-current="page" class="active sidebar-link">Building Panel Assets</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/community/customization/panel.html#install-dependencies" class="sidebar-link">Install Dependencies</a></li><li class="sidebar-sub-header"><a href="/community/customization/panel.html#build-panel-assets" class="sidebar-link">Build Panel Assets</a></li></ul></li><li><a href="/community/customization/wings.html" class="sidebar-link">Building Wings</a></li></ul></div></li></ul> </div> <div class="page"> <div class="content content__default"><h1 id="building-panel-assets"><a href="#building-panel-assets" class="header-anchor">#</a> Building Panel Assets</h1> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>Do <strong>not</strong> run the following steps on your production nodes.</p></div> <p>Instructions on how to build the panel are also available in the <a href="https://github.com/pterodactyl/panel/blob/1.0-develop/BUILDING.md" target="_blank" rel="noopener noreferrer">BUILDING.md<span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></a> file.</p> <p>The frontend of the Panel is built with React. Any changes to the source files require to recompile it.
|
|
This also applies to style sheets. The following sections explain how to do so.</p> <h2 id="install-dependencies"><a href="#install-dependencies" class="header-anchor">#</a> Install Dependencies</h2> <p>The following commands will install the necessary dependencies for building the Panel assets.</p> <p>The build tools require NodeJS, yarn is used as the package manager.</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token comment"># Ubuntu/Debian</span>
|
|
<span class="token function">curl</span> <span class="token parameter variable">-sL</span> https://deb.nodesource.com/setup_16.x <span class="token operator">|</span> <span class="token function">sudo</span> <span class="token parameter variable">-E</span> <span class="token function">bash</span> -
|
|
<span class="token function">sudo</span> <span class="token function">apt</span> <span class="token function">install</span> <span class="token parameter variable">-y</span> nodejs
|
|
|
|
<span class="token comment"># CentOS</span>
|
|
<span class="token function">curl</span> <span class="token parameter variable">-sL</span> https://rpm.nodesource.com/setup_16.x <span class="token operator">|</span> <span class="token function">sudo</span> <span class="token parameter variable">-E</span> <span class="token function">bash</span> -
|
|
<span class="token function">sudo</span> yum <span class="token function">install</span> <span class="token parameter variable">-y</span> nodejs <span class="token function">yarn</span> <span class="token comment"># CentOS 7</span>
|
|
<span class="token function">sudo</span> dnf <span class="token function">install</span> <span class="token parameter variable">-y</span> nodejs <span class="token function">yarn</span> <span class="token comment"># CentOS 8, Rocky Linux 8, AlmaLinux 8</span>
|
|
</code></pre></div><p>Install required javascript packages.</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token function">npm</span> i <span class="token parameter variable">-g</span> <span class="token function">yarn</span> <span class="token comment"># Install Yarn</span>
|
|
|
|
<span class="token builtin class-name">cd</span> /var/www/pterodactyl
|
|
<span class="token function">yarn</span> <span class="token comment"># Installs panel build dependencies</span>
|
|
</code></pre></div><h2 id="build-panel-assets"><a href="#build-panel-assets" class="header-anchor">#</a> Build Panel Assets</h2> <p>The following command will rebuild the Panel frontend. For NodeJS version 17 and above, you must enable the <code>--openssl-legacy-provider</code> option before building.</p> <div class="language-bash extra-class"><pre class="language-bash"><code><span class="token builtin class-name">cd</span> /var/www/pterodactyl
|
|
<span class="token builtin class-name">export</span> <span class="token assign-left variable">NODE_OPTIONS</span><span class="token operator">=</span>--openssl-legacy-provider <span class="token comment"># for NodeJS v17+</span>
|
|
<span class="token function">yarn</span> build:production <span class="token comment"># Build panel</span>
|
|
</code></pre></div><p>You can use command <code>yarn run watch</code> to view the progress of your changes in almost real-time for easier development. Once you're satisfied with your changes build the panel using the previously mentioned <code>yarn build:production</code> command.</p></div> <div class="page-edit"><div class="edit-link"><a href="https://github.com/pterodactyl/documentation/edit/master/community/customization/panel.md" target="_blank" rel="noopener noreferrer">Help us improve this page.</a> <span><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" focusable="false" x="0px" y="0px" viewBox="0 0 100 100" width="15" height="15" class="icon outbound"><path fill="currentColor" d="M18.8,85.1h56l0,0c2.2,0,4-1.8,4-4v-32h-8v28h-48v-48h28v-8h-32l0,0c-2.2,0-4,1.8-4,4v56C14.8,83.3,16.6,85.1,18.8,85.1z"></path> <polygon fill="currentColor" points="45.7,48.7 51.3,54.3 77.2,28.5 77.2,37.2 85.2,37.2 85.2,14.9 62.8,14.9 62.8,22.9 71.5,22.9"></polygon></svg> <span class="sr-only">(opens new window)</span></span></div> <!----></div> <div class="page-nav"><p class="inner"></p> <div class="prev"><span>
|
|
←
|
|
<a href="/community/tutorials/artisan.html">Artisan CLI</a></span></div> <div class="next"><span><a href="/community/customization/wings.html">Building Wings</a>→
|
|
</span></div></div> </div></div></div><div class="global-ui"></div></div>
|
|
<script src="/assets/js/app.322e86a5.js" defer></script><script src="/assets/js/4.0da8214b.js" defer></script><script src="/assets/js/2.638bc23b.js" defer></script><script src="/assets/js/33.940dfd44.js" defer></script>
|
|
</body>
|
|
</html>
|