stackbuilders / stackbuilders/react-native-spotlight-tour
Use WebPack to build and serve the Web version of the example
Nobody has claimed this yet.
- Dominant language
- TypeScript
- Stars
- 520
- Forks
- 39
- PR merge metrics
- No merged PRs in 30d
Description
In the example app, we support React Native Web using the Metro bundler with the metro.config.web.js configuration to create a bundled JS file to consume it from the index.html. This is not ideal for two reasons:
- We are only creating a bundle that can be used directly at production, so we don't have a way to handle everything related to web development (assets, code splitting, CSS/styling, etc.).
- We don't have a real development server, we just use a static server to serve the bundled JS on the index.html
Known issues
The main reason we started with a static server was that the example project is a workspace on a mono repo, so we need to find a way to consume react-native-spotlight-tour from another workspace and be able to replace all references to react-native imports with react-native-web. For iOS and Android, we use rnx-kit to solve this problem. But the web structure is different and rnx-kit doesn't seem to work as expected.
Contributor guide
First steps
- Read the whole issue, then the project's contributing guide.
- Comment on the issue to say you are picking it up — it saves two people doing the same work.
- Fork the repository and make your change on a branch.
- Open a pull request that references the issue number.
Research direction
Start with the example app's metro.config.web.js and index.html, then review how rnx-kit handles workspace imports for iOS and Android. Define the Webpack entry and workspace resolution approach before implementing it; done means the web example has a development server and supports assets, code splitting, CSS/styling, and react-native-to-react-native-web imports.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- react-native, typescript, webpack
- Domain
- build-system, frontend, web-dev
- Issue type
- Refactor
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 30/100