partykit / remix-starter

🎈 PartyKit ⤫ Remix 💿

Welcome to 🎈 PartyKit ⤫ Remix 💿!

This is a starter template for Remix and PartyKit. You can create a new project based on this template with the Remix CLI:

npx create-remix@latest --template partykit/remix-starter

• Remix Docs
• PartyKit Docs

NB: This is a beta release, so expect some rough edges. Please file issues or feedback at https://github.com/partykit/remix-starter!

Development

You will be running two processes during development:

• The Remix development server
• The PartyKit server

Both are started with one command:

npm run dev

Open up http://127.0.0.1:1999 and you should be ready to go!

If you want to check the production build, you can stop the dev server and run following commands:

npm run build
npm start

Then refresh the same URL in your browser (no live reload for production builds).

Deployment

npm run deploy

If you don't already have a PartyKit account, you'll be prompted to create one during the deploy process.

Thanks

(This starter based on the original template for Cloudflare Workers)

remix-starter's Issues

"No matching version found for partykit@^1.19.3" on fresh install

Trying to run the sample command, get this error after being asked whether i want to run npm install

npm ERR! code ETARGET
npm ERR! notarget No matching version found for partykit@^1.19.3.
npm ERR! notarget In most cases you or one of your dependencies are requesting
npm ERR! notarget a package version that doesn't exist.

npm ERR! A complete log of this run can be found in: /Users/esra/.npm/_logs/2023-08-30T03_36_08_994Z-debug-0.log
Command failed: npm install

I'll figure it out, but thought you'd want to know :)

▲ Oh no! There was a problem fetching the file from GitHub. The request responded with a 403 status. Please try again later.

HTTP status 522 when fetching a room from the server

Description:
Fetching a room from the server (loader or action) via HTTP request works fine locally, but fails consistently with a 522 HTTP status when deployed. I am not sure if this is a Remix-specific issue, but since I've only tried with this starter, and it's seemingly easy to reproduce I'll put it here, lmk if I should move it elsewhere.

Steps to reproduce:

1. Create a new Partykit app: npx create-remix@latest ./my-partymix-app --template partykit/remix-starter
2. Replace the loader in routes/_index.tsx with the following code:

export async function loader() {
  const room = await PartySocket.fetch({
    host: PARTYKIT_HOST,
    room: "123",
  });

  if (!room.ok) {
    throw json({
      error: await room.text(),
    }, { 
      status: room.status
    });
  }

  return json({ partykitHost: PARTYKIT_HOST, room: await room.json() });
}

3. Add the following handler to party/main.ts:

onRequest() {
  return Response.json({ hello: "world" });
}

4. Deploy the app, and watch it throw an error with the 522 HTTP status when you visit it. It works fine locally. I have deployed the exact code above here: https://522-demo.haakonmt.partykit.dev/

EDIT: It might be of importance that I'm located in Oslo, Norway, which CloudFlare currently lists as being re-routed, I'm not really sure what that implies:

Error: Can't establish a connection to the server

Steps to Reproduce

1. npx create-remix@latest --template partykit/remix-starter
2. npm run dev
3. Open browser console

Description

The browser console displays web socket errors when initiating a newly created app. Upon the first opening, the app seems to connect, but sometimes when a second tab is opened to simulate a new user, the connection hangs and fails to update the user count. Subsequently, refreshing the page also results in a failed connection. No errors are shown in the terminal, only in the browser console. I am using Firefox (version below) but the errors are still present on Chrome as well.

Error Message

Environment

• Operating System: Windows 10
• Browser: Firefox Developer Edition 123.0b2