Basic Concepts

Applets

Each Applet is made up of Files that can import and export Typescript modules, just like any other Typescript project. These files make up functionality for an app that is deployed on our 'Run' domain, called zipper.run.

An applet requires a main.ts file that exports a function named handler. The 'Handler Function' defines the behavior of the root URL of the Applet.

Since the applet above is named 'greeting', the handler in main.ts would be responsible for the behavior of https://greeting.zipper.run

When running it by visiting the Run URL and clicking 'Run', it should output the following results:

Hello, world!

You can also POST to the Run URL:

POST https://greeting.zipper.run
 
HTTP 200 OK
 
Hello, world!

Handler functions can just contain the business logic of your task, and we’ll handle all the inputs and outputs.

Let's go a little deeper on what else you can do with these functions.

Handler Function

Inputs

A handler function can have optional arguments that you can pass through it. These can be anything: strings, booleans, arrays, and objects just as long as it's serializable as JSON. This is called the 'Inputs' object as is passed as a parameterized object in single argument to your handler.

Let’s start by modifying our greeting applet by letting you change the hello string and who you are saying hello to. Zipper uses the power of Typescript to help generate UI for all your inputs. Let's pass a string name to our function.

We generate UI for your function based on the the types in your Input. Check out the Input Types section for more information.

You can enter your inputs through the generated UI, by POSTing to your Run URL the entire inputs object, or prefill your inputs UI by using the query parameters. In this example,

• visiting [https://greeting.zipper.run](https://greeting.zipper.run)/?name=Earth
• sending a POST to https://greeting.zipper.run with body { "name: "Earth" }
• or manually filling out “Earth” in the input and clicking “Run”

Should all do the same thing and output:

Hello, Earth!

Output

You can output more than just strings: objects, arrays, arrays of objets, even HTML. Zipper makes the output pretty and human readable for you, and even includes some basic components to make your Applet more powerful.

For more on Output, see the Output section.

Handler Context

You can also get some special information about the applet or the specific run through the 'Handler Context' object, which is passed as the second argument to a Handler Function. To make it easy and safe to see what you might have on the context argument, you can use the Zipper.HandlerContext type.

Let’s say you wanted to see if someone is signed into Zipper and use their email instead of the name input they passed.

If I’m logged in as 'Bruce' from 'Wayne Co' then my output might be something like:

Hello, bruce@wayne.co!

Paths

main.ts is not the only file that can export a Handler Function. You can create a path for your applet by adding a new file and exporting a handler there. So let’s say you wanted to create a new path in Greeting at https://greeting.zipper.run/salutations, you would create a salutations.ts (the path will match everything before the .ts in the filename) and export a handler function.

This path can be run independently so you can test each function by itself.

Library files

If you create a file, you do not have to export a handler. This will make it a 'Library' file, so that you can share code throughout your applet like a normal Typescript module.

Handler Config

You can also export a config file that will control behavior when visiting the 'Run URL'. Note, it doesn’t change how POSTing and API calls work. So for example, if you’d like my Handler Function to run when a user loads the page (instead of having to input) and define a default value, you can do it like this, you can do it like so:

Since it’s set to run and we’ve provided a defaultValue for name, a user will not have to click run when hitting the Run URL and instead get the output of handler:

Hello, world!

See more in the Config (opens in a new tab) section.