Setting Up Your Component SDK Project
Authors:
Cameron Johns, Cille Schliebitz, Anita Gu
Changed on:
3 Feb 2025
Overview
This lesson provides a step-by-step guide to downloading, installing, and setting up a new Component SDK project. You'll learn how to prepare your development environment, install necessary dependencies, and run the project locally. We'll also cover the crucial step of referencing your local plugin within your Fluent Web Apps manifest, enabling you to integrate your custom components into your applications.
Key points
- Download and Extract: Download the Component SDK zip file and extract it to a suitable development location on your computer.
- Yarn Installation: Navigate to the folder in your terminal and run yarn install to download all project dependencies.
`omx-component-sdk` - Visual Studio Code Setup: Open the project in Visual Studio Code and verify that the sample components (e.g., ) are error-free.
`Hello.tsx` - Local Development Server: Start the development server using yarn start. This allows you to run your plugin locally and test it within your Fluent Web Apps.
- Manifest Configuration: Add a reference to your local plugin project (running on localhost:3001) within your Fluent Store main manifest () using a "type": "url" and "src" entry, linking your development environment to your application.
`fc.mystique.manifest.store`
In this lesson, you will follow the steps to download the Component SDK and set up a new Component plugin project.
Complete the steps below:
- Download the Component SDK file.
- Save the Component SDK zip file to your computer, and extract the zip file to a suitable location for development.
Extracting ZIP Folders
This video explains how to extract the ZIP folder
The Component SDK is a React-based web project that uses the yarn package manager.
Watch the following video to complete the steps below to install the Component SDK:
- Open a terminal (command line) window, and change the directory into the folder.
`omx-component-sdk` - Next, run — this will download all the required dependencies set by the SDK.
`yarn install` - Now open the folder in Visual Studio Code — You will notice that the project contains some sample components.
`omx-component-sdk` - Open the file and make sure that the Hello component file doesn't contain errors or red underlines.
`Hello.tsx` - While in development mode, you can run the project locally and reference it in your Fluent Web Apps manifest — You will configure this later in the course. However, in the meantime, switch back to the terminal window and start the project using
`yarn start`
Installing Yarn
This video explains how to install Yarn
To use your plugin in a Fluent Web App, you can add a reference to your local plugin project running on localhost to your manifest file.
You should also have the Fluent Store main manifest overridden in your account, as this was used in the UX Framework course.
Open the
`fc.mystique.manifest.store``{`` "type": "url",`` "src":"http://localhost:3001/"``}`Updating the Manifest
This video explains how to update the manifest
