|
| 1 | +# Local Development |
| 2 | +Pterodactyl is now powered by Vuejs and Tailwindcss and uses webpack at its core to generate compiled assets. Release |
| 3 | +versions of Pterodactyl will include pre-compiled, minified, and hashed assets ready-to-go. |
| 4 | + |
| 5 | +However, if you are interested in running custom themes or making modifications to the Vue files you'll need a build |
| 6 | +system in place to generate these compiled assets. To get your environment setup, you'll first need to install at least Nodejs |
| 7 | +`8`, and it is _highly_ recommended that you also install [Yarn](https://yarnpkg.com) to manage your `node_modules`. |
| 8 | + |
| 9 | +### Install Dependencies |
| 10 | +```bash |
| 11 | +yarn install |
| 12 | +``` |
| 13 | + |
| 14 | +The command above will download all of the dependencies necessary to get Pterodactyl assets building. After that, its as |
| 15 | +simple as running the command below to generate assets while you're developing. |
| 16 | + |
| 17 | +```bash |
| 18 | +# build the compiled assets for development |
| 19 | +yarn run build |
| 20 | + |
| 21 | +# build the assets automatically when files are modified |
| 22 | +yarn run watch |
| 23 | +``` |
| 24 | + |
| 25 | + |
| 26 | +### Hot Module Reloading |
| 27 | +For more advanced users, we also support 'Hot Module Reloading', allowing you to quickly see changes you're making |
| 28 | +to the Vue template files without having to reload the page you're on. To Get started with this, you just need |
| 29 | +to run the command below. |
| 30 | + |
| 31 | +```bash |
| 32 | +PUBLIC_PATH=http://192.168.1.1:8080 yarn run serve --host 192.168.1.1 |
| 33 | +``` |
| 34 | + |
| 35 | +There are two _very important_ parts of this command to take note of and change for your specific environment. The first |
| 36 | +is the `--host` flag, which is required and should point to the machine where the `webpack-serve` server will be running. |
| 37 | +The second is the `PUBLIC_PATH` environment variable which is the URL pointing to the HMR server and is appended to all of |
| 38 | +the asset URLs used in Pterodactyl. |
| 39 | + |
| 40 | +#### Vagrant |
| 41 | +If you want to use HMR with our Vagrant image, you can use `yarn run v:serve` as a shortcut for the correct parameters. |
| 42 | +In order to have proper file change detection you can use the [`vagrant-notify-forwarder`](https://github.com/mhallin/vagrant-notify-forwarder) to notify file events from the host to the VM. |
| 43 | +```sh |
| 44 | +vagrant plugin install vagrant-notify-forwarder |
| 45 | +vagrant reload |
| 46 | +``` |
| 47 | + |
| 48 | +### Building for Production |
| 49 | +Once you have your files squared away and ready for the live server, you'll be needing to generate compiled, minified, and |
| 50 | +hashed assets to push live. To do so, run the command below: |
| 51 | + |
| 52 | +```bash |
| 53 | +yarn run build:production |
| 54 | +``` |
| 55 | + |
| 56 | +This will generate a production ready `bundle.js` and `bundle.css` as well as a `manifest.json` and store them in |
| 57 | +the `/public/assets` directory where they can then be access by clients, and read by the Panel. |
0 commit comments