Cord adds collaboration to your product in under an hour. Our SDK helps you re-imagine your app with a rich, real-time collaboration experience - in minutes, not months.
This starter templates helps integrates Cord into a remix app. 💽
This template follows the cord integration guide and adds page presence and a thread. You can add more components.
From your terminal, create a remix + cord app:
npx create-remix@latest --install --template getcord/cord-remix
Then cd
in the newly created folder.
From your terminal:
npm run dev
This starts your app in development mode, rebuilding assets on file changes.
First, build your app for production:
npm run build
Then run the app in production mode:
npm start
Now you'll need to pick a host to deploy it to.
If you're familiar with deploying node applications, the built-in Remix app server is production-ready.
Make sure to deploy the output of remix build
build/
public/build/
When you ran npx create-remix@latest
there were a few choices for hosting. You can run that again to create a new project, then copy over relevant code/assets from your current app to the new project that's pre-configured for your target server.
Most importantly, this means everything in the app/
directory, but if you've further customized your current application outside of there it may also include:
- Any assets you've added/updated in
public/
- Any updated versions of root files such as
.eslintrc.js
, etc.
cd ..
# create a new project, and pick a pre-configured host
npx create-remix@latest
cd my-new-remix-app
# remove the new project's app (not the old one!)
rm -rf app
# copy your app over
cp -R ../my-old-remix-app/app app
- We've added a nested layout route (
_cord.ts
) and moved the index route under it (_cord._index.tsx
): That layout route sets up collaboration for all nested routes. - The index route shows the page presence and a thread: two very common collaboration features.
- We've added an API route for handling our events webhooks. You want to run our own code when a message is added or a notification is added? This is where you can do it.
- In the
Root.tsx
we've added a dropdown to let you select a user; having more than one user is necessary to truly showcase collaboration. You will want to replace this with your own authentication.
Cord requires a key to operate. You can get a sample application key easily via the console in the Getting Started section.