TEMPLATE: ES6 | Version Control | NPM | PlayCanvas

redka · January 16, 2019, 7:10pm

Without the ability to use loading screen you’re stuck with utility-scripts/exerpt.js which unfortunately doesn’t work - I think it’s just ran too late to have an effect.

In order to make Hot Module Replacement work in that case you have two options:

The hard way

Clone playcanvas/engine repo.
Modify src/asset/asset.js file applying changes similar to the ones from utility-scripts/exerpt.js.
Run npm serve.
Add use_local_engine=http://localhost:51000/playcanvas-latest.js param to launch.playcanvas.com url and change protocol from https to http
Unfortunately webpack-dev-server has a bug which makes adding publicPath: "http://localhost:8081" or port and host not work.
This means we need to fork webpack-dev-server, roll it back to version 2.7.1 and apply this patch.
Install our fork of webpack-dev-server - we can then either publish to our local npm registry, install from disk or install from github.
Add publicPath: "http://localhost:8081" to devServer configuration from webpack.development.config.js
Add some code to src/main.js
```
if (module.hot)
  module.hot.accept()
```
http://launch.playcanvas.com/{projectId}?debug=true&use_local_engine=http://localhost:51000/playcanvas-latest.js&local=http://localhost:8081

The easy way

Download Redirector chrome extension
setup two redirects
1. One for script files
  Example URL: http://launch.playcanvas.com/api/assets/files/main.build.js?id=11217398&branchId=00465776-6b83-4f4c-af75-01c351769fa8
  Include pattern: launch.playcanvas.com/api/assets/files/(.+.js)?(.*)
  Redirect to: http://localhost:8081/$1?$2
  Pattern type: Regular Expression
  In advanced options:
  Apply to: Scripts and XMLHttpRequests (Ajax)
2. One for HMR updates
  Example URL: http://launch.playcanvas.com/191247d10e518c420782.hot-update.json
  Include pattern: launch.playcanvas.com/(.*).hot-update.(js|json)$
  Redirect to: http://localhost:8081/$1.hot-update.$2
  Pattern type: Regular Expression
  In advanced options:
  Apply to: Scripts and XMLHttpRequests (Ajax)
Add some code to src/main.js
```
if (module.hot)
  module.hot.accept()
```
maybe remove playcanvas-delay module and replace it with your own implementation or use bluebird’s Promise.delay (update src/example.js accordingly) - not sure why but playcanvas-delay didn’t work.
Launch http://launch.playcanvas.com/{projectId}?debug=true&?local=http://localhost:8081

I also made my own fork based on CoffeeScript 2 with updated readme and all of the things that weren’t neccessary removed.