webpack-playcanvas-uploader

1.0.3 • Public • Published

PlayCanvas Uploader 🚀

A simple & lightweight script uploader for use with Webpack & PlayCanvas.

Installation

Retrieving your project information

Open the PlayCanvas Editor in your browser and load in your project. Next, open your browser's developer console and enter the following to retrieve your access token:

config.accessToken

Retrieve your project ID using:

config.project.id

Retrieve the current branch ID using:

config.self.branch.id

Lastly, make a Webpack build by running npm run build. Drag & drop the resulting build into your PlayCanvas project. Select the file in the editor and note the file's ID in the inspector panel. Now we have all the information required to get up and running.

Adding the uploader plugin to your Webpack config

Import the PlayCanvas Uploader by adding the following to your Webpack config. Make sure to replace the placeholders with the values you retrieved earler:

const PlayCanvasUploader = require("webpack-playcanvas-uploader");

module.exports = {
    ...
    plugins: [
        new PlayCanvasUploader({
            projectId: <project ID>,
            branchId: "<branch ID>",
            accessToken: "<access token>",
            files: [
                { path: "build_output_name.js", assetId: <build asset ID> }
            ]
        })
    ],

That's it! Whenever you make a build, PlayCanvas Uploader will automatically upload your build to your PlayCanvas project. Whenever a file is uploaded you'll see a message in your console prefixed with [PlayCanvas Uploader].

(Optional) Ensure class names don't get minified

To make sure PlayCanvas can interpret your builds properly it's important to configure Webpack's terser plugin to not minify class names. PlayCanvas uses class names to identify scripts, so it's important they're unique and persistent.

Add the following to your Webpack config:

const TerserPlugin = require('terser-webpack-plugin');

module.exports = {
    ...
    optimization: {
        minimize: true,
        minimizer: [
            new TerserPlugin({
                terserOptions: {
                    compress: false,
                    keep_fnames: true,
                    keep_classnames: true
                }
            })
        ]
    },
}

Note that you might want to change minimize to false during development to make the build output more legible and easier to debug.

Optimizations

Automatic building & uploading

To make it easier to continuously upload new changes to PlayCanvas, it's helpful to add the following build script to your package.json:

"scripts": {
    ...
    "watch": "webpack -w"
  },

You can run the new script using npm run watch. Any changes you make to your source files will trigger an automatic rebuild which will subsequently be uploaded to PlayCanvas. If you want to stop the automatic building & uploading, simply terminate the script by pressing CTRL + C.

Package Sidebar

Install

npm i webpack-playcanvas-uploader

Weekly Downloads

1

Version

1.0.3

License

ISC

Unpacked Size

8.97 kB

Total Files

3

Last publish

Collaborators

  • thatstevenguy