-
Notifications
You must be signed in to change notification settings - Fork 15
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
3 changed files
with
47 additions
and
44 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,11 +1,28 @@ | ||
| This is a [Next.js](https://nextjs.org/) project bootstrapped with [`create-next-app`](https://github.com/vercel/next.js/tree/canary/packages/create-next-app). | ||
| # Next.js example app | ||
|
|
||
| ## Getting Started | ||
| Use this Next.js 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. | ||
|
|
||
| First, run the development server: | ||
| The app is built using the [React XMTP client SDK](/packages/react-sdk/README.md), [React](https://react.dev/), [Next.js](https://nextjs.org/), and [RainbowKit](https://www.rainbowkit.com/). | ||
|
|
||
| ```bash | ||
| yarn dev | ||
| ``` | ||
| To keep up with the latest example app developments, see the [Issues tab](https://github.com/xmtp/xmtp-web/issues) in this repo. | ||
|
|
||
| Open [http://localhost:3000](http://localhost:3000) with your browser to see the app. | ||
| 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 `packages/react-sdk`, run `yarn build` to build the React SDK. | ||
| 2. In `examples/nextjs`, run `yarn dev` to start the development server. | ||
|
|
||
| ## Useful commands | ||
|
|
||
| - `yarn build`: Builds the example app | ||
| - `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 format`: Runs prettier format and write changes | ||
| - `yarn format:check`: Runs prettier format check | ||
| - `yarn lint`: Runs ESLint | ||
| - `yarn typecheck`: Runs `tsc` |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,36 +1,28 @@ | ||
| # Welcome to Remix + Vite! | ||
| # Remix example app | ||
|
|
||
| 📖 See the [Remix docs](https://remix.run/docs) and the [Remix Vite docs](https://remix.run/docs/en/main/future/vite) for details on supported features. | ||
| Use this Remix 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. | ||
|
|
||
| ## Development | ||
| The app is built using the [React XMTP client SDK](/packages/react-sdk/README.md), [React](https://react.dev/), [Remix](https://remix.run/), and [RainbowKit](https://www.rainbowkit.com/). | ||
|
|
||
| Run the Vite dev server: | ||
| To keep up with the latest example app developments, see the [Issues tab](https://github.com/xmtp/xmtp-web/issues) in this repo. | ||
|
|
||
| ```sh | ||
| yarn dev | ||
| ``` | ||
| To learn more about XMTP and get answers to frequently asked questions, see the [XMTP documentation](https://xmtp.org/docs). | ||
|
|
||
| ## Deployment | ||
| ## Limitations | ||
|
|
||
| First, build your app for production: | ||
| This example app isn't a complete solution. For example, the list of conversations doesn't update when new messages arrive in existing conversations. | ||
|
|
||
| ```sh | ||
| yarn build | ||
| ``` | ||
| ## Developing | ||
|
|
||
| Then run the app in production mode: | ||
| 1. In `packages/react-sdk`, run `yarn build` to build the React SDK. | ||
| 2. In `examples/remix`, run `yarn dev` to start the development server. | ||
|
|
||
| ```sh | ||
| yarn start | ||
| ``` | ||
| ## Useful commands | ||
|
|
||
| Now you'll need to pick a host to deploy it to. | ||
|
|
||
| ### DIY | ||
|
|
||
| If you're familiar with deploying Node applications, the built-in Remix app server is production-ready. | ||
|
|
||
| Make sure to deploy the output of `yarn build` | ||
|
|
||
| - `build/server` | ||
| - `build/client` | ||
| - `yarn build`: Builds the example app | ||
| - `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 format`: Runs prettier format and write changes | ||
| - `yarn format:check`: Runs prettier format check | ||
| - `yarn lint`: Runs ESLint | ||
| - `yarn typecheck`: Runs `tsc` |