@viethung26/schema-kit

A schema editor toolkit for Weaverse applications that helps manage component schemas and configurations.

Note: This package can work with or without React Router installed. React Router is an optional peer dependency.

Features

• 🚀 Server-side rendering
• ⚡️ Hot Module Replacement (HMR)
• 📦 Asset bundling and optimization
• 🔄 Data loading and mutations
• 🔒 TypeScript by default
• 🎉 TailwindCSS for styling
• 📖 React Router docs

Getting Started

Installation

Install the package from npm:

npm install @viethung26/schema-kit

Or using yarn:

yarn add @viethung26/schema-kit

Optional Dependencies

For full functionality, you may want to install React Router:

npm install react-router@^7.5.3 @react-router/node@^7.5.3 @react-router/serve@^7.5.3

However, the package can also work without React Router installed, with some limitations.

Usage

import { init, getConfig, components } from '@viethung26/schema-kit';

// Initialize with default configuration
const config = init();

// Or initialize with custom configuration
const customConfig = init({
  schemaPath: './custom-schemas',
  outputPath: './custom-output'
});

// Access configuration later in your code
const currentConfig = getConfig();

// Use components
const { sectionList, schemaEditor } = components;

Configuration

The schema-kit package automatically looks for configuration in the following places (in order of precedence):

1. Explicitly passed config object - Highest priority

   import { init } from '@weaverse/schema-kit';
   const config = init({ sectionsPath: './my-sections' });

2. schemakit.config.json in the project root - Create this file in your project root

   {
     "sectionsPath": "./sections",
     "port": 3000,
     "projectSettings": {
       "namespace": "my-app",
       "version": "1.0.0"
     }
   }

3. schemakit field in package.json - Add this to your project's package.json

   {
     "name": "your-project",
     "schemakit": {
       "sectionsPath": "./sections",
       "port": 3000
     }
   }

4. Default configuration - Used if no other configuration is found

   {
     sectionsPath: './sections'
   }

Using Schema Kit in Your Project

Schema Kit is designed to run independently with minimal setup. Just follow these simple steps:

1. Install the package globally

   npm install -g @weaverse/schema-kit

2. Create a schemakit.config.json file in your project root

   {
     "sectionsPath": "./sections",
     "port": 3000,
     "projectSettings": {
       "namespace": "my-app",
       "version": "1.0.0"
     }
   }

3. Run the schemakit tool

   Schema Kit provides several commands for different purposes:

   # Serve the built application (default)
   schemakit
   
   # Start development server (with hot reloading)
   schemakit dev
   
   # Build the application for production
   schemakit build

   You can also run the command using npm scripts if you've installed the package locally:

   # Run the schemakit command (serves the built application)
   npm run schemakit

That's it! The schemakit tool will automatically read your configuration file and execute the command you specified.

Alternative: Local Installation

If you prefer not to install globally, you can also:

1. Install as a dev dependency

   npm install --save-dev @weaverse/schema-kit

2. Run using npx

   npx schemakit

The development server will start automatically and be available at the port you specified (e.g., http://localhost:3000).

CLI Commands

The schemakit CLI supports the following commands:

• schemakit - Serve the built application (default)
• schemakit dev - Start the development server
• schemakit build - Build the application for production
• schemakit help - Show help information

If you installed the package locally instead of globally, prefix the commands with npx:

• npx schemakit
• npx schemakit dev
• npx schemakit build
• npx schemakit help

Behavior with and without React Router

The CLI behaves differently depending on whether React Router is installed:

| Command | With React Router | Without React Router | |---------|------------------|----------------------| | schemakit | Uses React Router to serve the built app | Falls back to a simple HTTP server (serve) | | schemakit dev | Uses React Router dev server with HMR | Falls back to a simple HTTP server | | schemakit build | Builds the app with React Router | Requires React Router for building |

Note that the build command currently requires React Router to be installed. If you're using the package in a project without React Router, you'll need to install it temporarily for building.

Publishing to npm

When you're ready to publish your package to npm, follow these steps:

1. Make sure you've updated all the necessary files in your src directory
2. Update the version in package.json
3. Build the package for publishing:

npm run build:lib

4. Login to npm (if you haven't already):

npm login

5. Publish the package:

npm publish

The package will automatically run the prepare script before publishing, which builds the library.

Building for Development

Create a development build:

npm run build

Deployment

Docker Deployment

To build and run using Docker:

docker build -t my-app .

# Run the container
docker run -p 3000:3000 my-app

The containerized application can be deployed to any platform that supports Docker, including:

• AWS ECS
• Google Cloud Run
• Azure Container Apps
• Digital Ocean App Platform
• Fly.io
• Railway

DIY Deployment

If you're familiar with deploying Node applications, the built-in app server is production-ready.

Make sure to deploy the output of npm run build

├── package.json
├── package-lock.json (or pnpm-lock.yaml, or bun.lockb)
├── build/
│   ├── client/    # Static assets
│   └── server/    # Server-side code

Styling

This template comes with Tailwind CSS already configured for a simple default starting experience. You can use whatever CSS framework you prefer.

Built with ❤️ using React Router.