Open bboydflo opened 2 years ago
Hi @bboydflo , a quick feedback here.
Which version of the library do you use, and do you have the new react-native architecture (Turbo Modules) enabled? My best guess is that you used the latest version with Turbo Modules, and it seems I really need to test it myself and fix something. It seems that at this point FPStaticServer
evaluates to null
in your case (instead of the native module interface), probably you can try to edit that place directly inside your node_modules
and check what branch is executed, and why is it going wrong.
Looking at your code,
const server = useRef(new StaticServer(5555, "./assets", { localOnly: true, keepAlive: true })).current;
this line is not a good idea, I believe effectively you create an instance of StaticServer
(the default reference value) on each re-render of App
, although only the first of them is recorded in the ref. In you current code you don't access the server instance outside the effect hook at all, so no need for the reference altogether. Otherwise, you better do:
const serverRef = useRef();
if (!serverRef.current) serverRef.current = new StaticServer(5555, "./assets", { localOnly: true, keepAlive: true });
const server = serverRef.current;
Hey, thanks for your reply.
Will try to see how/if I can enable Turbo Modules with expo.
@bboydflo , I actually meant it should work without Turbo Modules (at least works for me), rather then with them :) Though, I haven't tried it with expo. Agh... also all my projects I use it are JS and not TS. Probably, there is some minor mistake in TS, or something particular about TS config in expo, which makes FPStaticServer
null, instead of the module instance.
Could be. I realized that I also had another webpack-dev-server running in another tmux window which might have an effect on the current expo app. Will try again with a simple js project as well.
Hey @bboydflo , I double-checked it indeed does not work in an expo app out of the box, and in my current understanding it is just expo not supporting custom react-native libraries, which rely on native code, unless you build and deploy the resulting expo app in a special way.
See Adding custom native code to Expo guide.
I don't know, whether something can be done in a RN library to make it Expo-friendly, and at this time it is beyond my interests and capacity to figure it out myself.
thanks! will try it with crate react native app instead
Hi @bboydflo and @birdofpreyru, this library can be used with Expo, but you need to use expo prebuild
so that the library's native dependencies would be linked and Pods installed.
Also when using prebuild, you can use config plugins to customize your project from JavaScript without ever needing to directly modify Xcode or Android Studio projects. From my testing so far, it seems you don't need a config plugin for this library.
More info: https://github.com/expo/fyi/blob/main/prebuilding.md https://docs.expo.dev/workflow/customizing/ https://docs.expo.dev/development/getting-started/
I got the following error, can you check it for me? @birdofpreyru
I guess ./assets
does not point to the folder you think it points to, when resolved internally. Better pass in the correct absolute path, or double check where it ends up pointing to.
I guess
./assets
does not point to the folder you think it points to, when resolved internally. Better pass in the correct absolute path, or double check where it ends up pointing to.
I put source file html in here /android/app/src/main/assets/index.html seems this path is not correct?
I think, it is not. It should be a path on the target device, and if you read README carefully, it uses react-native-fs
library to figure out correct path for files there, and probably to move them to the folder the server can read.
I think, it is not. It should be a path on the target device, and if you read README carefully, it uses
react-native-fs
library to figure out correct path for files there, and probably to move them to the folder the server can read.
Thank you, I'm done, however it takes a few seconds to move file & start the server
same problem, const FPStaticServer = global.__turboModuleProxy ? require('./NativeStaticServer').default : _reactNative.NativeModules.StaticServer;
both are null.
Hey @lovetingyuan, have you followed what @viljark wrote (https://github.com/birdofpreyru/react-native-static-server/issues/8#issuecomment-1211605867)?
Hey @lovetingyuan, have you followed what @viljark wrote (#8 (comment))?
I create a new expo project, and I run npx expo prebuild
, and still get the error
@lovetingyuan have you built the expo development client after you added the package?
should I run npm run android
or eas build --profile development --platform android
?
frankly I had to re-learn vanilla react to use this lib... dev wuz efficient with expo. Also, it really needs a good example when working with webview especially the directories
@mihkuno it sounds like now you might be a valuable contributor to expand the Readme regarding Expo use of the lib :) improving other aspects of Readme is on my todo list.
I'm having exactly the same error as @lovetingyuan, I'm using the older version because I can't drop support for Android SDK <28.
@leandronorcio It looks like you telling it to server files from a location it has no access to.
Here is the Java code block where you hit the error (specifically on www_root = new File(this.reactContext.getFilesDir(), root);
line):
if(root != null && (root.startsWith("/") || root.startsWith("file:///"))) {
www_root = new File(root);
localPath = www_root.getAbsolutePath();
} else {
www_root = new File(this.reactContext.getFilesDir(), root);
localPath = www_root.getAbsolutePath();
}
i.e. it looks like you provided empty or relative root
value, so it tries to resolve it from app's files directory, but fails.
@birdofpreyru that's a really fast response, it's working now. Thank you!
Not sure if this is the same issue, but I get the following error using Expo:
ERROR Error: `fileDir` MUST BE a non-empty string
This error is located at:
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent), js engine: hermes
ERROR Error: `fileDir` MUST BE a non-empty string
This error is located at:
in App (created by withDevTools(App))
in withDevTools(App)
in RCTView (created by View)
in View (created by AppContainer)
in RCTView (created by View)
in View (created by AppContainer)
in AppContainer
in main(RootComponent), js engine: hermes
This is my code:
import React, { useEffect, useState, useRef } from 'react';
import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, SafeAreaView } from 'react-native';
import { WebView } from 'react-native-webview';
import StaticServer from "@dr.pogodin/react-native-static-server";
export default function App() {
const serverRef = useRef();
if (!serverRef.current) serverRef.current = new StaticServer(5555, "./assets/out", { localOnly: true, keepAlive: true });
const server = serverRef.current;
const [uri] = useState(`http://localhost:${server.port}`);
useEffect(() => {
server.start().then((url) => {
console.log("Serving at URL", url);
});
() => {
// Stop the server
server.stop();
}
}, []);
const webViewProps = {
javaScriptEnabled: true,
androidLayerType: 'hardware',
originWhitelist: ['*'],
allowFileAccess: true,
domStorageEnabled: true,
mixedContentMode: 'always',
allowUniversalAccessFromFileURLs: true,
scalesPageToFit: true,
};
const Header = () => (
<View style={styles.header}>
</View>
);
return (
<SafeAreaView style={{ flex: 1 }}>
<StatusBar style="light" />
<Header />
<WebView
style={styles.container}
source={{ uri }}
{...webViewProps}
/>
</SafeAreaView>
);
}
const styles = StyleSheet.create({
header: {
paddingTop: 15,
paddingBottom: 10,
backgroundColor: "#ec3c3c"
},
title: {
color: "#fff",
fontSize: 20,
fontWeight: "bold",
textAlign: "center"
},
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
paddingTop: 40,
},
});
Server constructor() has different signature.
Hi there, I am having a dependency issues when trying to have a static server with Expo apps command npx install-peerdeps @dr.pogodin/react-native-static-server@latest lead me to following
npm install @dr.pogodin/react-native-static-server@0.12.0 @dr.pogodin/react-native-fs@2.22.0 react@18 react-native@0.73 react-native-windows@0.73 --save
However, when I follow @viljark comment, trying to run "npx expo prebuild --platform iOS" I got the following error when it's trying to run pod install
Fetching podspec for "hermes-engine" from "../node_modules/react-native/sdks/hermes-engine/hermes-engine.podspec" [Hermes] Using release tarball from URL: https://repo1.maven.org/maven2/com/facebook/react/react-native-artifacts/0.73.6/react-native-artifacts-0.73.6-hermes-ios-debug.tar.gz [!] CocoaPods could not find compatible versions for pod "React-FabricImage": In Podfile: React-FabricImage (from ../node_modules/react-native/ReactCommon) Specs satisfying the React-FabricImage (from ../node_modules/react-native/ReactCommon) dependency were found, but they required a higher minimum deployment target.
Should I fold back to previous version like @dr.pogodin/react-native-static-server@0.9.0?
Update:
If I fold back to @dr.pogodin/react-native-static-server@0.9.0 with dependency.
{ "name": "my-app", "version": "1.0.0", "main": "node_modules/expo/AppEntry.js", "scripts": { "start": "expo start", "android": "expo run:android", "ios": "expo run:ios" }, "dependencies": { "@dr.pogodin/react-native-fs": "2.21.0-alpha.1", "@dr.pogodin/react-native-static-server": "0.9.2", "@expo/ngrok": "^4.1.0", "@types/react": "~18.2.14", "buffer": "^6.0.3", "expo": "~49.0.13", "expo-crypto": "~12.4.1", "expo-secure-store": "~12.3.1", "expo-splash-screen": "~0.20.5", "expo-status-bar": "~1.6.0", "react": "^18.2.0", "react-native": "0.72.10", "react-native-webview": "13.2.2", "react-native-webview-crypto": "^0.0.25", "react-native-windows": "0.72.32", "text-encoding": "^0.7.0", "typescript": "^5.1.3" }, "devDependencies": { "@babel/core": "^7.20.0" }, "private": true }
I got this error after running npx install-peerdeps @dr.pogodin/react-native-static-server && npx expo prebuild --platform iOS && expo start Notes: it didn't throw any error at installation phase
` ERROR Error: The package '@dr.pogodin/react-native-fs' doesn't seem to be linked. Make sure:
AppRegistry.registerComponent
wasn't called., js engine: hermes`@evanNyew the original error you got does not look to me related to this library, nor Expo, and it just says that the minimum deployment target (iOS version) set in your Xcode project is lower than those declared by pods you are trying to use. As of the latest RN, the deployment target should be 13.4 or higher (see this).
The latter error looks like some incompatibility between the older library version and the RN version... but might be something Expo-related, I don't know.
Hi, @birdofpreyru . I've created a tutorial on how to use this library with Expo. It's not strictly Expo, as you'll need to make a development build, but I don't think it should be too much of an issue. Check out my tutorial, I hope it helps you.
https://github.com/jole141/expo-examples/tree/react-native-static-server
Great! Thanks @jole141 , I'll refer your tutorial in README later.
Hi @birdofpreyru, thanks for this package.
Could you please mention by when can you start the work on officially supporting Expo? A lot of people are trying to use this package in their Expo managed projects and in some cases, the example by @jole141 does not work.
Could you please mention by when can you start the work on officially supporting Expo?
As soon as somebody sponsors it :sunglasses:
hi, thanks for this package. I am trying to use it in an expo app. and I got this error:
TypeError: null is not an object (evaluating 'FPStaticServer.start'
Any idea what I am doing wrong? Here is my code:
Here is some output in my logs:
And below are some expo logs: