Coder Social home page Coder Social logo

roll-inline-foundry's Introduction

FoundryVTT - Typescript + Gulp + Less Module/System Template

This is a relatively barebones module template for FoundryVTT. It is built using Gulp + Typescript and serves as a starter point for all module development. The LESS CSS pre-processor is used for stylesheets. The main purpose of this methodolgy is allowing easy usage of third party libraries, utility functions, etc.

Notes

  • The entry point is index.ts inside of the Source folder.
  • The output files will go inside of a "dist" folder after a build. There will be one JavaScript file called "bundle.js", and a list of css files, as well as any other assets you include.
  • This template has an automatic build and publish pipeline to streamline the process of developing and updating modules.
  • The Logger class inside of Utils exists to log with neat colours and proper timestamps with all log messages. Use this over console.log.

Foundry Path

For the build pipeline to work properly you must define an environment variable called FOUDNRY_PATH that points to the save data directory. Example: Windows Powershell: [Environment]::SetEnvironmentVariable("FOUNDRY_PATH", ${Env:localappdata}+"\FoundryVTT", "User")

Linux: Add FOUNDRY_PATH="~/PATH/TO/FOUNDRY"; export FOUNDRY_PATH to ~/.profile

Running

There are a few in-built commands as part of package.json. If you just want to get started with the template, you can jump right in with the following commands:

git clone [email protected]:Lazrius/FoundryVTT-Typescript-Module-Template.git

: Replace MyCoolModule with whatever you want to call it.
mv FoundryVTT-Typescript-Module-Template MyCoolModule
cd MyCoolModule

: You\'ll need to change the remote to be away from the template remote.
git remote set-url origin [email protected]:YourName/YourRepo.git

: Install our dependcies
npm install
: Run the build!
npm run build

Ideally, you should use the GitHub template system over the above method, but the instructions are there should you need them.

Commands:

The following commands are built into the project.

  • npm run build
  • npm run build:watch
  • npm run clean
  • npm run package "1.0.0" (replace the version number here with whatever version you are publishing)

Build will convert all of your TS files into a single bundle.js, and all of your less style sheets into css versions (remember to have them included in your module.json) build:watch will rebuild whenever the files change Clean will remove the dist folder and any remaining build artefacts.

Package will perform all the prior steps, but will then change all references to the internal version with the new version specified. After doing such, it will generate a new zip file inside of a "package" folder, and automatically commit the file for you. This commit can then be pushed, and properly updated for people using the module to easily update their own copies.

Renaming the project.

Due to the build pipeline, it's not as simple as just changing a few names and being done with it. In order to properly name your module, you'll need to update the name/path inside of:

  • package.json
  • foundryconfig.json
  • Source/Style/lazrius-foundry-template.less (rename the file to the new project name)
  • Source/module.json (update the following fields: url, manifest, download, styles)
  • Source/Globals.ts - Change ModuleName to match what is written in module.json

Contributing / Ideas

I am happy for anyone to create issues or pull requests for extra things inside of this template. Please do inform me of any errors that you find.

Main Credits

roll-inline-foundry's People

Contributors

undermybrella avatar

Watchers

 avatar  avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.