Skip to content

Commit a644116

Browse files
committed
Add build directions that are more useful
1 parent 48982ec commit a644116

File tree

2 files changed

+45
-3
lines changed

2 files changed

+45
-3
lines changed

BUILDING.md

Lines changed: 44 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,49 @@
1-
# Building Assets
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.
24

3-
```
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
411
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.
516

17+
```bash
18+
# build the compiled assets for development
619
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
733
```
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+
### Building for Production
41+
Once you have your files squared away and ready for the live server, you'll be needing to generate compiled, minified, and
42+
hashed assets to push live. To do so, run the command below:
43+
44+
```bash
45+
yarn run build:production
46+
```
47+
48+
This will generate a production ready `bundle.js` and `bundle.css` as well as a `manifest.json` and store them in
49+
the `/public/assets` directory where they can then be access by clients, and read by the Panel.

package.json

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -54,7 +54,7 @@
5454
"build:filemanager": "./node_modules/babel-cli/bin/babel.js public/themes/pterodactyl/js/frontend/files/src --source-maps --out-file public/themes/pterodactyl/js/frontend/files/filemanager.min.js",
5555
"watch": "NODE_ENV=development ./node_modules/.bin/webpack --watch --progress",
5656
"build": "NODE_ENV=development ./node_modules/.bin/webpack --progress",
57-
"build:release": "NODE_ENV=production ./node_modules/.bin/webpack",
57+
"build:production": "NODE_ENV=production ./node_modules/.bin/webpack",
5858
"serve": "NODE_ENV=development webpack-serve --hot --config ./webpack.config.js"
5959
}
6060
}

0 commit comments

Comments
 (0)