Hi Guys,
I am very new to expo and just try to understand how to run in one of my view a small SPA via WebView and serves the js/css/html code via a react-native-static-server
I always end up with:
TypeError: null is not an object (evaluating ‘FPStaticServer.start’)
when I try to run my app.
Did anyone successful run a WebView with local files?
Thanks
Hi Lumen,
It is because react native static server requires ios/android setup. That is not an option by default in Expo in managed flow. Per default you can either use the native packages the expo team has ported to expo or packages that are written solely in JavaScript
But it is possible with the newest features of expo. It is not something I have dived into yet, but here is some resources:
Another solution is to jump out of the expo managed flow:
Hi @rcknti
Thanks for your reply. I just deep dived in the documentation and understood now the difference between managed and bare workflows. My intention would be to stick to the managed workflow and get the small VueJS based SPA in one of my views rendered inside a WebView. The SPA is only one small functionality of the app which will draw and export images inside a HTML canvas.
Is there a possibility in the managed flow to have the entry point of a HTML file and load this into a WebView? I searched all tutorials and checked out the documentation but could not find a way to do so. Is it possible to maybe combine expo-asset with WebView?
Thanks for your reply and the useful links
One possibility:
See the “Minimal example with inline HTML” example from the Usage section of the WebView docs.
You could possibly use data:... URLs or inline SVGs for the images and inline the CSS and JavaScript.
I see this comment from a bug referenced from the react-native-webview docs has an example of how you might do something like this with webpack:
https://github.com/react-native-webview/react-native-webview/issues/518#issuecomment-516451734
But based on the installation documentation for react-native-static-server it looks like it should work out of the box as long as you build with EAS Build and use a Custom Dev Client instead of Expo Go.
@wodin
I am afraid The SPA is too big and complex to inline all the CSS and JS. I could run it within a web url, but I want to support offline use, thats why I try to run the HTML/JS files locally.
The react-native-static-server will only work if its ejected, do I understand this right?
No. A few months ago that was true. These days there is “EAS Build” which is designed to make it possible to use custom native code in a managed app. Depending on the library it might work as-is with EAS Build, or you might need a config plugin to make it work. A few libraries already have config plugins built in, or else written by the Expo team, but because EAS Build is still fairly new, many libraries do not yet have config plugins.
However, I believe you’re in luck if you want to use react-native-static-server. I haven’t tried it, but as far as I can see it should work with EAS Build without needing a config plugin. So basically, just install it with npm or yarn (depending on what you’re using to install your dependencies), and then build with EAS Build.
Expo Go does not support custom native code (like, e.g., react-native-static-server), so if you load the app in Expo Go it will crash like it did for you. So you will need to build a Custom Dev Client (expo-dev-client) using EAS Build and use that during development, instead of Expo Go.
Then when you want to submit to the App Store/Play Store you build a standalone app with EAS Build and submit it to the stores.
@wodin
Ok thanks I will try this.
Expo Go was just really a breeze to work with. I will try the expo-dev-client now and see how far I will get.
Cheers