Hosting an RPGJS RPG locally using Electron!

It's been about a month since I last posted an rpgjs related project post, but that doesn't mean I've not been up to my elbows in programming tasks!

Today we're going to check out RPGJS-Electron, specifically the latest release for windows!

There were a few issues identified with the existing RPGJS demo hosting, namely..

• Setting up a local dev environment requires knowledge of command line usage of a terminal, installing node and or bun, and git cloing the repository to your computer. This sets a high technical knowledge requirement for trying out the app.
• Hosting on vercel works great, but even with substantial NFT image compression (JPEG + 60% quality) walking into the NFTEA Gallery building required a 30MB download of gallery map resources, this could prove pricey if thousands of unique visitors walk into the gallery without purchasing an NFT.

So, with plenty of Electron knowledge under our belt with the BeetEOS project, a new project was created to run the RPGJS demo web server locally without any complex computer skills!

Check it out in action:

It shows a small RPGJS demo window which directs users to navigate to the localhost:port URL to play the game in their web browser.

If you like the idea of using electron for your RPGJS game, you can simply change the git repo in the downloadRPG script then run it, it'll download the required game files if it follows the same project format as the reference demo rpgjs project which will be hosted by the application locally.

Getting this to work took just over a week of solid work, there were quite a few hurdles to overcome, let's point them out too!

• The background main thread spawns the window in development mode, but once built was no longer able to find the required files. Required disabling 'asar' which is used to compress the project's required files into a single file, resulting in the required files being included but also bloating the install size.
• Electron-builder filters out all devDependencies from built packages, preventing the built package from hosting the server locally. All dev dependencies aside from electron & electron-builder were moved to the project dependencies section within the package.json file, resulting in all required packages being included.
• Not all files being included within the node_packages folder - thousands of files were missing. This was solved by adding the following configuration to the package.json build section:

"npmRebuild": false,
    "buildDependenciesFromSource": false,
    "includeSubNodeModules": true,
    "files": [
      ".env",
      ".gitignore",
      "bun.lockb",
      "index.html",
      "LICENSE",
      "netlify.toml",
      "package.json",
      "rpg.toml",
      "tsconfig.json",
      "vercel.json"
    ],
    "extraResources": [
      { "from": "./app", "to": "app/app/" },
      { "from": "./build", "to": "app/build/" },
      { "from": "./main", "to": "app/main/" },
      { "from": "./resources", "to": "app/resources/" },
      { "from": "./node_modules", "to": "app/node_modules/" },
      { "from": "./src", "to": "app/src/" },
      { "from": "./package.json", "to": "app/package.json" }
    ]

It took a lot of trial and error, figuring out which files were accessible, how to navigate to them in the dev and production environments, and how to include all the required files like the dev environment, and I'm happy to say it works fully as expected in production just as it functions in dev mode!

With this now working as expected, I'm going to get back to the demo rpgjs project, implementing new functionality related to bitshares and eos blockchains.

---

Have any questions? Got any suggestions?

Comment below!

---

These developments were brought to you by the NFTEA Gallery.

Consider collecting an NFTEA NFT to or donate to the following BTS or EOS blockchain accounts directly, to fund continued developments.

Don't have a Bitshares account? Make one today!