Not able to start server :-(

[technorsh]

Here is my code
import React , { useEffect, useState } from 'react';
import {
StyleSheet,
View,
Text,
Platform,
TouchableOpacity
} from 'react-native';
import StaticServer from 'react-native-static-server';
import RNFS from "react-native-fs";

const App = () => {

const [ url , setURL ] = useState(null);

let server = new StaticServer();

useEffect(()=>{
console.log("App Started");
},[])

const getPath = () => {
return Platform.OS === "android"
? RNFS.DocumentDirectoryPath
: RNFS.MainBundlePath;
}

const startServer = () => {
console.log("Start Called");
server.start().then( url => {
console.log("Server Started at : ",url);
setURL(url);
});
}
const stopServer = () => {
if (server && server.isRunning()) {
server.stop();
console.log("Server Stop");
}
}

return (
<>

{url!==null?url:""}


<TouchableOpacity onPress={()=>{startServer()}}>Start Server
<TouchableOpacity onPress={()=>{stopServer()}}>Stop Server

</>
);
};

const styles = StyleSheet.create({
url:{
alignItems:"center",
},
btn:{
flexGrow:1,
flexDirection:"row",
alignItems:"center",
justifyContent:"space-around"
}
});

export default App;

[Alek-devsy]

Same here, RN 0.63, can not get past this error

[Mario857]

working for me in RN 0.63.3, but I had to add second parameter in StaticServer, new StaticServer(3000, getWebResourcesPath())

function getWebResourcesPath() {
return Platform.OS === 'android'
? RNFS.DocumentDirectoryPath + '/www'
: RNFS.MainBundlePath + '/www';
}

I also copy my assets ( android\app\src\main\assets\www) to "DocumentDirectory" before I start StaticServer with this function...

async function copyWWWBuildFiles(directory: string) {
(await RNFS.readDirAssets(directory)).forEach(async (file) => {
if (file.isDirectory()) {
await RNFS.mkdir(RNFS.DocumentDirectoryPath + '/' + file.path);
return copyWWWBuildFiles(file.path);
} else {
await RNFS.copyFileAssets(
file.path,
RNFS.DocumentDirectoryPath + '/' + file.path,
);
}
});
}

[WeirdDNA]

Mario, thanks so much for your solution here. It almost works for me. Unfortunately I am brand new to android development, and I can't quite figure out how to actually call that copyWWWBuildFiles function with a directory path that react native will understand. I tried using copyWWWBuildFiles('android/app/src/main/assets/www'); right after it was defined, but the iterator doesn't actually do anything. I only have one file in my 'android/app/src/main/assets/www' directory called test.html

async function copyWWWBuildFiles(directory: string) {
  console.log('copying directory '+ directory); //displays directory parameter
  (await RNFS.readDirAssets(directory)).forEach(async (file) => {
    console.log(file);//never gets reached
    if (file.isDirectory()) {
      await RNFS.mkdir(RNFS.DocumentDirectoryPath + '/' + file.path);
      return copyWWWBuildFiles(file.path);
    } else {
      await RNFS.copyFileAssets(
        file.path,
        RNFS.DocumentDirectoryPath + '/' + file.path,
      );
    }
  });
}

copyWWWBuildFiles('android/app/src/main/assets/www'); //tried with an without leading slash, or escaped and unescaped backslashes
server.start().then( url => {
  console.log("Server Started at : ", url);
  serverUrl = url +"/test.html";
});

console.log('opening webview to ' + serverUrl); //http://10.0.2.16:3000/test.html
  return (
    <WebView
      source={{uri: serverUrl}}
      showsHorizontalScrollIndicator={false}
      bounces={false}
      scrollEnabled={false}
    />
  );

Webview displays the text:
INTERNAL ERROR: given path is not.a directory (/data/user/0/com.sampleapp/files/www)

I've also tried simply "www", "/www", "www/", and "/www/" as the target directory for copyWWWBuildFiles

---

So after "jettifying?" the project, the www directory now shows up as an available asset.
Additionally the recursive function provided does not create the "www" folder in the destination path, if "www" is the target directory, it would only create directories of lower depth, as an easy fix, I hard coded the creation of the www directory. It's now working in react native 63!

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

let serverUrl = null;
let server = new StaticServer(8080, getWebResourcesPath())

function getWebResourcesPath() {
  return Platform.OS === 'android'
  ? RNFS.DocumentDirectoryPath + '/www'
  : RNFS.MainBundlePath + '/www';
}

async function copyWWWBuildFiles(directory: string) {
  (await RNFS.readDirAssets(directory)).forEach(async (file) => {
    if (file.isDirectory()) {
      await RNFS.mkdir(RNFS.DocumentDirectoryPath + '/' + file.path);
      return copyWWWBuildFiles(file.path);
    } else {
      await RNFS.copyFileAssets(
        file.path,
        RNFS.DocumentDirectoryPath + '/' + file.path,
      );
    }
  });
}

RNFS.mkdir(RNFS.DocumentDirectoryPath + '/www');
copyWWWBuildFiles('www');
server.start().then( url => {
  console.log("Server Started at : ", url);
  serverUrl = url +"/test.html";
});

[Mario857]

@WeirdDNA you are right I also hardcoded RNFS.mkdir(RNFS.DocumentDirectoryPath + '/www'); in my code but forgot to mention it. Glad It works!