# Setting up a new webapp

## How Webapps Are Embedded

Webapps run inside an iframe and are embedded into host pages using [kasko-js](https://docs.kasko.io/kasko-api-documentation/kasko-js/kasko-js), a JavaScript SDK. The basic embedding looks like:

```html
<div id="kasko-app"></div>
<script src="https://js.kasko.io/v2/kasko.js"></script>
<script>
Kasko.Setup({
  key: 'pk_test_xxxxx',      // Your publishable key
  touchpoint: 'tp_xxxxx',    // Your touchpoint ID
  mode: 'webview',
  container: 'kasko-app'
});
</script>
```

See the [kasko-js documentation](https://docs.kasko.io/kasko-api-documentation/kasko-js/kasko-js) for all configuration options including data prefilling, event callbacks, and display modes.

## As a 3rd party

To start, we need to create all the database entities required for a new product: items, touchpoints, payment providers, contents, etc. Most likely this will be done by the KASKO team and you should receive only the `touchpoint id`, `public key`, `plugin id` and `private key` for publishing the application to KASKO platform. Please reach out to the KASKO team if you are missing any of these!

Afterward, you can proceed with cloning either the [external example app](https://github.com/kasko/kasko-app-example-external) (react). This will serve as the base for the project.

Assuming that the [external example app](https://github.com/kasko/kasko-app-example-external) will be used as the base, these are the next steps:

1. create `.env` file and copy `.env.example` file's content to it
2. change the `WEBAPP_PUBLIC_KEY` variable in `.env` file (maybe `WEBAPP_LANGUAGE` as well)
3. change product id and integration id in `product.json` file
4. change project name in `package.json` and `README.md`
5. start developing!

Further information - how to test, lint and deploy the code can be found in `README.md` of the [external example app](https://github.com/kasko/kasko-app-example-external) project.

## As a KASKO employee

Warning: this guide is targeted to internal KASKO developers.

## Step-by-step guide

1. Create a new repository
   * Open [fe-projects-tf](https://github.com/kasko/fe-projects-tf)
   * Copy & paste the [webapp TF template](https://github.com/kasko/fe-projects-tf/blob/master/example-web-app.md) into a new webapp file (the filename must follow this pattern: `*-web-app`)
   * Commit the file and create a new PR
   * Once the PR is approved and merged, follow on to step 2
2. Copy the demo app
   * Open the [example app](https://github.com/kasko/kasko-app-example)
   * Copy & paste all the files & folders to the newly created repository
   * Commit the initial codebase in a feature branch
   * Create a PR (this PR should have NO custom changes; it should be just copy\&paste)
   * Get your new webapp's plugin id and change it in `kasko.yaml` file
   * Once the PR is approved and merged, follow on to step 3
3. Develop
   * This is where the fun begins :)

But before you do - remember to change the application name in `README`, `package.json` and other files as well as the touchpoint ID and public key in `.env.example`.