React workspace setup guide

Step 1: Scaffolding

Create a fresh Vite-powered React TypeScript project (you can drop -ts if you don’t want TS):

npm create vite@latest my-react-app -- --template react-ts

You’ll be prompted with a few configuration options.

Keep in mind that if you opt for adding the React Router you must use it in the Hash Mode.

When the script finishes, you can run the following commands:

cd my-react-app
npm install

Step 2: Integrate Component SDK

To integrate the Component SDK in the workspace, run the following command:

npm install -D @ixon-cdk/core @ixon-cdk/runner @ixon-cdk/types

Step 3: Generate IFrame wrapper component

Now that the workspace is correctly set up to run IXON Component SDK commands, run the following command to generate a component:

npx cdk generate my-component

Choose the IFrame wrapper template.

Step 4: Configure Vite

In the vite.config.ts file you must add the following lines to set a new base and build.outDir for the vite build:

  export default defineConfig({
+   base: './',
+   build: {
+     outDir: 'components/my-component/dist'
+   },
    plugins: [react()],
    resolve: {
      alias: {
        '@': fileURLToPath(new URL('./src', import.meta.url))
      }
    }
  })

Step 5: Build and Simulate

You can now build the React app and simulate it through the iframe wrapper component, by running these two commands:

npx vite build --watch
npx cdk simulate my-component

Step 6: Component Context

Within the React app you can access the IXON component context by importing the getComponentContext function which returns a Promise that resolves with the component context instance.

import React, { useEffect, useState } from 'react';
import { getComponentContext } from '@ixon-cdk/iframe-adapter';

type ComponentContextType = Awaited<ReturnType<typeof getComponentContext>>;

const ExampleReactComponent: React.FC = () => {
  const [context, setContext] = useState<ComponentContextType | null>(null);

  useEffect(() => {
    (async () => {
      const ctx = await getComponentContext();
      setContext(ctx);
    })();
  }, []);

  if (!context) return <div>Loading component context…</div>;

  return (
    <div>
      <h2>IXON Component</h2>
      <pre>{JSON.stringify(context, null, 2)}</pre>
    </div>
  );
};

export default ExampleReactComponent;