iframe app docs

This guide will help you set up a local development environment for working with apps loaded as iframes in in-context.

example app

index.html showcases:

• sending metrics.
• ending a task.
• receiving from the parent window.

setting up a local development environment

For most cases you can use a simple HTTP server to serve your script files. If you're developing an app or require more complex setups with multiple files and bundling, Vite is a good alternative.

1. http-server

http-server is a simple, zero-configuration command-line HTTP server.

Installation:

npm install -g http-server

Usage:

1. Navigate to the directory containing your script file.
2. Run http-server -c-1 --cors. This will start a server, usually on port 8080.
   • -c-1 disables caching, which is helpful during development.
   • --cors enables Cross-Origin Resource Sharing (CORS), which is required for loading the script from localhost.

Your script will then be accessible at http://localhost:8080/your-script.js.

2. vite

Vite is a fast, modern build tool that also includes a development server with hot module replacement, installation will vary based on your technology stack. Below is a basic setup for a vanilla JavaScript project.

Installation:

npm install -g create-vite
npm create-vite my-incontext-script --template vanilla
cd my-incontext-script
npm install

Configuration:

To enable CORS and disable caching, you need to modify the Vite configuration, add the following to your vite.config.js file:

import { defineConfig } from 'vite';

export default defineConfig({
	server: {
		cors: true,
		headers: {
			'Cache-Control': 'no-store',
		},
	},
});