diff --git a/README.md b/README.md index 97218913..e8e1db50 100644 --- a/README.md +++ b/README.md @@ -4,14 +4,16 @@ [![NPM Downloads](https://img.shields.io/npm/dm/@dr.pogodin/react-native-static-server.svg)](https://www.npmjs.com/package/@dr.pogodin/react-native-static-server) [![GitHub Repo stars](https://img.shields.io/github/stars/birdofpreyru/react-native-static-server?style=social)](https://github.com/birdofpreyru/react-native-static-server) -Embed HTTP server for [React Native] applications for Android, iOS, and Windows -platforms. Powered by [Lighttpd] server, supports both [new][New Architecture] +Embed HTTP server for [React Native] applications for Android, iOS, Mac (Catalyst), +and Windows platforms. Powered by [Lighttpd] server, supports both [new][New Architecture] and [old][Old Architecture] RN architectures. [![Sponsor](.README/sponsor.png)](https://github.com/sponsors/birdofpreyru) +[example app]: https://github.com/birdofpreyru/react-native-static-server/tree/master/example [Expo]: https://expo.dev +[react-native-device-info]: https://www.npmjs.com/package/react-native-device-info [react-native-fs]: https://www.npmjs.com/package/react-native-fs [React Native]: https://reactnative.dev @@ -28,11 +30,12 @@ and [old][Old Architecture] RN architectures. ## Getting Started +[Getting Started]: #getting-started [CMake]: https://cmake.org **Note:** _In addition to these instructions, have a look at -[the example project](https://github.com/birdofpreyru/react-native-static-server/tree/master/example) +[the example project][example app] included into the library repository on GitHub_. - [CMake] is required on the build host. @@ -71,6 +74,22 @@ included into the library repository on GitHub_. however at the moment we don't support it officially. If anybody wants to help with this, contributions to the documentation / codebase are welcome._ +- For **Mac Catalyst**: + - Disable Flipper in your app's Podfile. + - Add _Incoming Connections (Server)_ entitlement to the _App Sandbox_ + (`com.apple.security.network.server` entitlement). + - If you bundle inside your app the assets to serve by the server, + keep in mind that in Mac Catalyst build they'll end up in a different + path, compared to the regular iOS bundle (see [example app]): \ + iOS: `${RNFS.MainBundlePath}/webroot` \; + Mac Catalyst: `${RNFS.MainBundlePath}/Content/Resources/webroot`.Also keep + + Also keep in mind that `Platform.OS` value equals `iOS` both for the normal + iOS and for the Mac Catalyst builds, and you should use different methods + to distinguish them; for example relying on `getDeviceType()` method of + [react-native-device-info] library, which returns 'Desktop' in case of + Catalyst build. + - For **Windows**: - Out of the box, the current version of [react-native-fs] library (v2.20.0), we depend upon, is broken on Windows. For now, it can be worked around by @@ -201,6 +220,12 @@ outside platform-specific sub-folders. and press «_Add_» button to add "webroot" assets to the project target. +- **Mac Catalyst** + - The bundling for iOS explained above also bundles assets for Mac Catalyst; + beware, however, the bundled assets end up in a slightly different location + inside the bundle in this case (see details earlier in the [Getting Started] + section). + - **Windows** - Edit `PropertySheet.props` file inside your app's `windows/YOUR_PROJECT_NAME` folder, adding the following nodes into its root diff --git a/example/ios/Podfile b/example/ios/Podfile index bf57b0f7..6fd04467 100644 --- a/example/ios/Podfile +++ b/example/ios/Podfile @@ -38,7 +38,7 @@ target 'ReactNativeStaticServerExample' do # # Note that if you have use_frameworks! enabled, Flipper will not work and # you should disable the next line. - :flipper_configuration => flipper_config, + # :flipper_configuration => flipper_config, # An absolute path to your application root. :app_path => "#{Pod::Config.instance.installation_root}/.." ) diff --git a/example/ios/Podfile.lock b/example/ios/Podfile.lock index 4302e524..45411b4e 100644 --- a/example/ios/Podfile.lock +++ b/example/ios/Podfile.lock @@ -1,6 +1,5 @@ PODS: - boost (1.76.0) - - CocoaAsyncSocket (7.6.5) - DoubleConversion (1.1.6) - dr-pogodin-react-native-static-server (0.7.4): - React-Core @@ -12,74 +11,12 @@ PODS: - React-Core (= 0.71.4) - React-jsi (= 0.71.4) - ReactCommon/turbomodule/core (= 0.71.4) - - Flipper (0.125.0): - - Flipper-Folly (~> 2.6) - - Flipper-RSocket (~> 1.4) - - Flipper-Boost-iOSX (1.76.0.1.11) - - Flipper-DoubleConversion (3.2.0.1) - - Flipper-Fmt (7.1.7) - - Flipper-Folly (2.6.10): - - Flipper-Boost-iOSX - - Flipper-DoubleConversion - - Flipper-Fmt (= 7.1.7) - - Flipper-Glog - - libevent (~> 2.1.12) - - OpenSSL-Universal (= 1.1.1100) - - Flipper-Glog (0.5.0.5) - - Flipper-PeerTalk (0.0.4) - - Flipper-RSocket (1.4.3): - - Flipper-Folly (~> 2.6) - - FlipperKit (0.125.0): - - FlipperKit/Core (= 0.125.0) - - FlipperKit/Core (0.125.0): - - Flipper (~> 0.125.0) - - FlipperKit/CppBridge - - FlipperKit/FBCxxFollyDynamicConvert - - FlipperKit/FBDefines - - FlipperKit/FKPortForwarding - - SocketRocket (~> 0.6.0) - - FlipperKit/CppBridge (0.125.0): - - Flipper (~> 0.125.0) - - FlipperKit/FBCxxFollyDynamicConvert (0.125.0): - - Flipper-Folly (~> 2.6) - - FlipperKit/FBDefines (0.125.0) - - FlipperKit/FKPortForwarding (0.125.0): - - CocoaAsyncSocket (~> 7.6) - - Flipper-PeerTalk (~> 0.0.4) - - FlipperKit/FlipperKitHighlightOverlay (0.125.0) - - FlipperKit/FlipperKitLayoutHelpers (0.125.0): - - FlipperKit/Core - - FlipperKit/FlipperKitHighlightOverlay - - FlipperKit/FlipperKitLayoutTextSearchable - - FlipperKit/FlipperKitLayoutIOSDescriptors (0.125.0): - - FlipperKit/Core - - FlipperKit/FlipperKitHighlightOverlay - - FlipperKit/FlipperKitLayoutHelpers - - YogaKit (~> 1.18) - - FlipperKit/FlipperKitLayoutPlugin (0.125.0): - - FlipperKit/Core - - FlipperKit/FlipperKitHighlightOverlay - - FlipperKit/FlipperKitLayoutHelpers - - FlipperKit/FlipperKitLayoutIOSDescriptors - - FlipperKit/FlipperKitLayoutTextSearchable - - YogaKit (~> 1.18) - - FlipperKit/FlipperKitLayoutTextSearchable (0.125.0) - - FlipperKit/FlipperKitNetworkPlugin (0.125.0): - - FlipperKit/Core - - FlipperKit/FlipperKitReactPlugin (0.125.0): - - FlipperKit/Core - - FlipperKit/FlipperKitUserDefaultsPlugin (0.125.0): - - FlipperKit/Core - - FlipperKit/SKIOSNetworkPlugin (0.125.0): - - FlipperKit/Core - - FlipperKit/FlipperKitNetworkPlugin - fmt (6.2.1) - glog (0.3.5) - hermes-engine (0.71.4): - hermes-engine/Pre-built (= 0.71.4) - hermes-engine/Pre-built (0.71.4) - libevent (2.1.12) - - OpenSSL-Universal (1.1.1100) - RCT-Folly (2021.07.22.00): - boost - DoubleConversion @@ -417,12 +354,11 @@ PODS: - React-jsi (= 0.71.4) - React-logger (= 0.71.4) - React-perflogger (= 0.71.4) + - RNDeviceInfo (10.4.0): + - React-Core - RNFS (2.20.0): - React-Core - - SocketRocket (0.6.0) - Yoga (1.14.0) - - YogaKit (1.18.1): - - Yoga (~> 1.14) DEPENDENCIES: - boost (from `../node_modules/react-native/third-party-podspecs/boost.podspec`) @@ -430,31 +366,9 @@ DEPENDENCIES: - dr-pogodin-react-native-static-server (from `../..`) - FBLazyVector (from `../node_modules/react-native/Libraries/FBLazyVector`) - FBReactNativeSpec (from `../node_modules/react-native/React/FBReactNativeSpec`) - - Flipper (= 0.125.0) - - Flipper-Boost-iOSX (= 1.76.0.1.11) - - Flipper-DoubleConversion (= 3.2.0.1) - - Flipper-Fmt (= 7.1.7) - - Flipper-Folly (= 2.6.10) - - Flipper-Glog (= 0.5.0.5) - - Flipper-PeerTalk (= 0.0.4) - - Flipper-RSocket (= 1.4.3) - - FlipperKit (= 0.125.0) - - FlipperKit/Core (= 0.125.0) - - FlipperKit/CppBridge (= 0.125.0) - - FlipperKit/FBCxxFollyDynamicConvert (= 0.125.0) - - FlipperKit/FBDefines (= 0.125.0) - - FlipperKit/FKPortForwarding (= 0.125.0) - - FlipperKit/FlipperKitHighlightOverlay (= 0.125.0) - - FlipperKit/FlipperKitLayoutPlugin (= 0.125.0) - - FlipperKit/FlipperKitLayoutTextSearchable (= 0.125.0) - - FlipperKit/FlipperKitNetworkPlugin (= 0.125.0) - - FlipperKit/FlipperKitReactPlugin (= 0.125.0) - - FlipperKit/FlipperKitUserDefaultsPlugin (= 0.125.0) - - FlipperKit/SKIOSNetworkPlugin (= 0.125.0) - glog (from `../node_modules/react-native/third-party-podspecs/glog.podspec`) - hermes-engine (from `../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec`) - libevent (~> 2.1.12) - - OpenSSL-Universal (= 1.1.1100) - RCT-Folly (from `../node_modules/react-native/third-party-podspecs/RCT-Folly.podspec`) - RCTRequired (from `../node_modules/react-native/Libraries/RCTRequired`) - RCTTypeSafety (from `../node_modules/react-native/Libraries/TypeSafety`) @@ -462,7 +376,6 @@ DEPENDENCIES: - React-callinvoker (from `../node_modules/react-native/ReactCommon/callinvoker`) - React-Codegen (from `build/generated/ios`) - React-Core (from `../node_modules/react-native/`) - - React-Core/DevSupport (from `../node_modules/react-native/`) - React-Core/RCTWebSocket (from `../node_modules/react-native/`) - React-CoreModules (from `../node_modules/react-native/React/CoreModules`) - React-cxxreact (from `../node_modules/react-native/ReactCommon/cxxreact`) @@ -485,26 +398,14 @@ DEPENDENCIES: - React-RCTVibration (from `../node_modules/react-native/Libraries/Vibration`) - React-runtimeexecutor (from `../node_modules/react-native/ReactCommon/runtimeexecutor`) - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`) + - RNDeviceInfo (from `../node_modules/react-native-device-info`) - RNFS (from `../node_modules/react-native-fs`) - Yoga (from `../node_modules/react-native/ReactCommon/yoga`) SPEC REPOS: trunk: - - CocoaAsyncSocket - - Flipper - - Flipper-Boost-iOSX - - Flipper-DoubleConversion - - Flipper-Fmt - - Flipper-Folly - - Flipper-Glog - - Flipper-PeerTalk - - Flipper-RSocket - - FlipperKit - fmt - libevent - - OpenSSL-Universal - - SocketRocket - - YogaKit EXTERNAL SOURCES: boost: @@ -577,6 +478,8 @@ EXTERNAL SOURCES: :path: "../node_modules/react-native/ReactCommon/runtimeexecutor" ReactCommon: :path: "../node_modules/react-native/ReactCommon" + RNDeviceInfo: + :path: "../node_modules/react-native-device-info" RNFS: :path: "../node_modules/react-native-fs" Yoga: @@ -584,25 +487,14 @@ EXTERNAL SOURCES: SPEC CHECKSUMS: boost: 57d2868c099736d80fcd648bf211b4431e51a558 - CocoaAsyncSocket: 065fd1e645c7abab64f7a6a2007a48038fdc6a99 DoubleConversion: 5189b271737e1565bdce30deb4a08d647e3f5f54 dr-pogodin-react-native-static-server: f60b64ad21b6fba402a904eb47ebe4701ab18364 FBLazyVector: 446e84642979fff0ba57f3c804c2228a473aeac2 FBReactNativeSpec: 241709e132e3bf1526c1c4f00bc5384dd39dfba9 - Flipper: 26fc4b7382499f1281eb8cb921e5c3ad6de91fe0 - Flipper-Boost-iOSX: fd1e2b8cbef7e662a122412d7ac5f5bea715403c - Flipper-DoubleConversion: 2dc99b02f658daf147069aad9dbd29d8feb06d30 - Flipper-Fmt: 60cbdd92fc254826e61d669a5d87ef7015396a9b - Flipper-Folly: 584845625005ff068a6ebf41f857f468decd26b3 - Flipper-Glog: 70c50ce58ddaf67dc35180db05f191692570f446 - Flipper-PeerTalk: 116d8f857dc6ef55c7a5a75ea3ceaafe878aadc9 - Flipper-RSocket: d9d9ade67cbecf6ac10730304bf5607266dd2541 - FlipperKit: cbdee19bdd4e7f05472a66ce290f1b729ba3cb86 fmt: ff9d55029c625d3757ed641535fd4a75fedc7ce9 glog: 04b94705f318337d7ead9e6d17c019bd9b1f6b1b hermes-engine: a1f157c49ea579c28b0296bda8530e980c45bdb3 libevent: 4049cae6c81cdb3654a443be001fb9bdceff7913 - OpenSSL-Universal: ebc357f1e6bc71fa463ccb2fe676756aff50e88c RCT-Folly: 424b8c9a7a0b9ab2886ffe9c3b041ef628fd4fb1 RCTRequired: 5a024fdf458fa8c0d82fc262e76f982d4dcdecdd RCTTypeSafety: b6c253064466411c6810b45f66bc1e43ce0c54ba @@ -631,11 +523,10 @@ SPEC CHECKSUMS: React-RCTVibration: ad17efcfb2fa8f6bfd8ac0cf48d96668b8b28e0b React-runtimeexecutor: 8fa50b38df6b992c76537993a2b0553d3b088004 ReactCommon: b49a4b00ca6d181ff74b17c12b2d59ac4add0bde + RNDeviceInfo: 749f2e049dcd79e2e44f134f66b73a06951b5066 RNFS: 4ac0f0ea233904cb798630b3c077808c06931688 - SocketRocket: fccef3f9c5cedea1353a9ef6ada904fde10d6608 Yoga: 79dd7410de6f8ad73a77c868d3d368843f0c93e0 - YogaKit: f782866e155069a2cca2517aafea43200b01fd5a -PODFILE CHECKSUM: cfd0096d9fdb061c4d2cebde05ace6074b274a7e +PODFILE CHECKSUM: fe412dcb66b982cccc6aadd229605204340c968a COCOAPODS: 1.12.0 diff --git a/example/ios/ReactNativeStaticServerExample/ReactNativeStaticServerExample.entitlements b/example/ios/ReactNativeStaticServerExample/ReactNativeStaticServerExample.entitlements index fc07546c..9f2bc64d 100644 --- a/example/ios/ReactNativeStaticServerExample/ReactNativeStaticServerExample.entitlements +++ b/example/ios/ReactNativeStaticServerExample/ReactNativeStaticServerExample.entitlements @@ -6,6 +6,8 @@ com.apple.security.network.client + com.apple.security.network.server + com.apple.security.personal-information.location diff --git a/example/package-lock.json b/example/package-lock.json index b8555c71..6453c64a 100644 --- a/example/package-lock.json +++ b/example/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "react": "18.2.0", "react-native": "0.71.4", + "react-native-device-info": "^10.4.0", "react-native-fs": "^2.20.0", "react-native-webview": "^11.26.0", "react-native-windows": "0.71.4" @@ -9877,6 +9878,14 @@ "nullthrows": "^1.1.1" } }, + "node_modules/react-native-device-info": { + "version": "10.4.0", + "resolved": "https://registry.npmjs.org/react-native-device-info/-/react-native-device-info-10.4.0.tgz", + "integrity": "sha512-Z37e0HtpBvfkPRgv4xN7lXpvmJyzjwCXSFTXEkw6m2UgnnIsWlOD02Avu4hJXBlIMMazaW3ZLKal3o9h3AYvCw==", + "peerDependencies": { + "react-native": "*" + } + }, "node_modules/react-native-fs": { "version": "2.20.0", "resolved": "https://registry.npmjs.org/react-native-fs/-/react-native-fs-2.20.0.tgz", diff --git a/example/package.json b/example/package.json index 5e7e6a97..35c06ca1 100644 --- a/example/package.json +++ b/example/package.json @@ -11,17 +11,18 @@ }, "dependencies": { "react": "18.2.0", + "react-native": "0.71.4", + "react-native-device-info": "^10.4.0", "react-native-fs": "^2.20.0", "react-native-webview": "^11.26.0", - "react-native-windows": "0.71.4", - "react-native": "0.71.4" + "react-native-windows": "0.71.4" }, "devDependencies": { "@babel/core": "^7.21.3", "@babel/preset-env": "^7.20.0", "@babel/runtime": "^7.21.0", + "babel-plugin-module-resolver": "^5.0.0", "metro-config": "^0.76.0", - "metro-react-native-babel-preset": "0.73.8", - "babel-plugin-module-resolver": "^5.0.0" + "metro-react-native-babel-preset": "0.73.8" } } diff --git a/example/src/App.tsx b/example/src/App.tsx index 0ac1d468..bf11ca3f 100644 --- a/example/src/App.tsx +++ b/example/src/App.tsx @@ -15,6 +15,8 @@ import { import { Colors } from 'react-native/Libraries/NewAppScreen'; +import { getDeviceType } from 'react-native-device-info'; + // TODO: rn-fs does not work on Windows out of the box, // which is a know issue with a known workaround: // https://github.com/microsoft/react-native-windows/issues/2829 @@ -44,13 +46,19 @@ export default function App() { const [origin, setOrigin] = useState(''); useEffect(() => { - const fileDir: string = Platform.select({ + let fileDir: string = Platform.select({ android: `${RNFS.DocumentDirectoryPath}/webroot`, ios: `${RNFS.MainBundlePath}/webroot`, windows: `${RNFS.MainBundlePath}\\webroot`, default: '', }); + // This check detects Mac Catalyst build, where bundled assets land + // to a different folder, compared to a regular iOS mobile device. + if (Platform.OS === 'ios' && getDeviceType() === 'Desktop') { + fileDir = `${RNFS.MainBundlePath}/Contents/Resources/webroot`; + } + // In our example, `server` is reset to null when the component is unmount, // thus signalling that server init sequence below should be aborted, if it // is still underway.