# 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.
```jsx
// When developing in JavaScript
App.sayToAll("Hello World!");
// When developing in TypeScript
ScriptApp.sayToAll("Hello World!");
```
### 1. Install **node.js**
{% hint style="info" %}
Visit to download and install node.js.
We recommend installing the LTS version, which is the most stable version.
{% endhint %}
### 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:
>
> .png?alt=media\&token=ea317433-1636-4009-a016-3c76e51a7d47)
Enter the command to create the project folder as follows:
```bash
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.
```bash
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.
```powershell
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](https://docs.zep.us/zep-script/zep-script-guide/zep-script-development-guide/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.)
```json
{
"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 , 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.
```powershell
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](https://zep.us/me/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](https://github.com/zep-us/zep-script-sdk/tree/main/packages/zep-script-cli)
