documentation/assets/js/33.8f006b9e.js

(window.webpackJsonp=window.webpackJsonp||[]).push([[33],{375:function(s,e,t){"use strict";t.r(e);var n=t(48),a=Object(n.a)({},(function(){var s=this,e=s.$createElement,t=s._self._c||e;return t("ContentSlotsDistributor",{attrs:{"slot-key":s.$parent.slotKey}},[t("h1",{attrs:{id:"building-panel-assets"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#building-panel-assets"}},[s._v("#")]),s._v(" Building Panel Assets")]),s._v(" "),t("div",{staticClass:"custom-block warning"},[t("p",{staticClass:"custom-block-title"},[s._v("WARNING")]),s._v(" "),t("p",[s._v("Do "),t("strong",[s._v("not")]),s._v(" run the following steps on your production nodes.")])]),s._v(" "),t("p",[s._v("Instructions on how to build the panel are also available in the "),t("a",{attrs:{href:"https://github.com/pterodactyl/panel/blob/1.0-develop/BUILDING.md",target:"_blank",rel:"noopener noreferrer"}},[s._v("BUILDING.md"),t("OutboundLink")],1),s._v(" file.")]),s._v(" "),t("p",[s._v("The frontend of the Panel is built with React. Any changes to the source files require to recompile it.\nThis also applies to style sheets. The following sections explain how to do so.")]),s._v(" "),t("h2",{attrs:{id:"install-dependencies"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#install-dependencies"}},[s._v("#")]),s._v(" Install Dependencies")]),s._v(" "),t("p",[s._v("The following commands will install the necessary dependencies for building the Panel assets.")]),s._v(" "),t("p",[s._v("The build tools require NodeJS, yarn is used as the package manager.")]),s._v(" "),t("div",{staticClass:"language-bash extra-class"},[t("pre",{pre:!0,attrs:{class:"language-bash"}},[t("code",[t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# Ubuntu/Debian")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("sudo")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("mkdir")]),s._v(" -p /etc/apt/keyrings\n"),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("curl")]),s._v(" -fsSL https://deb.nodesource.com/gpgkey/nodesource-repo.gpg.key "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("|")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("sudo")]),s._v(" gpg --dearmor -o /etc/apt/keyrings/nodesource.gpg\n"),t("span",{pre:!0,attrs:{class:"token builtin class-name"}},[s._v("echo")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token string"}},[s._v('"deb [signed-by=/etc/apt/keyrings/nodesource.gpg] https://deb.nodesource.com/node_16.x nodistro main"')]),s._v(" "),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("|")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("sudo")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("tee")]),s._v(" /etc/apt/sources.list.d/nodesource.list\n\n"),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("sudo")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("apt")]),s._v(" update\n"),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("sudo")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("apt")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("install")]),s._v(" -y nodejs\n\n"),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# CentOS")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("sudo")]),s._v(" yum "),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("install")]),s._v(" https://rpm.nodesource.com/pub_16.x/nodistro/repo/nodesource-release-nodistro-1.noarch.rpm -y\n"),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("sudo")]),s._v(" yum "),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("install")]),s._v(" nodejs -y\n")])])]),t("p",[s._v("Install required javascript packages.")]),s._v(" "),t("div",{staticClass:"language-bash extra-class"},[t("pre",{pre:!0,attrs:{class:"language-bash"}},[t("code",[t("span",{pre:!0,attrs:{class:"token function"}},[s._v("npm")]),s._v(" i -g "),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("yarn")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# Install Yarn")]),s._v("\n\n"),t("span",{pre:!0,attrs:{class:"token builtin class-name"}},[s._v("cd")]),s._v(" /var/www/pterodactyl\n"),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("yarn")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# Installs panel build dependencies")]),s._v("\n")])])]),t("h2",{attrs:{id:"build-panel-assets"}},[t("a",{staticClass:"header-anchor",attrs:{href:"#build-panel-assets"}},[s._v("#")]),s._v(" Build Panel Assets")]),s._v(" "),t("p",[s._v("The following command will rebuild the Panel frontend. For NodeJS version 17 and above, you must enable the "),t("code",[s._v("--openssl-legacy-provider")]),s._v(" option before building.")]),s._v(" "),t("div",{staticClass:"language-bash extra-class"},[t("pre",{pre:!0,attrs:{class:"language-bash"}},[t("code",[t("span",{pre:!0,attrs:{class:"token builtin class-name"}},[s._v("cd")]),s._v(" /var/www/pterodactyl\n"),t("span",{pre:!0,attrs:{class:"token builtin class-name"}},[s._v("export")]),s._v(" "),t("span",{pre:!0,attrs:{class:"token assign-left variable"}},[s._v("NODE_OPTIONS")]),t("span",{pre:!0,attrs:{class:"token operator"}},[s._v("=")]),s._v("--openssl-legacy-provider "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# for NodeJS v17+")]),s._v("\n"),t("span",{pre:!0,attrs:{class:"token function"}},[s._v("yarn")]),s._v(" build:production "),t("span",{pre:!0,attrs:{class:"token comment"}},[s._v("# Build panel")]),s._v("\n")])])]),t("p",[s._v("You can use command "),t("code",[s._v("yarn run watch")]),s._v(" 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 "),t("code",[s._v("yarn build:production")]),s._v(" command.")])])}),[],!1,null,null,null);e.default=a.exports}}]);