Recommended Workflow

For an optimized and efficient development experience, we recommend adopting the following workflow for creating plugins for the Re:Earth Visualizer. This approach utilizes a plugin template designed with:

• React as the front-end framework.
• ShadCN, integrated with Tailwind CSS, as the UI solution.

This workflow, rather than following the standard plugin installation process, enables the Re:Earth Visualizer to dynamically retrieve the plugin directly from the preview server. This approach significantly streamlines the development cycle by allowing faster and more efficient plugin testing and iteration.

Note

The cornerstone of this workflow is the DEV_PLUGIN feature of Re:Earth Visualizer, which enables loading plugins directly from a local development server. While the provided plugin template is a convenient starting point, it is not mandatory. You are free to create your plugin project using any framework or library of your choice. Additionally, we plan to offer more templates in the future to cater to diverse development preferences.

Create New Plugin using Template

For now we recommend using this Re:Earth Visualizer Plugin ShadCN Template.

You could create your own plugin project following these steps:

1. Navigate to the plugin directory and explore the structure of the template repository.

   cd your-new-plugin

2. Install dependencies:

   yarn install

3. Build plugin once for initialize the reqired files:

   yarn build

4. Start devlepment & preview server:

   yarn dev-build

   Note

   Now your plugin will be auto-build and serve on http://localhost:5005.

   Tip

   For more information about the template please read its README.md.

Develop plugin together with Visualizer

Before start please follow this guide to set up your visualizer application in local environment.

Quick Start

Caution

Make sure you can visit Re:Earth Visualizer at http://localhost:3000.

Setup Re:Earth Visualizer to enable DEV_PLUGIN

1. Navigate to the web directory of your local Re:Earth Visualizer project.

   cd web
   touch .env

2. Add the following environment variables to the .env file:

   .env

   REEARTH_WEB_DEV_PLUGIN_URLS='["http://localhost:5005"]'

   Web server will auto restart after .env file changes.

Create Re:Earth Visualizer Project

In order to develop a plugin, you need to create a new project on the Re:Earth Visualizer so that you can add your plugin widget to the scene and see the changes.

1. Visit your local Re:Earth Visualizer at http://localhost:3000.

2. Create a new project on Dashboard.

3. Double-click the project to enter it.

4. Click the Install Dev Plugins button (on the right end of header) to install your local plugin.

5. Go to Widgets tab and add your plugin widget into the scene.

Done! Let’s start developing!

Now you can develop your plugin together with the Re:Earth Visualizer.

The plugin will be auto-built when you save the code, and the changes will be reflected in the Re:Earth Visualizer after you click the Reload Dev Plugin Extensions button.

Dev Plugin Buttons

Install Dev Plugins:

• This tool fetches plugin files directly from the preview server, automatically zips them, and facilitates their installation.
• When to Use: Click this button when initially setting up your development environment or after any modifications to reearth.yml.

Reload Dev Plugin Extensions:

• This tool rapidly reloads all plugin extensions from the preview server.
• Advantage: Reloading only the plugin itself, not the entire page, significantly accelerates the development cycle.