TL;DR: A fresh app built with create-react-app and yarn build, then copied into a new Phonegap project's /www directory results in a white screen when loading the app in the Phonegap Developer app via phonegap serve.
I've been working on a ReactJS app for some time now and am currently in the process of porting it to Phonegap to create hybrid mobile apps for Android & iOS.
I have gone through the Phonegap setup, and successfully got their demo project (that is generated by running phonegap create) running in the Phonegap Developer app.
However, when I create a new react app via create-react-app (or use my existing app), run yarn build to create a production build, then copy the contents of /build into /www for Phonegap, running the app in the Phonegap Developer app results in a white screen.
The output of phonegap serve when I open the app in the Phonegap Developer app is as follows:
[phonegap] [console.warn] Content Security Policy has been added: <meta http-equiv="Content-Security-Policy" content="default-src * gap: ws: https://ssl.gstatic.com;img-src * 'self' data: content:;style-src 'self' 'unsafe-inline' data: blob:;script-src * 'unsafe-inline' 'unsafe-eval' data: blob:;">
[phonegap] 200 /__api__/appzip
With the server running I can successfully access the app by navigating to it's IP directly in Chrome for Android, but trying to load it in the Phonegap Developer app still leads to a white screen.
The output from phonegap serve when loading the app in a browser is as follows:
[phonegap] 200 /
[phonegap] 200 /static/css/main.7b1984ad.css
[phonegap] 200 /socket.io/socket.io.js
[phonegap] 200 /static/js/main.48127ccb.js
[phonegap] 200 /static/css/main.7b1984ad.css.map
[phonegap] 200 /img/nav-logo.png
[phonegap] 200 /img/welcome-logo.png
[phonegap] 200 /socket.io/?EIO=3&transport=polling&t=MLheCGT
[phonegap] 200 /socket.io/?EIO=3&transport=polling&t=MLheCOR&sid=Q1drCs6tvCUbSX_FAAAA
[phonegap] 200 /socket.io/?EIO=3&transport=polling&t=MLheCSj&sid=Q1drCs6tvCUbSX_FAAAA
[phonegap] 200 /static/js/main.48127ccb.js.map
I've also confirmed that no JS errors are being thrown when the app loads.
If anyone has a solution or any ideas at all it would be hugely appreciated.
create-react-app is set to fetch the resources from the root folder which will be the root of the phone's file system. I fixed the problem by adding
"homepage": "./" key value pair in package.json of the create-react-app app