Quickstart Guide

Open your terminal and install the Teachfloor CLI globally:

npm install -g @teachfloor/teachfloor-cli

Verify the installation:

teachfloor version

Log in to your Teachfloor account:

teachfloor login

You'll be prompted for:

• Email: Your Teachfloor account email
• Password: Your account password
• Organization: Select your organization (if you have multiple)

Once authenticated, verify your session:

teachfloor whoami

Create a new app called "hello-world":

teachfloor apps create hello-world

You'll be prompted for:

• App ID: Press Enter to accept the default (auto-generated)
• Display Name: Enter "Hello World"
• Description: Enter "My first Teachfloor app"
• Version: Press Enter to accept "1.0.0"

The CLI will:

1. Create the app on the platform
2. Generate the project structure
3. Install dependencies (React, Extension Kit, etc.)

✓ Creating app...
✓ Setting up app structure...
✓ Installing npm dependencies...
✓ App "Hello World" created successfully in "hello-world".

Navigate into your app directory:

cd hello-world

Your project structure looks like this:

hello-world/
├── src/
│   ├── index.js          # Entry point
│   └── views/
│       └── App.jsx       # Main view component
├── public/
│   └── index.html        # HTML template with SDK
├── teachfloor-app.json   # App manifest
├── package.json          # Dependencies
├── webpack.config.js     # Webpack config
├── tsconfig.json         # TypeScript config
└── .gitignore

Add a view to display your app in the course list page:

teachfloor apps add view

Select:

• Viewport: teachfloor.dashboard.course.list
• Component Name: Press Enter to accept "CourseListView"
• Generate example: Yes

This creates src/views/CourseListView.jsx and updates your manifest.

Open src/views/CourseListView.jsx and modify it:

import React from 'react'
import {
  Container,
  Text,
  Button,
  SimpleGrid,
  showToast,
  useExtensionContext,
} from '@teachfloor/extension-kit'

const CourseListView = () => {
  const { userContext } = useExtensionContext()

  const handleClick = () => {
    showToast('Hello from your app!', { type: 'success' })
  }

  return (
    <Container>
      <SimpleGrid verticalSpacing="md">
        <Text size="xl" fw={700}>
          Hello, {userContext.full_name}!
        </Text>
        <Text size="sm" c="dimmed">
          Welcome to your first Teachfloor app.
        </Text>
        <Button onClick={handleClick}>
          Click Me
        </Button>
      </SimpleGrid>
    </Container>
  )
}

export default CourseListView

Run the development server:

teachfloor apps start

This will:

1. Validate your manifest
2. Upload the manifest to the platform
3. Open your browser to install the app
4. Start the webpack dev server on http://localhost:3000

✓ Manifest file updated
Install URL: https://app.teachfloor.com/your-org/courses?app=abc123@1.0.0
Starting development server...

1. Your browser will open to the install URL
2. Click "Install" to add the app to your organization
3. Navigate to the course list page
4. You should see your app displayed!

The app will hot-reload as you make changes to the code.

When you're ready to deploy:

1. Stop the dev server (Ctrl+C)
2. Build the production bundle:

teachfloor apps upload

This will:

1. Run npm run build
2. Bundle your app for production
3. Upload files to the platform
4. Create a new app version

✓ Building the production bundle...
✓ Uploading files...
✓ App uploaded successfully.

If you want to make your app available in the public marketplace:

Set Distribution to Public

First, set your app's distribution type to public:

teachfloor apps set distribution

Select public when prompted. This updates your manifest:

{
  "distribution_type": "public"
}

Upload and Submit

1. Upload your app with the updated manifest:

teachfloor apps upload

2. Go to your Teachfloor dashboard
3. Navigate to Settings → Apps
4. Find your app and click "Submit for Review"
5. Wait for approval from the Teachfloor team