diff --git a/.github/workflows/browser-sdk.yml b/.github/workflows/browser-sdk.yml new file mode 100644 index 000000000..ce2dc5591 --- /dev/null +++ b/.github/workflows/browser-sdk.yml @@ -0,0 +1,79 @@ +name: Browser SDK + +on: + push: + branches: + - main + + pull_request: + paths: + - "sdks/browser-sdk/**" + - ".github/workflows/browser-sdk.yml" + - "dev/**" + - ".node-version" + - ".nvmrc" + - ".yarnrc.yml" + - "turbo.json" + - "yarn.lock" + +jobs: + typecheck: + name: Typecheck + runs-on: warp-ubuntu-latest-x64-8x + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version-file: ".nvmrc" + cache: "yarn" + env: + SKIP_YARN_COREPACK_CHECK: "1" + - name: Enable corepack + run: corepack enable + - name: Install dependencies + run: yarn + - name: Typecheck + run: yarn turbo run typecheck --filter='./sdks/browser-sdk' + + test: + name: Test + runs-on: warp-ubuntu-latest-x64-8x + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version-file: ".nvmrc" + cache: "yarn" + env: + SKIP_YARN_COREPACK_CHECK: "1" + - name: Enable corepack + run: corepack enable + - name: Install dependencies + run: yarn + - name: Install playwright browsers + working-directory: ./sdks/browser-sdk + run: yarn playwright install + - name: Start dev environment + run: ./dev/up + - name: Sleep for 5 seconds + run: sleep 5s + - name: Run tests + run: yarn turbo run test --filter='./sdks/browser-sdk' + + build: + name: Build + runs-on: warp-ubuntu-latest-x64-8x + steps: + - uses: actions/checkout@v4 + - uses: actions/setup-node@v4 + with: + node-version-file: ".nvmrc" + cache: "yarn" + env: + SKIP_YARN_COREPACK_CHECK: "1" + - name: Enable corepack + run: corepack enable + - name: Install dependencies + run: yarn + - name: Build + run: yarn turbo run build --filter='./sdks/browser-sdk' diff --git a/examples/react-vite-browser-sdk/README.md b/examples/react-vite-browser-sdk/README.md new file mode 100644 index 000000000..740c222c3 --- /dev/null +++ b/examples/react-vite-browser-sdk/README.md @@ -0,0 +1,24 @@ +# React Vite example app + +Use this React Vite example app as a tool to start building an app with XMTP. This basic messaging app has an intentionally unopinionated UI to help make it easier for you to build with. + +The app is built using the [XMTP client SDK for browsers](/sdks/browser-sdk/README.md), [React](https://react.dev/), and [Vite](https://vitejs.dev/). + +To keep up with the latest example app developments, see the [Issues tab](https://github.com/xmtp/xmtp-js/issues) in this repo. + +To learn more about XMTP and get answers to frequently asked questions, see the [XMTP documentation](https://xmtp.org/docs). + +## Limitations + +This example app isn't a complete solution. For example, the list of conversations doesn't update when new messages arrive in existing conversations. + +## Developing + +1. In `sdks/browser-sdk`, run `yarn build` to build the browser SDK. +2. In `examples/react-vite-browser-sdk`, run `yarn dev` to start the development server. + +## Useful commands + +- `yarn clean`: Removes `node_modules`, `dist`, and `.turbo` folders +- `yarn dev`: Launches the example app and watches for changes, which will trigger a rebuild +- `yarn typecheck`: Runs `tsc` diff --git a/examples/react-vite-browser-sdk/index.html b/examples/react-vite-browser-sdk/index.html new file mode 100644 index 000000000..31cf5d729 --- /dev/null +++ b/examples/react-vite-browser-sdk/index.html @@ -0,0 +1,12 @@ + + +
+ + +