React App Setup with Vite and Vitessce

This repository demonstrates how to set up a basic Vitessce application using Vite and React.

Prerequisites

• Node.js: Ensure you have Node.js installed. Vitessce has been tested with Node.js versions 16 and 18. (vitessce.io)

📦 Project Initialization

1. ** This project was created as a Vite React Template project with the following command **:

   npm create vite@latest vitessce-demo-gh-pages -- --template react

2. Navigate to the project directory:

   cd vitessce-demo-gh-pages

3. Install dependencies:

   npm install

4. Install specific React versions compatible with Vitessce:

   npm install react@18.0.0 react-dom@18.0.0

   Vitessce is compatible with React version 18.0.0. (vitessce.io)

5. Install Vitessce:

   npm install vitessce

🚀 Running the Development Server

Start the development server with:

npm run dev

This will start the Vite development server, typically accessible at http://localhost:5173/.

🧩 Integrating Vitessce into Your React App

To embed Vitessce into your React application:

1. Import the Vitessce component:

   import { Vitessce } from 'vitessce';

2. Provide a view configuration:

   Create a JSON object that defines the layout and data sources for Vitessce. Refer to the Vitessce documentation for details on crafting view configurations.

3. Render the Vitessce component:

   <Vitessce
     config={yourViewConfig}
     height={800}
     theme="light"
   />

   Replace yourViewConfig with your actual configuration object.

📄 Notes

• React Version: Ensure you're using React version 18.0.0 for compatibility with Vitessce.

• Vite Version: At the time of writing, the latest version of Vite is 6.3.5. Ensure your project uses a compatible version.

• Vitessce Documentation: For more detailed information on integrating and configuring Vitessce, visit the official documentation.