Skip to content

[Vite] Instruct users to create plugins with Vite instead of CRA #23

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 2 commits into from
Feb 20, 2025
Merged

[Vite] Instruct users to create plugins with Vite instead of CRA #23

Changes from 1 commit
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
8c2b974
Instruct users to create a project with Vite not CRA
Feb 18, 2025
a03e397
Wording
Feb 19, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
32 changes: 22 additions & 10 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -67,42 +67,54 @@ While you are not required to use React for your plugin, it must be written in
Javascript and React is recommended. We support both a standard Javascript API
and a React Hooks API.

#### Create a Project with React
#### Create a Project with Vite

NOTE: Facebook's [create-react-app](https://github.com/facebook/create-react-app) breaks with React 19 (see https://github.com/facebook/create-react-app/issues/17004).

You should use [vite](https://github.com/vitejs/vite) instead to create custom plugins.
Copy link
Collaborator

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Edit the wording to not use instead. Instead of treating the change as a "we used to recommend this old way but you should use this new way instead", just make it so that the new way is "the only way we recommend".


1. Open your terminal and navigate to the directory you want to create your
project in.
2. Create your new project. We recommend using Facebook’s
[`create-react-app`](https://create-react-app.dev/).
2. Create your new project. We recommend using
[`create-vite`](https://www.npmjs.com/package/create-vite).

```sh
npx create-react-app <my-cool-plugin>
yarn create vite <my-cool-plugin>
# or
npm create vite@latest <my-cool-plugin>
```

3. Navigate to the project's main directory.
3. Then follow the prompts! You can also directly specify the project name and the template you want to use via additional command line options. For example, to scaffold a Vite + Vue project, run:

```sh
yarn create vite my-vue-app --template vue
```

4. Navigate to the project's main directory.

```sh
cd <my-cool-plugin>
```

4. Use your package manager to install Sigma’s plugin library. We recommend
5. Use your package manager to install Sigma’s plugin library. We recommend
using `yarn`.

```sh
yarn add @sigmacomputing/plugin
```

5. Spin up your local development server.
6. Spin up your local development server.

```sh
yarn && yarn start
yarn && yarn dev
```

6. Start developing:
7. Start developing:

- Get started with Sigma’s Plugin APIs.
- Test your plugin directly in a Sigma workbook using the Sigma Plugin Dev
Playground.
- By default, Create React App dev servers run on http://localhost:3000.
- By default, Vite dev servers run on http://localhost:5173.

## Testing your Plugin

Expand Down