Pterodactyl is now powered by React, Typescript, and Tailwindcss using webpack at its core to generate compiled assets. Release versions of Pterodactyl will include pre-compiled, minified, and hashed assets ready-to-go.
However, if you are interested in running custom themes or making modifications to the React files you'll need a build system in place to generate these compiled assets. To get your environment setup you'll need at minimum:
yarn install
The command above will download all of the dependencies necessary to get Pterodactyl assets building. After that, its as
simple as running the command below to generate assets while you're developing. Until you've run this command at least
once you'll likely see a 500 error on your Panel about a missing manifest.json
file. This is generated by the commands
below.
# Build the compiled set of assets for development.
yarn run build
# Build the assets automatically as they are changed. This allows you to refresh
# the page and see the changes immediately.
yarn run watch
For more advanced users, we also support 'Hot Module Reloading', allowing you to quickly see changes you're making to the Vue template files without having to reload the page you're on. To Get started with this, you just need to run the command below.
PUBLIC_PATH=http://192.168.1.1:8080 yarn run serve --host 192.168.1.1
There are two very important parts of this command to take note of and change for your specific environment. The first
is the --host
flag, which is required and should point to the machine where the webpack-serve
server will be running.
The second is the PUBLIC_PATH
environment variable which is the URL pointing to the HMR server and is appended to all of
the asset URLs used in Pterodactyl.
If you're using the pterodactyl/development
environments, which are
highly recommended, you can just run yarn run serve
to run the HMR server, no additional configuration is necessary.
Once you have your files squared away and ready for the live server, you'll be needing to generate compiled, minified, and hashed assets to push live. To do so, run the command below:
yarn run build:production
This will generate a production JS bundle and associated assets, all located in public/assets/
which will need to
be uploaded to your server or CDN for clients to use.
To run wings
in development all you need to do is set up the configuration file as normal when adding a new node, and
then you can build and run a local version of Wings by executing make debug
in the Wings code directory. This must
be run on a Linux VM of some sort, you cannot run this locally on macOS or Windows.