Skip to content

Local Development

Jump to bottom
Christopher Brown edited this page May 7, 2022 · 1 revision

This page will go through how to run each of the components for local development.

The plugin

RuneLite has a wiki page on how to get setup for plugin development: https://github.com/runelite/plugin-hub/blob/master/README.md
You won't need to go through the steps of setting up a new plugin, you just need to get intellij idea and load this project into it. There is also information in there on how to run RuneLite with the plugin loaded.

The frontend

v16.10.0 of node was used for this. After cloning the repo, install the npm packages with npm install. The development build/server can then be ran with npm run start, by default this will serve to localhost:4000.

The production build is done with npm run bundle, all of the static assets are in the public directory.

This project uses custom elements, if you don't know what those are I recommend checking out this article: https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements. Each component in the project has its own folder under the src directory with a js, css, and html file. A couple notes about the bundling process with these components:

  • The HTML file is inserted into the js file when bundling. This is done so we can keep the html in a separate file, but still able to treat it as a template literal.
  • No shadow dom is used. This means that all css selectors can select anything on the page so be thoughtful about your selectors and generally avoid selecting elements by tag name or using short class names.

The backend

Install rust: https://www.rust-lang.org/tools/install. I use the nightly compiler, but it may also work with stable. The project can be ran with cargo run or cargo run --release. It won't work right away because there a couple of files we need to add in the same directory as Cargo.toml:

  • First you will need to setup a postgres DB so go ahead and install postgres, create a new database, and run the src/sql/schema.sql on it to initialize the schema: psql -d <YOUR_DB_NAME> -U <YOUR_DB_USER> -f ./src/sql/schema.sql
  • config.toml create this file and fill it with your db information like so:
[pg]
user = "<YOUR_DB_USER>"
password = "<YOUR_DB_USER_PASSWORD>"
host = "127.0.0.1"
port = 5432
dbname = "<YOUR_DB_NAME>"
pool.max_size = 16
  • secret create this file and either just leave it blank or fill it with some random information. This is a shared secret used when hashing. Keep in mind, if you change the shared secret, you won't be able to access existing groups in the DB.

All together

To connect the plugin to the local server, we can change the plugin config in the RuneLite client. Change the server base url override in the plugin settings to http://localhost:8080

To connect the frontend to the local server open src/data/api.js and change the baseUrl in the constructor to this.baseUrl = "http://localhost:8080/api";

Clone this wiki locally