TypeScript Development Tips

⭐ Things to Note When Developing in TypeScript

When developing with TypeScript, you must put the Script keyword in front of the App, Map, Player, or Widget keywords.

// When developing in JavaScript
App.sayToAll("Hello World!");

// When developing in TypeScript
ScriptApp.sayToAll("Hello World!");

1. Install node.js

Visit https://nodejs.org/en/ to download and install node.js.

We recommend installing the LTS version, which is the most stable version.

2. Create the Project Folder

A sample project for developing in ZEP Script can be downloaded through the CLI.

The CLI can be run from the terminal for MacOS, Windows PowerShell in windows, or the terminal environment provided since Windows 11.

Running PowerShell on Windows

Shift + right-click in the empty space of the folder in which main.js is located.

Choose Open PowerShell window here or Open command window here.

A Windows PowerShell or Command Prompt window will launch as follows:

Enter the command to create the project folder as follows:

npx zep-script init MyZepApp --npm

If the message Project {Folder Name} initialized successfully is displayed as seen above, the environment for developing ZEP Script with TypeScript is now ready.

3. Browse the Folder Structure

If you go to the created project folder, you can see the files as follows:

The res folder is an abbreviation of "resources" and is where you put images or html files needed for the app.

The main.ts file created here is where you write the app development code.

This main.ts file contains sample code as seen below. You can refer to this code for development.

With the exception of the main.ts file and res folder, the remaining files and folders are configuration files for developing ZEP Script with TypeScript, and you do not need to modify them separately during development.

4. Create a JavaScript Build

Since ZEP Script can only be executed through JavaScript, it must go through a build process that converts TypeScript to JavaScript.

Open a command window in the folder where the main.js file is located and enter the following command to create a new build.

npx zep-script build

If the build is created successfully, you can see that a folder named dist has been created.

The dist folder contains the main.js file that was created by converting the TypeScript code written in the main.ts into JavaScript.

5. Create a Compressed File

To distribute an app created with ZEP Script, you need to create a zip file that contains the main.js file and the images and html files to be used in the app.

Open a command window in the root of your project’s folder and enter the following command to create a compressed file.

npx zep-script archive

If the compression process was successful, you can check that a compressed file has been created in the folder as follows:

Finally, after creating the zip file, you’re ready to deploy the app.

6. Deploy a Project

1. Deploy on a website

You can deploy your app by uploading the zip file created above.

Refer to the ZEP Script Deployment Guide and distribute your app!

2. Deploy using CLI

You can deploy the zip file created by using CLI.

Open the zep-script.json file in the project folder and run the app to upload.

(Make sure to create the zep-script.json file.)

{
    "appId": "Zjkgoj",  // app ID
    "name": "Template", // app name
    "description": "Template application" , // app description
    "type": "normal" // app type( "normal" or "minigame" or "sidebar" )
}

⭐ appID: Enter the ID of the app to upload.

• To change an existing app, access https://zep.us/me/apps/, select an app to upload, and then enter the text appended to apps/ in the address bar. (E.g., "Zjkgoj" for the reference image below)

Once set, run PowerShell in the project folder path and enter a command for deployment as below.

npm run deploy or npx zep-script publish

When the email input section appears below, enter the email address of the account that owns the app to be deployed.

When you see the message saying, Sending login code to your email, go to the mailbox of the email you entered above. Check the verification code and enter it to the command window to start deploying.

The deploy process is complete when a green checkmark appears on the left of Publishing… as shown below.

You can see your app has been deployed in the My Apps page as described above in the zep-script.json file.

For more information about the library, please refer to the contents of the GitHub repository below. zep-script-sdk/packages/zep-script-cli at main · zep-us/zep-script-sdk