Replit SDK for Crimson App

This SDK facilitates the rapid integration of Replit-hosted applications into the Crimson ecosystem.

Core Principle

The integration functions by passing environment variables and user parameters via URL parameters to the Replit frontend. This data is stored in-memory and persists until the current session ends.

Project Structure

• api

  (expressRouter.ts): Provides the bindApi function, used to bind /api/function routes to server.js for forwarding API request calls.

  (graphqlProxy.ts): Defines the data structures and schemas used for forwarding GraphQL interface requests.

• components

  (external-link.tsx): A specialized component designed to handle navigation to external URLs.

• hooks

  (use-url-params.ts): The core hook for processing parameters passed via iframe. It extracts essential data such as Auth Tokens and Environment API endpoints.

• functions

  (index.ts): Contains implementations for fundamental API calls, including: fetchLoginUser, getMyStudents

• utils

  (datadog.ts): Manages the Datadog initialization instance and provides the trackEvent function for analytics.

  (event.ts): Utilities for iframe-to-parent communication using the postMessage API.

  (queryClient.ts): A pre-configured API request client wrapper.

Here is a set of prompts that you may need

Prompts from replit:

 we are going to embed the app on a iframe, so now you need to do all things one by one listed here:
1. install and save package @crimson-education/[email protected]
2. wrap the App with the `IDevProvider` context, like
  ```
  // ...
  import { IDevProvider } from "@crimson-education/replit-sdk/lib/context/dev-context";
  // ...
  function App() {
    return (
      <IDevProvider>
        <QueryClientProvider client={queryClient}>
          <TooltipProvider>
            <Toaster />
            <Router />
          </TooltipProvider>
        </QueryClientProvider>
      </IDevProvider>
    );
  }
  ```
3. set Express proxy endpint, call `bindApi(app)` to bind `/api/function` route in `server/routes.ts`
4. use the ExternalLink component to replace all the <a> tag which has a external link.
5. set dev capp endpoint on top of the app before any api call like ```
import { setStoredParams } from "@crimson-education/replit-sdk/lib/hooks/use-url-params";
setStoredParams({'cappEndpoint': 'http://6d94f1eb.r8.cpolar.top/graphql'});```
6. remove fetch button and staff userId input in every student picker dialog, and set getStoredUserId() as default staffId to load students once the dialog opened.
7. replace the fetchLoginUser and fetchMyStudent function, use the exported functions from the sdk and clean up the redundant server-side endpoints.
8. the fetchStudents api could return duplicated students, remove them to keep unique
9. init datadog, like: ```import { init as datadogInit } from "@crimson-education/replit-sdk/lib/utils/datadog";
datadogInit({ app: '{{here is the replit app name}}' });```
10. use trackEvent function to track all events that you may intrest, ```import { ExternalLink, trackEvent } from "@crimson-education/replit-sdk";
trackEvent('OPEN_COPILOT'); ```