Skip to content

Files

Latest commit

jsendojsendo
Merge branch 'je/dev-ex-improvements' into je/unset-component-key-on-…
Feb 20, 2025
ba3fc08 · Feb 20, 2025

History

History

connect-react-demo

Folders and files

NameName
Last commit message
Last commit date

parent directory

..
app
app
Feb 14, 2025
components/ui
components/ui
Nov 28, 2024
lib
lib
Feb 19, 2025
public
public
Nov 28, 2024
.env.example
.env.example
Nov 28, 2024
.gitignore
.gitignore
Nov 28, 2024
.pnpmfile.cjs
.pnpmfile.cjs
Feb 19, 2025
.tool-versions
.tool-versions
Nov 28, 2024
Makefile
Makefile
Feb 19, 2025
README.md
README.md
Feb 19, 2025
components.json
components.json
Nov 28, 2024
next-env.d.ts
next-env.d.ts
Nov 28, 2024
next.config.mjs
next.config.mjs
Nov 28, 2024
package-lock.json
package-lock.json
Jan 7, 2025
package.json
package.json
Feb 20, 2025
pnpm-lock.yaml
pnpm-lock.yaml
Feb 20, 2025
postcss.config.mjs
postcss.config.mjs
Nov 28, 2024
tailwind.config.ts
tailwind.config.ts
Nov 28, 2024
tsconfig.json
tsconfig.json
Nov 28, 2024

README.md

Pipedream Components Demo (React)

Clone this Next.js demo app

git clone https://github.com/PipedreamHQ/pipedream-connect-examples.git
cd connect-react-demo

Install dependencies

pnpm install

Create necessary Pipedream resources

  1. A Pipedream account and workspace
  2. A Pipedream API OAuth client
  3. Your project's ID

Set your environment variables

Copy the .env.example file to .env.local and fill in the values.

cp .env.example .env.local

Run the app

pnpm dev

How to test @pipedream/connect-react changes with this app

clone this repo as well as the the repo that contains connect-react (pipedream). Make sure the two repos are cloned in the same parent directory

git clone https://github.com/PipedreamHQ/pipedream-connect-examples.git
git clone https://github.com/PipedreamHQ/pipedream.git

Install dependencies and build connect-react. Using watch will rebuild the package when changes are detected.

cd pipedream/packages/connect-react
pnpm install
pnpm watch

In a separate tab install dependencies and run the demo app. Be sure to set the correct values in .env.local

cd pipedream-connect-examples/connect-react-demo
cp .env.example .env.local
make connect-react-dev

Changes made in connect-react will not be automatically loaded by the app. To pick them up you'll need to restart make connect-react-dev

A change like the following is an easy way to check that your connect-react changes have been picked up (all app names will be prefixed with 'hello world!'

diff --git a/packages/connect-react/src/components/SelectApp.tsx b/packages/connect-react/src/components/SelectApp.tsx
index 61fe7bd27..a9378297d 100644
--- a/packages/connect-react/src/components/SelectApp.tsx
+++ b/packages/connect-react/src/components/SelectApp.tsx
@@ -48,7 +48,7 @@ export function SelectApp({
               />
               <span style={{
                 whiteSpace: "nowrap",
-              }}>{optionProps.data.name}</span>
+              }}>hello world!{optionProps.data.name}</span>
             </div>
           </Option>
         ),

TODO

It would be nice for changes to connect-react while watched to be picked up without having to restart the demo app.