404 Not found when displaying the url inside a webview on ios

[saladestomateoignon]

Hello guys,

I am trying to run a local server on my react-native app in order to run it inside a webview.

I followed all the instructions for installing the lib, and everything went pretty well. Then I tried to setup my local server like this:

import Server from '@dr.pogodin/react-native-static-server'; 

...
const server = new Server({
      fileDir: '/myPath',
      port: 2222,
      nonLocal: true,
});
const serverUrl = await server.start();
/* serverUrl is equal to http://myIpAddress:2222 */ 

const fullUrl = serverUrl + '/rest of my path and params'

I don't have any errors appearing and serverUrl returns a correct url. However I got a 404 Not Found inside the webview when trying to put fullUrl inside.

With the original project "react-native-static-server" (https://github.com/futurepress/react-native-static-server), it worked correctly:

import StaticServer from 'react-native-static-server'; 
import RNFS from 'react-native-fs';

...

const server = new StaticServer(2222, RNFS.DocumentDirectoryPath + '/myPath');
const serverUrl = await server.start();
/* serverUrl is equal to http://myIpAddress:2222 */ 

const fullUrl = serverUrl + '/rest of my path and params'

Am I missing something into the new implementation?

Thanks.

[birdofpreyru]

Hey @saladestomateoignon , overall what you do looks about right. My first guess, if your /myPath indeed starts with slash, the new library implementation assumes it is an absolute path already, and literally uses it as is, without prepending it with RNFS.DocumentDirectoryPath, as you probably expect it to be, looking at your second code snippet. Either try to pass myPath without leading slash (then it will be considered relative, and automatically resolved relative to RNFS.DocumentDirectoryPath), or give the full path as ${RNFS.DocumentDirectoryPath}/myPath.

[saladestomateoignon]

Thank you very much for your response.

So I tried:

• to remove the slash from '/myPath' => still getting the 404 error.
• to give the full path as ${RNFS.DocumentDirectoryPath}/myPath => works correctly.

Also I remarked something weird. If I don't explicitly add react-native-fs, the app will crash (red screen) l while trying to load the component calling @dr.pogodin/react-native-static-server (it gives an a error like "can't read value of undefined"), even through the react-native-fs seems to be already a dependency of @dr.pogodin/react-native-static-server. (I don't know if you guys have the same issue)

So in my case, adding explicitly react-native-fs + using the full path works for me.

Thanks for the help anyway.

[birdofpreyru]

• to remove the slash from '/myPath' => still getting the 404 error.
• to give the full path as ${RNFS.DocumentDirectoryPath}/myPath => works correctly.

Strange that the first one does not work as well. I guess, although related code is very simple, I missed something there. Can you compare the values of server.fileDir (it keeps the actual resolved absolute path, which is then used for the asset folder) after you create server one way and another?

If I don't explicitly add react-native-fs, the app will crash (red screen)...

Probably, some other dependency in your project relies on a different version of RNFS, so it ends up installing a few versions of RNFS side-by-side, and thus breaks stuff. And when you install RNFS as a direct dependency, then it forces all packages to use the same RNFS module. You can check with npm ls react-native-fs what is going on there.

[saladestomateoignon]

Hi there,

here is what I got while running npm ls react-native-fs:

Also I console.log server.fileDir in both cases ("myPath" and "${RNFS.DocumentDirectoryPath}/myPath" ) and actually I didn't get the same results:

• "myPath" => got "/Users/myaccount/Library/Developer/CoreSimulator/Devices/D720AC59-FB9F-47C0-B356-D798C8124188/data/Containers/Data/Application/AF7B12F7-E9E3-4059-AD8E-FB0C1E6C39A8/Documents/myPath", (NB: I have react-native-fs as direct dependency. Otherwise I can't even test it).

• "${RNFS.DocumentDirectoryPath}/myPath" => got "/Users/myaccount/Library/Developer/CoreSimulator/Devices/D720AC59-FB9F-47C0-B356-D798C8124188/data/Containers/Bundle/Application/4CA8C013-A1D9-4207-AFE0-843D70C00391/myApp.app/myPath"

This is probably the issue occurs. So as said in previous comment, I am using react-native-fs as direct dependency + full path to get it work for now.

[birdofpreyru]

Hey @saladestomateoignon , I had a look on it, and wanna double-check, I guess the variant that works for you, to generate the full path, you actually do ${RNFS.MainBundlePath}/myPath, as in the example app? And then it is a bug in the library, that it prefixes relative paths with RNFS.DocumentDirectoryPath on all platforms, rather than using RNFS.MainBundlePath for iOS.

[saladestomateoignon]

Hey @birdofpreyru, sorry for the late response (saw you already closed the issue and seemed to fix it into a new release). Just wanted to confirm that yes, doing ${RNFS.MainBundlePath}/myPath makes it work. However I might try your latest release of your package.

Thanks.