mirror of
https://github.com/pterodactyl/documentation.git
synced 2025-12-10 10:44:43 -06:00
60 lines
20 KiB
HTML
60 lines
20 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.8.2">
|
|
<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 7, 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.b4cb0fef.css" as="style"><link rel="preload" href="/assets/js/app.edb9b012.js" as="script"><link rel="preload" href="/assets/js/4.9dfb277d.js" as="script"><link rel="preload" href="/assets/js/1.d0c981d7.js" as="script"><link rel="preload" href="/assets/js/32.d98a3373.js" as="script"><link rel="prefetch" href="/assets/js/10.27cec751.js"><link rel="prefetch" href="/assets/js/11.53217705.js"><link rel="prefetch" href="/assets/js/12.9bbfc2f6.js"><link rel="prefetch" href="/assets/js/13.bd04c4ec.js"><link rel="prefetch" href="/assets/js/14.2e96f1b8.js"><link rel="prefetch" href="/assets/js/15.a6802091.js"><link rel="prefetch" href="/assets/js/16.f2dea920.js"><link rel="prefetch" href="/assets/js/17.67e35315.js"><link rel="prefetch" href="/assets/js/18.fcb158a9.js"><link rel="prefetch" href="/assets/js/19.bb80f931.js"><link rel="prefetch" href="/assets/js/2.21e1a937.js"><link rel="prefetch" href="/assets/js/20.d065b2c5.js"><link rel="prefetch" href="/assets/js/21.abae94a8.js"><link rel="prefetch" href="/assets/js/22.3ff292b3.js"><link rel="prefetch" href="/assets/js/23.6b778859.js"><link rel="prefetch" href="/assets/js/24.18e132d5.js"><link rel="prefetch" href="/assets/js/25.5a8ed612.js"><link rel="prefetch" href="/assets/js/26.0b63e77f.js"><link rel="prefetch" href="/assets/js/27.0711df74.js"><link rel="prefetch" href="/assets/js/28.17b33d85.js"><link rel="prefetch" href="/assets/js/29.9c25f524.js"><link rel="prefetch" href="/assets/js/30.34c4472a.js"><link rel="prefetch" href="/assets/js/31.4a35c00f.js"><link rel="prefetch" href="/assets/js/33.88a8819c.js"><link rel="prefetch" href="/assets/js/34.0edc39f4.js"><link rel="prefetch" href="/assets/js/35.969d92c8.js"><link rel="prefetch" href="/assets/js/36.49b831e2.js"><link rel="prefetch" href="/assets/js/37.46d8127b.js"><link rel="prefetch" href="/assets/js/38.9d9c367c.js"><link rel="prefetch" href="/assets/js/39.4e9577b6.js"><link rel="prefetch" href="/assets/js/40.273f9b41.js"><link rel="prefetch" href="/assets/js/41.32790d14.js"><link rel="prefetch" href="/assets/js/42.d9689e6d.js"><link rel="prefetch" href="/assets/js/43.9992155a.js"><link rel="prefetch" href="/assets/js/44.e7f6dd0e.js"><link rel="prefetch" href="/assets/js/45.32b9b890.js"><link rel="prefetch" href="/assets/js/46.c04b0749.js"><link rel="prefetch" href="/assets/js/47.8a528b5d.js"><link rel="prefetch" href="/assets/js/48.0bb564a9.js"><link rel="prefetch" href="/assets/js/49.70313a9d.js"><link rel="prefetch" href="/assets/js/5.73a53d7a.js"><link rel="prefetch" href="/assets/js/50.6b4f4718.js"><link rel="prefetch" href="/assets/js/51.75e9c6d8.js"><link rel="prefetch" href="/assets/js/52.5803bd20.js"><link rel="prefetch" href="/assets/js/53.c0284790.js"><link rel="prefetch" href="/assets/js/54.14aa3f16.js"><link rel="prefetch" href="/assets/js/55.4e7ca13f.js"><link rel="prefetch" href="/assets/js/56.cbbea30d.js"><link rel="prefetch" href="/assets/js/57.b9237770.js"><link rel="prefetch" href="/assets/js/58.df220808.js"><link rel="prefetch" href="/assets/js/59.06f08aee.js"><link rel="prefetch" href="/assets/js/6.8999fd8a.js"><link rel="prefetch" href="/assets/js/60.a3853cbe.js"><link rel="prefetch" href="/assets/js/61.360ebc59.js"><link rel="prefetch" href="/assets/js/62.db0d6812.js"><link rel="prefetch" href="/assets/js/63.8a89fed0.js"><link rel="prefetch" href="/assets/js/64.8fe43c5c.js"><link rel="prefetch" href="/assets/js/65.d4df1bb2.js"><link rel="prefetch" href="/assets/js/66.6cb57e40.js"><link rel="prefetch" href="/assets/js/67.cc039676.js"><link rel="prefetch" href="/assets/js/68.0031d838.js"><link rel="prefetch" href="/assets/js/69.74d5f183.js"><link rel="prefetch" href="/assets/js/7.9f1ce256.js"><link rel="prefetch" href="/assets/js/70.bd64671b.js"><link rel="prefetch" href="/assets/js/71.f94f8363.js"><link rel="prefetch" href="/assets/js/72.be219eed.js"><link rel="prefetch" href="/assets/js/73.11b803e4.js"><link rel="prefetch" href="/assets/js/74.282a4100.js"><link rel="prefetch" href="/assets/js/75.7fd29139.js"><link rel="prefetch" href="/assets/js/76.52a50904.js"><link rel="prefetch" href="/assets/js/77.9dcea1bf.js"><link rel="prefetch" href="/assets/js/78.36c13dcb.js"><link rel="prefetch" href="/assets/js/8.4c71898e.js"><link rel="prefetch" href="/assets/js/9.7af626f7.js">
|
|
<link rel="stylesheet" href="/assets/css/0.styles.b4cb0fef.css">
|
|
</head>
|
|
<body>
|
|
<div id="app" data-server-rendered="true"><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">
|
|
Contribute
|
|
<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">
|
|
Contribute
|
|
<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">CentOS 8</a></li><li><a href="/community/installation-guides/panel/debian9.html" class="sidebar-link">Debian 9</a></li><li><a href="/community/installation-guides/panel/debian10.html" class="sidebar-link">Debian 10</a></li><li><a href="/community/installation-guides/panel/ubuntu1804.html" class="sidebar-link">Ubuntu 18.04</a></li><li><a href="/community/installation-guides/panel/ubuntu2004.html" class="sidebar-link">Ubuntu 20.04</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">CentOS 8</a></li><li><a href="/community/installation-guides/wings/debian9.html" class="sidebar-link">Debian 9</a></li><li><a href="/community/installation-guides/wings/debian10.html" class="sidebar-link">Debian 10</a></li><li><a href="/community/installation-guides/wings/ubuntu1804.html" class="sidebar-link">Ubuntu 18.04</a></li><li><a href="/community/installation-guides/wings/ubuntu2004.html" class="sidebar-link">Ubuntu 20.04</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/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> -sL https://deb.nodesource.com/setup_14.x <span class="token operator">|</span> <span class="token function">sudo</span> -E <span class="token function">bash</span> -
|
|
<span class="token function">apt</span> <span class="token function">install</span> -y nodejs
|
|
|
|
<span class="token comment"># CentOS</span>
|
|
<span class="token function">curl</span> -sL https://rpm.nodesource.com/setup_14.x <span class="token operator">|</span> <span class="token function">sudo</span> -E <span class="token function">bash</span> -
|
|
<span class="token function">sudo</span> yum <span class="token function">install</span> -y 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> -y nodejs <span class="token function">yarn</span> <span class="token comment"># CentOS 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 -g <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.</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 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 class="global-ui"></div></div>
|
|
<script src="/assets/js/app.edb9b012.js" defer></script><script src="/assets/js/4.9dfb277d.js" defer></script><script src="/assets/js/1.d0c981d7.js" defer></script><script src="/assets/js/32.d98a3373.js" defer></script>
|
|
</body>
|
|
</html>
|