Work online in the Koji code editor

The Koji code editor is a browser-based integrated development environment (IDE) that you can use to develop and test your Koji app. The code editor provides easy access to the following:

All of your app’s code.
Tools to preview and test your app.
Tools to publish and deploy your app.

Opening an app in the Koji code editor

Go to the Project Details page.
- If you’re creating a new app, you can fork any scaffold or any Koji app that allows forking.
- If you’re editing an existing app, go to your Developer Portal page and click the app to edit.
In the Project Details page, click Open in Code Editor.

The Koji code editor space is divided into these sections.

Navigation pane – Lists menu items and source code.
Editing pane – Displays open files. Supports multiple tabs.
Preview pane – Displays a live preview of the Koji app and provides other testing and debugging tools.
Terminal pane – Provides command-line access to the Koji app’s services. Supports multiple tabs and is initially collapsed.

Koji source control

Each Koji app is stored in a Git repository in the cloud.

When you fork an existing app or scaffold, the Git repository of that app/scaffold is copied to your account.

When you use the code editor to publish your Koji app, the code editor commits your changes and pushes the updated files to the master branch. This push triggers the deployment process.

Important

If you made changes to your application files outside the Koji editor, you must update the application files before editing them in the code editor again.

Previewing your Koji app

Previews in the code editor

If your app includes different contexts, you can select which context is displayed in the preview pane.

Default - Displays a fully functional preview of your Koji app. The Default context is always enabled.
Remix - Displays what a creator sees when customizing your Koji app.
More - Displays a menu of additional previews.
- Receipt (seller) - Displays a preview of the transaction receipt for the seller, if you implemented in-app purchases and enabled the dynamic receipts entitlement.
- Receipt (buyer) - Displays a preview of the transaction receipt for the buyer, if you implemented in-app purchases and enabled the dynamic receipts entitlement.
- Thumbnail - Displays how your Koji app will look if it’s shared on social media.

Previews outside the code editor

You can also preview a Koji app outside the code editor.

The QR code button displays a QR code for your app. Scan this code to preview the app on your mobile device.
The remote staging button opens a preview of your app in a new browser tab.

Note	The staging location is available only while the Koji code editor is active.

Debugging

To open the debugger in a new browser tab, click Launch Debugger. For more information, go to Using the Koji debugger.

Publishing your Koji app

You can publish your app from the code editor.

Under Project, click Publish Now.
Enter a name for the project.
(Optional) Configure other settings.
Click Publish New Version.
After your app is published, click the link in the success message to view it.

You can share this permalink URL with collaborators and testers. If you update and republish your app, the link remains the same.

Tips

While editing a plain text file, such as .js, .html, or .json, you can open menus with additional editing options.
Learn how…
- To open a contextual menu, right-click anywhere in the editing pane.
- To open the Command Palette, move your cursor focus inside the editing pane and press F1.
You can revert to a previous version of your app.
Learn how…
Warning
You will lose all commits that were done after the commit you intend to restore.
1. Open your app in the code editor.
2. Expand the terminal pane.
3. Run git log and copy the hash code of the commit you want to restore.
4. In the terminal pane, enter git reset --hard <commit-hash>.
Publish more frequently for a more detailed commit history.
If you accidentally closed the frontend terminal, you can reopen it.
Learn how…
1. In the code editor, expand the terminal pane.
2. Click New tab.
3. Run:
  
  cd frontend npm start
Save frequently. If your network connection is interrupted or switched, the latest changes you made in the code editor might not be saved.

Note	Koji apps run on Node.js 14.15.5 and npm 6.14.11.