stackbuilders / stackbuilders/react-native-spotlight-tour

Use WebPack to build and serve the Web version of the example

Open
#113 0 comments 0 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

enhancement help wanted
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:

  1. 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.).
  2. 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

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. 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

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.