Development Environment - League-of-Fabulous-Developers/FoundryVTT-Fabula-Ultima GitHub Wiki

In this page I will write down one of the possible approaches to setting a development environment for the system.

Installation

  1. After having acquired a Foundry license, install the program locally.
  2. Navigate to where Foundry stores the local user data. For Windows users that will be in C:\Users\$USER\AppData\Local\FoundryVTT\Data\.
  3. From there navigate to the systems sub-directory. This is where Foundry downloads each of the systems that it supports through its own package manager.
  4. In this directory you will want to clone this repository, the dev branch in particular.
  5. Before continuing make sure you have a local installation of node which you will need to run the server locally.

Development

  1. From any open terminal you can launch the server by executing main.js on the Foundry installation directory. On Windows this can usually be done by node "C:/Program Files/Foundry Virtual Tabletop/resources/app/main.js".
  2. Open up your browser and go to localhost:30000, or http://127.0.0.1:30000. From the launch page verify that you are able to see your Fabula Ultima installation under Systems. If it's there navigate back to Worlds and create an empty one that you will be using for development. I normally call them Sandbox.
  3. In a terminal at the root of the system directory, run the following commands: npm install (Install packages), npm run pack (package the compendiums, so that their entries are available in Foundry) then npm run build (regenerate css files among other things).
  4. Launch the world as a game master, verifying you have access to the system compendiums and that the data was loaded correctly.

IDE

I personally use the non-commercial license of Webstorm to great effect. When working in it I also heavily recommend turning on the option to run prettier (the linter which runs on each pre-commit hook) in order to prevent regular merge conflicts. You can do so here:

image

For a work session I do the following:

  • Open the project in Webstorm
  • Switch to a terminal tab and launch the server
  • Open my browser on localhost and login to my local world.

Webstorm Tips

  • Shift + Shift will bring up the quick search, an invaluable shortcut you will quickly grow to appreciate very much.

Editing CSS

The project uses SCSS, which gets compiled into CSS files during the pre-commit hook. If editing these one can spawn another terminal and run npm run watch in order to automatically watch for updates while working.