Port existing code to Koji

In this tutorial, you will port an existing web app to Koji. You will then build and deploy the app to the Koji platform.

Prerequisites

Familiarity with basic Git commands.
Familiarity with the Koji editor and customization process. For an overview, go through the Koji starter tutorial.

Starting from a scaffold

Because every new Koji app is a fork of an existing one, you will want to find a good place to start from. There are scaffolds for many existing application frameworks, including Phaser, P5, and React.

In this case, you will be working with a React app.

Open the Frontend-Only React Starter scaffold.
Click Fork. After a short loading time, the app opens in Project Details.
Click Open in Code Editor. After a short loading time, the app opens in the Koji editor.

Bringing in existing code

There are many ways to bring existing code into your Koji project. If you have private files to import, you could share them using a service and bring them in with something like wget.

For this example, you will import files from a public git repository. This repository contains the code for Paul Houghton’s Mortgage Overpayment Calculator.

In the Koji editor, open the frontend terminal, and cancel the running process (for example, press Ctrl+C).
Clone the Mortgage Overpayment Calculator repository into a temporary folder.
```
git clone https://github.com/paulhoughton/mortgage.git temp
```
Go to the temp/src folder, and move all the files from frontend/temp/src into frontend/src. They will replace some of the files already in that folder.
```
cd temp/src
mv *.* ../../src
```
In the navigation panel, find the package.json file in the temp folder, and open it in the Koji editor.

Mortgage Overpayment Calculator uses some functions from the D3.js JavaScript library to draw graphs. These functions must be listed as dependencies in the package.json file.

Copy the following lines to the clipboard.

"d3-axis": "^1.0.12",
"d3-scale": "^2.2.2",
"d3-selection": "^1.4.0",
"d3-shape": "^1.3.4",
"d3-transition": "^1.2.0",

In the navigation panel, find the package.json file in the frontend folder and open it in the Koji editor.

Paste the lines into the dependencies section. The new contents should look something like this.

{
  "name": "frontend",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "d3-axis": "^1.0.12",
    "d3-scale": "^2.2.2",
    "d3-selection": "^1.4.0",
    "d3-shape": "^1.3.4",
    "d3-transition": "^1.2.0",
    "@testing-library/jest-dom": "^5.11.4",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "@withkoji/core": "^1.3.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.1",
    ...

Be sure to save the file.
In the navigation panel, find index.html in the temp/public folder and open it in the editor.

Copy the following lines to the clipboard.

<link
  rel="stylesheet"
  href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
/>

In the navigation panel, find the index.html in the frontend/public folder and open it in the editor.

Paste the lines into the header section of the file. It should look something like this.

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <link rel="icon" href="%PUBLIC_URL%/favicon.ico" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="description"
      content="Web site created using create-react-app"
    />
    <link
      rel="stylesheet"
      href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"
    />
    <link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
    ...

Be sure to save the file.
In the terminal, go back to the frontend folder, and remove the temporary folder.
```
cd ../..
rm -rf temp
```
Run the npm install command to install the new packages, then run the start command.
```
npm install
npm start
```
Refresh the preview to see the Mortgage Overpayment Calculator.

Publishing your app

You are now ready to test a live build of your project.

Click Publish Now on the left side of the editor.

You will be prompted to enter additional information about your app, such as the name and description.
Click Publish New Version.

Publishing runs the build commands specified for the project, and then displays a live link to your production app.

Wrapping up

Hopefully, this tutorial has given you a better understanding of how to bring existing code onto the Koji platform. As a next step, you could make your app customizable by allowing creators to change the title or the color scheme, for example. And don’t forget to add your app to the App Store so that creators can add it to their profiles!