Building a React Project from Scratch for Sitecore Content Hub External Components Using Vite

Creating custom components for Sitecore Content Hub can significantly enhance functionality and provide tailored user experiences. This guide will walk you through setting up a React project from scratch to build reusable external components, and includes a sample component to illustrate the process. We’ll cover two methods: using a provided GitHub repository or building everything from scratch on your local machine.

Method 1: Use the GitHub Repository

If you want to get started quickly, you can clone a pre-configured repository, which includes a sample "User Info" component for reference.

Go to the GitHub Repository.
Clone or download the repository.
Follow the instructions in the README.md file to get set up. The "User Info" component serves as an example of how to structure and build components.
After exploring the setup, you can replicate the approach to create new components.

Method 2: Build from Scratch

For a deeper understanding of how everything fits together, follow these steps to set up a React project from scratch using Vite as the build tool.

Step 1: Set Up Your Project Folder

Create a New Folder: In a location of your choice, create a new folder, e.g., SCHUB-REACTREPO.
Open Terminal: Open your terminal and navigate to the new folder.

Step 2: Initialize the Project with Vite

Run Vite Setup Command: In your terminal, run:

npm create vite@latest
Press Enter and confirm to proceed.

Choose Project Details:

Project Name: Name your project (e.g., react-sch-project).
Framework: Choose React.
Variant: Select TypeScript.

Check Project Structure: Once the project setup completes, open your folder in an editor like VS Code. You should see a basic project structure generated by Vite.

Step 3: Install Dependencies and Start Local Server

Navigate to Project Directory:
```
cd react-sch-project
```
Install Required Packages:
```
npm install
```
Run Development Server:
```
npm run dev
```

Verify Local Server: Open your browser and navigate to http://localhost:5137. You should see the Vite + React project running.

Step 4: Add Basic SSL Support

For secure communication, you’ll need to configure SSL:

Install SSL Plugin:

npm install @vitejs/plugin-basic-ssl

Configure SSL in Vite:

Open vite.config.ts.

Import basicSsl:

import basicSsl from '@vitejs/plugin-basic-ssl';

In defineConfig, pass basicSsl to the plugins array:
```
plugins: [basicSsl()]
```

Update Dev Script:

Open package.json and add --host --https --cors to the dev script:
```
"dev": "vite --host --https --cors"
```

Verify HTTPS: Restart the server and check https://localhost:5137 in your browser.

Step 5: Resolve Node Types Error

While configuring Vite, you might encounter an error related to Node types. To fix this:

Install Node Types:

npm install --save-dev @types/node

Step 6: Build and Add Your Sample Component

To get you started, let’s add a sample "User Info" component and build it as a minified JavaScript file.

Create a New Component: Inside src, create a folder (e.g., components) and add a new component file, UserInfo.tsx.
Build Component:
```
npm run build --component=UserInfo
```

dist

Access the Minified JavaScript:

Open your browser and navigate to:
```
https://localhost:5173/dist/UserInfo.js
```
You should see the minified JavaScript code for the UserInfo component.

Start Dev Server Again:
```
npm run dev
```

Summary

Following these steps, you've created a project that allows for rapid development and testing of external components for Sitecore Content Hub. This guide provides flexibility—whether you prefer to clone an existing setup or configure a new one.

Thank you for reading, keep exploring, and continue building powerful, customized experiences for Sitecore Content Hub. Happy coding!😊👋