---
agentTools:
  projectIndex: https://developers.pipefy.com/llms.txt
---

# Sample Apps

Working code to start from

The fastest way to build a Pipefy app is to start from one that already works.

## HelloPipefy — React sample app

**[github.com/Pipefyteam/sample-app-react](https://github.com/Pipefyteam/sample-app-react)**

HelloPipefy demonstrates how to customize Pipefy components with basic "Hello World" examples. It is the reference sample app, and the one these docs are written against.

It covers every surface in one codebase:

| Route                           | Demonstrates                                                                                             |
| :------------------------------ | :------------------------------------------------------------------------------------------------------- |
| `Main.jsx`                      | `PipefyApp.initCall()` registering four features at once                                                 |
| `CardTab.jsx`                   | A [card tab](https://developers.pipefy.com/docs/card-tab) reading the card with `p.card()` and calling the GraphQL API with `p.query()` |
| `PipeView.jsx`                  | A [pipe view](https://developers.pipefy.com/docs/pipe-view), including the required `PipefyApp.render()` call                           |
| `Sidebar.jsx`                   | A sidebar opened from a [pipe button](https://developers.pipefy.com/docs/pipe-buttons)                                                  |
| `SidebarCardButton.jsx`         | A sidebar opened from a [card button](https://developers.pipefy.com/docs/card-buttons)                                                  |
| `ModalCardButton.jsx`           | A modal opened from a dropdown item                                                                      |
| `hooks/useResize.jsx`           | `PipefyApp.resizeTo('#root')` wired to a React effect                                                    |
| `contexts/PipefyAppContext.jsx` | Initialising the SDK once and sharing the client through context                                         |

Built with React, React Router and Vite.

### Running it

```sh
git clone https://github.com/Pipefyteam/sample-app-react.git
cd sample-app-react
npm install
npm run dev
```

### Deploying it

```sh
npm run build
```

Upload the contents of the resulting `dist` folder to any static host — Vercel, Netlify, Cloudflare Pages, GitHub Pages, S3, or your own server. Vite's [static deploy guide](https://vitejs.dev/guide/static-deploy.html) covers the common targets.

Then [register the app](https://app.pipefy.com/developers/apps) with the URL of the deployed `manifest.json`. See [Introduction](https://developers.pipefy.com/docs/build-your-first-pipefy-app) for the full walkthrough.

> ⚠️ Your app must be served over HTTPS
>
> Pipefy loads it in an iframe on an HTTPS page. To test a local build against Pipefy, expose `localhost` through an HTTPS tunnel such as `ngrok` or `cloudflared` and register that URL.

## See also

* [Introduction](https://developers.pipefy.com/docs/build-your-first-pipefy-app) — registering and hosting your app
* [Features](https://developers.pipefy.com/docs/features) — the surfaces an app can add
* [Apps Client SDK](https://developers.pipefy.com/docs/apps-client-sdk) — the API reference