From 8c2b974f0048f7fa9cb36f1a46d257b710a58bf6 Mon Sep 17 00:00:00 2001 From: Ashna Arya Date: Tue, 18 Feb 2025 15:59:40 -0800 Subject: [PATCH 1/2] Instruct users to create a project with Vite not CRA --- README.md | 32 ++++++++++++++++++++++---------- 1 file changed, 22 insertions(+), 10 deletions(-) diff --git a/README.md b/README.md index a2269f6..ac60891 100644 --- a/README.md +++ b/README.md @@ -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. 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 + yarn create vite + # or + npm create vite@latest ``` -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 ``` -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 From a03e39789b11c0615ad388ec56fa13fecd91e1a4 Mon Sep 17 00:00:00 2001 From: Ashna Arya Date: Tue, 18 Feb 2025 16:58:43 -0800 Subject: [PATCH 2/2] Wording --- README.md | 8 +++----- 1 file changed, 3 insertions(+), 5 deletions(-) diff --git a/README.md b/README.md index ac60891..45a5f3e 100644 --- a/README.md +++ b/README.md @@ -69,10 +69,6 @@ and a React Hooks API. #### 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. - 1. Open your terminal and navigate to the directory you want to create your project in. 2. Create your new project. We recommend using @@ -114,7 +110,9 @@ You should use [vite](https://github.com/vitejs/vite) instead to create custom p - Get started with Sigma’s Plugin APIs. - Test your plugin directly in a Sigma workbook using the Sigma Plugin Dev Playground. - - By default, Vite dev servers run on http://localhost:5173. + - By default, vite dev servers run on http://localhost:5173. + +NOTE: Facebook's [create-react-app](https://github.com/facebook/create-react-app) is deprecated. You should use [vite](https://github.com/vitejs/vite) to setup your project. ## Testing your Plugin