stackbuilders/react-native-spotlight-tour

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

Open

#113 opened on Sep 18, 2023

View on GitHub
 (0 comments) (0 reactions) (0 assignees)TypeScript (40 forks)auto 404
enhancementhelp wanted

Repository metrics

Stars
 (510 stars)
PR merge metrics
 (PR metrics pending)

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

Research direction
Investigate the current Metro bundler configuration for web in the example app. Understand how Webpack can replace Metro for web bundling, including handling React Native for Web aliasing. Look into existing monorepo Webpack configurations that resolve workspaces and manage 'react native' to 'react native web' aliases. Consider using rnx kit or similar tools for web. Test a minimal Webpack setup serving a dev server with HMR.
Tech stack
typescriptreactreact native
Domain
frontendmobile
Issue type
Refactor
DifficultyEstimated implementation difficulty for a new contributor, from 1 for very small changes to 5 for expert-level work.
3
Estimated timeA rough time range for an experienced contributor to investigate, implement, test, and prepare a pull request.
Half day
Activity statusHow available the issue appears right now: fresh, active, stale, blocked, or waiting on maintainer input.
Active
ClarityHow clearly the issue explains the expected change, acceptance criteria, and next step.
Clear
Prerequisites
JavaScriptReactReact NativeWebpack
Newbie friendlinessA 1-100 score estimating how approachable this issue is for first-time contributors.
40