diff --git a/BUILDING.md b/BUILDING.md index 49a40a5b3..73e74f1d4 100644 --- a/BUILDING.md +++ b/BUILDING.md @@ -1,7 +1,49 @@ -# Building Assets +# Local Development +Pterodactyl is now powered by Vuejs and Tailwindcss and uses 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 Vue files you'll need a build +system in place to generate these compiled assets. To get your environment setup, you'll first need to install at least Nodejs +`8`, and it is _highly_ recommended that you also install [Yarn](https://yarnpkg.com) to manage your `node_modules`. + +### Install Dependencies +```bash yarn install - -yarn run build ``` + +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. + +```bash +# build the compiled assets for development +yarn run build + +# build the assets automatically when files are modified +yarn run watch +``` + + +### Hot Module Reloading +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. + +```bash +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. + +### Building for Production +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: + +```bash +yarn run build:production +``` + +This will generate a production ready `bundle.js` and `bundle.css` as well as a `manifest.json` and store them in +the `/public/assets` directory where they can then be access by clients, and read by the Panel. diff --git a/package.json b/package.json index 0d3a9e5e6..dc07fa8fd 100644 --- a/package.json +++ b/package.json @@ -54,7 +54,7 @@ "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", "watch": "NODE_ENV=development ./node_modules/.bin/webpack --watch --progress", "build": "NODE_ENV=development ./node_modules/.bin/webpack --progress", - "build:release": "NODE_ENV=production ./node_modules/.bin/webpack", + "build:production": "NODE_ENV=production ./node_modules/.bin/webpack", "serve": "NODE_ENV=development webpack-serve --hot --config ./webpack.config.js" } }