Creating Your First Exporter

It's time to get more practical. In this chapter, you'll create your first exporter end-to-end, resulting in an exporter package that can be used to produce real code, which you can expand upon with all the other options described in later chapters.

At the end of this tutorial, our exporter will produce an index.html file in the root export directory that will serve as a crossroads to other .html files, each one representing one screen in the project. Let's think about this example as a base structure for a portfolio of some kind. The structure of the project will look like this:

/root
     /index.html
     /screens
             /welcome.html
             /login.html
             /signup.html
             ...

Let's get to it.

Creating the exporter package

First, we need to create the exporter package. Open the example Supernova project from the welcome screen and then navigate to the exporter manager window through Menu > Blueprints > Manage Exporters. Or, optionally, press ⇧⌘E to open the window using the shortcut. Create the new exporter by selecting Create New Exporter from the menu:

When creating the exporter, you'll be presented with a configuration window where you can provide basic information to everyone who'll use your exporter:

After you fill out the required data, the exporter is ready to get started - you can Test Export but you'll find out the exporter still produces nothing. For this, we need to define the actual code.