#2825 [Beginner question] How do you create new .fan files?

Derek Wed 14 Apr 2021

I'm using a program that relies on .pod files (FIN Framework) and I wanted to make some of my own .pod files. I did some digging and found out about Fantom, and found the fan build init command for creating pod templates. Now I need to figure out how to create fan files, I tried searching through the documentation but I couldn't figure out where to go for this. Is there a way to compile regular text files to .fan? Sorry for the stupid question.

SlimerDude Wed 14 Apr 2021

Hi Derek,

A .fan file IS a text file!

Multiple .fan files are then compiled into a .pod file (which is a .zip file.)

You can find a couple of basic articles that explain Fantom projects and .pod files here on Alien-Factory.

Derek Wed 14 Apr 2021

Thanks for the tutorial! Im trying to build a test pod with a project called hello, but when i run the fan build.fan command based on the documentation here:

(documentation: https://fantom.org/doc/docIntro/HelloWorld#script) (what happened with me: https://i.imgur.com/iBlANgn.png)

The command prompt says no fan source files found and gives me a BUILD FAILED error. I was running off of the hello project's build.fan file.

I created a text file (from notepad, edited the name to have .fan at the end) in the project hello/fan folder, with these contents:

class Main {

static Void main() { echo("hello world #3") }


But it doesnt seem to recognize it as a .fan file.

SlimerDude Thu 15 Apr 2021

Hi Derek, you may be mixing up the complex multi-project directories generated from fan build init and the standard project set up as described in How To Setup a Fantom Project.

I would start with a clean empty directory and follow the article, creating the files and dirs manually, taking care over the content of the build.fan script.

Derek Mon 19 Apr 2021

Thanks! I followed the tutorial and it worked. Pod is generated. Im trying to get javascript to work in the pod, and I was looking at other existing pods and saw that when I unzipped them there were "js" folders with javascript files in there. I created a js folder in my pod and put a javascript file in my pod, and in the build.fan i put this just like in the documentation:

using build

class Build : BuildPod {

new make() {
    podName    = "myFantomApp"
    summary    = "my AWESOME Fantom App"
    depends    = ["sys 1.0"]
    srcDirs    = [`fan/`, `test/`]
    jsDirs     = [`js/`]
    resDirs    = [`doc/`]


But upon compiling the pod it doesnt show the js folder or my javascript file. Do you have an idea of what might be the problem? Thanks so much for your help.

Henry Mon 19 Apr 2021

Hi Derek!

The jsDirs directory is used for supplying the pod with any native Javascript code/libraries.

By default, when you supply a javascript file within a directory under jsDirs, that javascript - along with any code in your project which is using the @Js facet - will be added to the overall <podname>.js file inside your built pod.

This <podname>.js file contains all of the javascript in the entire project.

This page contains an overview of the cross-compilation of fantom code into javascript and the <podname>.js file.

The reason you may be seeing javascript in a js/ directory inside the pods, will be because those js directories would actually have been built as resDirs, not as jsDirs

Hope this helps :)

Derek Mon 19 Apr 2021

Thanks a bunch! That helped. I've got a weird question now. I may not be providing enough information, but I'm trying to get the meta.props file to match a format from another pod I've found, so that when I drop this pod into the .fan folder it will work properly. The meta properties I'm not sure about look like this:

ext.name=finMiscComponents ext.icon24=fan://finMiscComponents/res/img/icon24.png ext.icon72=fan://finMiscComponents/res/img/icon72.png

how do you think I would go about recreating that?

Derek Mon 19 Apr 2021

The program im trying to get this to work with is Fin Framework, if that helps any

Henry Mon 19 Apr 2021

I'm not familiar with the Fin Framework, however I believe the meta.props is all generated from key-value pairs in the "meta" map in the build script.

Here is an example of the meta for a project:

meta = [
  "pod.dis"		: "Example App",
  "proj.name"		: "Example",
  "repo.public"	: "true"


This is more than likely simply a Str:Str

ext.icon24=fan://finMiscComponents/res/img/icon24.png ext.icon72=fan://finMiscComponents/res/img/icon72.png

These are more than likely meta generated from items in a resource directory, although it could be a uri you have to specify in the meta - likely related to the Fin Framework, so it may be worth a second opinion on that


SlimerDude Mon 19 Apr 2021

Hi Derek,

Everything Henry mentioned is correct.

Moreover, those properties are standard SkySpark properties for defining extensions (so this question is more suited for the SkySpark forum) - but you can refer to the SkySpark docs on Resource Extensions for details.

In essence, only the ext.name property is important as that defines the name of your extension. In your case, you probably want to set it to:

meta = [
    "ext.name" : "myFantomApp"

The icon properties are old skool and aren't used anymore in SkySpark v3 / FinStack v5.

Derek Tue 20 Apr 2021

Thanks so much! That worked guys, i now see the pod i made in the program as an extension. My last question for now would be executing the javascript file in the browser. I cant do this normally because i dont have access to changing the pod that generates the <head> and <body> html. Im hoping theres a way to do this through .fan files.

I was looking through the documentation and I found a section on running javascript in the browser (https://fantom.org/doc/docLang/JavaScript), but I'm running into some errors.

test.fan(15,1): Type inference not supported for fields

test.fan(16,1): Expecting type name

Here's the code I wrote (probably messed up a lot):


Also, I'm assuming this is going to run the auto compiled javascript file, I tried doing "out.includeJs(/pod/sys/sys.js)" syntax to get the specific javascript file i created, but it gave me this error:

Unknown type 'out'
Expected identifier, not '.'

Tried including the res portion to see if that would help:

res.headers["Content-Type"] = "text/html; charset=utf-8"

out := res.out

but it told me:

Unknown type 'res'
Expected identifier, not '.'

Any help would be appreciated.

SlimerDude Wed 21 Apr 2021

Hi Derek,

Getting FinStack to load your GonnaBeJs class into the Browser and then call your code when the page loads, or on any other event, requires integration with the FinStack UI / framework. For that I would advise reaching out to J2 Innovations support, as they should be able to guide you down the best supported path.

Login or Signup to reply.