# Getting Started
###### tags: `module-tutorial` `foundry-vtt`
> A lot of this first step is very similar to the official knowledgebase article: [Introduction to Module Development](https://foundryvtt.com/article/module-development/)
## I. Find your userData directory
Navigate to your Foundry Installation's userData directory.
This directory is set during the Foundry installation process and varies depending on how you run Foundry. If you are using the standalone foundry application on Windows (aka the Electron app), you can right click on the taskbar icon and select "Browse User Data" to get there.
## II. Create your Module Directory
Create a new directory under `Data/modules`. Let's name this directory `todo-list`.
```
├── Config
├── Data
│ ├── modules
│ │ └── todo-list
│ ├── systems
│ └── worlds
└── Logs
```
There is only one file needed to register a module with Foundry and that is the **Manifest JSON**. This file tells Foundry some information about the module and how to use it.
## III. Create a Manifest JSON
```
todo-list
└── module.json
```
In your new directory create a file named `module.json` and add this to it:
```json=
{
"name": "my-todo-list",
"title": "To Don't",
"description": "A simple module which adds a user specific to do list.",
"authors": [
{
name: "You!"
}
],
"version": "1",
"minimumCoreVersion": "0.8.8",
}
```
There's a more detailed breakdown of what each of these fields means (and a whole lot more fields we'll be adding later) on the [official knowledgebase article](https://foundryvtt.com/article/module-development/).
At this point we have created a module! It doesn't do anything yet but let's make sure it's working. Start up your Foundry Instance and go to the "Modules and Addons" tab in the setup screen. We should see a module named "To Don't" in this list.
> _**Narrator.** We do not._
## IV. Debugging "Why Won't my Module Show Up?"
Our module has exactly 1 file, so there's very few ways it might be broken.
### Does our Directory name match our Module name?
In our Manifest JSON we set the `name` to `"my-todo-list"`. We created a directory named `todo-list` in our `userData/Data/modules`. Unless these two things match, Foundry will not recognize the module as valid.
Let's change our Manifest to instead have `"name": "todo-list"`.
:::info
Anytime a Manifest JSON is changed, the Foundry Server needs to be restarted to pick up the change.
:::
Restart foundry to see if it fixed things.
> _**Narrator.** It did not._
### Is our JSON valid?
JSON is a very finnicky way to describe data. We should run our JSON through a [validator](https://jsonlint.com/) to make sure it doesn't have any syntax errors.
:::danger
```
Error: Parse error on line 5:
...", "authors": [{ name: "You!" }], "
---------------------^
Expecting 'STRING', '}', got 'undefined'
```
:::
Ah, we failed to put quotation marks around `name` in `authors`.
```
"authors": [
{
"name": "You!"
}
],
```
Let's fix that and run validation again.
:::danger
```
Error: Parse error on line 9:
...eVersion": "0.8.8",}
----------------------^
Expecting 'STRING', got '}'
```
:::
Ok new error, that's progress. This time it looks like we left a trailing comma at the end of our JSON object. Let's fix _that_ and run _again._
```
"minimumCoreVersion": "0.8.8"
```
:::success
```
Valid JSON
```
:::
Excellent. Make those changes in your file and restart Foundry to see if that fixed it.
:::info
Windows likes to hide file extensions sometimes. If your module doesn't show up in Foundry, the file might actually be called `module.json.txt` (with Windows hiding the `.txt`). For more information and instructions how to disable this behavior, check [this article](https://www.bleepingcomputer.com/news/microsoft/hiding-windows-file-extensions-is-a-security-risk-enable-now/).
:::
🥳
### Locking a Package
Go ahead and lock this package by clicking the "Lock" button next to "Uninstall". This creates a simple `.lock` file in our module folder and tells Foundry never to update it. Since we are developing locally we definitely don't want to accidentally replace our files with an update we released.
## V. Hello World!
Now we need this empty module to do something.
### Create a Javascript File
Add a `scripts` directory with a `todo-list.js` file to your module directory:
```
todo-list
├── module.json
├── scripts
│ └── todo-list.js
└── todo-list.lock
```
Add the following to your js file.
```js=
console.log('todo-list | Hello World!');
```
### Add this script to our Manifest
Foundry relies on the Manifest JSON telling it which files in the directory are relevant to the function of your module. To add a script, we'll need to define it under the `"scripts"` field:
```
"scripts": [
"scripts/todo-list.js"
],
```
> Make sure your JSON is valid after adding this!
The path is a relative path from the manifest file itself, which is always in the root of the module directory.
### Test!
Now that we've changed our Manifest JSON, we have to restart Foundry again. Open a world with any system (I recommend using the Simple Worldbuilding System) and activate the "To Don't" module.
Once Foundry is done refreshing, we can open our devtools (try `F12` or `CMD + Option + i`) and see our Hello World in the Console!
## VI. Setting up the rest of our files.
We know we'll need a bunch of other files before the end of this project so we're going to go ahead and create them all now. We'll revisit what each file does later in this tutorial but if we can set our Manifest up now, we won't have to restart Foundry later.
### Localization
It's important to start thinking about [localization](https://foundryvtt.wiki/en/development/guides/localization/localization-best-practices) early in the project, as it is much easier to do it as you go, rather than go back through at the end of a project.
Add a `languages` directory and `en.json`:
```json=
{
"TODO-LIST": {
}
}
```
Register this language in your Manifest:
```
"languages": [
{
"lang": "en",
"name": "English",
"path": "languages/en.json"
}
],
```
### Stylesheets
Create a `styles` directory and a `todo-list.css`, then register it in your Manifest:
```
"styles": [
"styles/todo-list.css"
],
```
### Templates
Foundry uses [Handlebars](https://handlebarsjs.com/) as a template language. We'll be needing one template and we might as well make it now.
Add a `todo-list.hbs` to a `templates` directory in your module directory.
We don't need to make any changes to the Manifest for templates.
## VII. Wrapping Up
Once you've added all of these files and directories, restart foundry one last time before moving on.
So far we have:
- Created a directory for our module to live in
- Added a Manifest JSON to register our module
- Debugged why our Module wasn't registering
- Added a js file and logged something within Foundry
- Created the skeleton for the rest of our files
<details>
<summary>Final Manifest JSON</summary>
The order of the keys does not matter, I used alphabetical order for simplicity sake.
```json=
{
"authors": [
{
"name": "You!"
}
],
"description": "A simple module which adds a user specific to do list.",
"languages": [
{
"lang": "en",
"name": "English",
"path": "languages/en.json"
}
],
"minimumCoreVersion": "0.8.8",
"name": "todo-list",
"scripts": [
"scripts/todo-list.js"
],
"styles": [
"styles/todo-list.css"
],
"title": "To Don't",
"version": "1"
}
```
</details>
<details>
<summary>Final Directory Tree</summary>
```
todo-list
├── languages
│ └── en.json
├── module.json
├── scripts
│ └── todo-list.js
├── styles
│ └── todo-list.css
├── templates
│ └── todo-list.hbs
└── todo-list.lock
```
</details>
> #### Quick Tip
> The League of Extraordinary Foundry VTT Developers has created an Open Source [template repository](https://github.com/League-of-Foundry-Developers/FoundryVTT-Module-Template) on Github which helps bootstrap the steps we went through in this part of the tutorial. It also has some other nicities built-in including an automation for releases.
Next Step: [Planning our Module](/wD56bD86RouILe7PguHazg)
{%hackmd io_aG7zdTKyRe3cpLcsxzw %}
Sign in with Wallet
Connect another wallet