Skip to content

Conversation

@dannyhw
Copy link
Member

@dannyhw dannyhw commented Dec 7, 2025

What I did

Auto WebSocket Host Detection

  • Added websockets: 'auto' option in metro config that automatically detects the local IP address
  • The getLocalIPAddress() function finds the machine's IPv4 address from network interfaces
  • Eliminates the need to manually configure host/port for device connections

RN_GET_INDEX Event

  • Added RN_GET_INDEX channel event that clients can send to request the story index
  • Server responds with RN_INDEX_RESPONSE containing the current story index
  • Enables external tooling (VS Code extension, dev tools) to query available stories

Build-time WebSocket Config Injection

  • New STORYBOOK_WEBSOCKET global variable injected into storybook.requires at build time
  • Contains { host, port } configuration determined during metro bundling
  • View.tsx now reads from this global when host/port params are not explicitly provided

Other Changes

  • Added --host and --port CLI arguments to the generate script
  • Added WebSocket ping interval (10s) to keep connections alive
  • Standardized on globalThis instead of global
  • Added test script (scripts/test-ws.ts) for testing WebSocket connection

How to test

  1. In metro config, set websockets: 'auto':
module.exports = withStorybook(defaultConfig, {
  enabled: true,
  websockets: 'auto',
});
  1. Run the app on a physical device - it should auto-connect to the WebSocket server

  2. Test the RN_GET_INDEX event using the test script:

cd examples/expo-example
npx ts-node scripts/test-ws.ts <host> <port>

return;
}

if (req.method === 'GET' && req.url === '/index.json') {
Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

instead I will do two endpoints, one for ws based and another for file based

problem with file based is we can't easily load the story sort from preview since react native's flow breaks the parsing of the file.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

2 participants