I thought it was quite hard to find a complete guide how to fix this. I solved it like this, start to finish, to be able to run Create React App on an emulated Android device on Windows:
Start by creating a react app or use your existing app.
npx create-react-app my-app
https://github.com/facebook/create-react-app#creating-an-app
Then install Cordova:
npm install -g cordova
https://cordova.apache.org/docs/en/latest/guide/cli/
Create a new cordova application inside the my-app folder in my case:
cordova create hello com.example.hello HelloWorld
Change directory to hello or what you called your Cordova application.
cordova platform add ios
cordova platform add android
Run cordova requirements to see what you need to build the project.
![enter image description here]()
Since I'm on Windows I will only build it for Android in this example.
cordova platform remove ios
and confirm I have only Android with cordova platform ls
![enter image description here]()
Install what you need based on cordova requirements command. Since I had a fresh install I needed everything: Java Development Kit (JDK) 8, Gradle and Android SDK. Links can be found here:
https://cordova.apache.org/docs/en/latest/guide/platforms/android/index.html#requirements-and-support
Or:
https://www.oracle.com/java/technologies/javase/javase-jdk8-downloads.html
https://gradle.org/install/
https://developer.android.com/studio/index.html
Open Android Studio after it is installed. I choose a standard installation but it failed with the following warning:
Failed to install Intel HAXM. For details, please check the
installation log: "C:\Users\Oscar\AppData\Local\Temp\haxm_log.txt"
Intel® HAXM installation failed. To install Intel® HAXM follow the
instructions found at:
https://software.intel.com/android/articles/installation-instructions-for-intel-hardware-accelerated-execution-manager-windows Installer log is located at
C:\Users\Oscar\AppData\Local\Temp\haxm_log.txt Installer log contents:
=== Logging started: 2020-07-10 16:39:27 === This computer does not support Intel Virtualization Technology (VT-x) or it is being
exclusively used by Hyper-V. HAXM cannot be installed. Please ensure
Hyper-V is disabled in Windows Features, or refer to the Intel HAXM
documentation for more information.
I could however start the application anyway and add an Android Virtual Device (AVD) found under Configure.
![enter image description here]()
I choose to add a Pixel XL with R system image.
However running cordova requirements again I could see I needed an Android target with API level 28. R is level 30.
![enter image description here]()
I therefore installed Pie with API level 28 x86_64 and created a new virtual device.
![enter image description here]()
Instead of opening AVD Manager i opened SDK manager and also downloaded the Android 9.0 Pie SDK.
![enter image description here]()
Now everything looked good:
![enter image description here]()
Then run cordova emulate android to test the default Cordova application.
If it works it should look like this:
![enter image description here]()
Change directory to my-app.
Edit package.json and add "homepage": "./", before dependencies:
![enter image description here]()
Thanks to @BlackBeard for that. Source: https://stackoverflow.com/a/46785362/3850405
Run npm run build
Clear everything in my-app\hello\www then copy everything from my-app\build to my-app\hello\www.
Voilà:
![enter image description here]()
If you don't edit my-app package.json and add "homepage": "./", it will look like this:
![enter image description here]()
Lessons learnt:
1.
If you are using <Router> in your project change that to <HashRouter> otherwise you'll see a blank display as nothing will get rendered to the screen. Works for both iOS and Android.
Source:
https://stackoverflow.com/a/46785362/3850405
2.
You need a whitelist to allow URLs. From documentation:
By default navigations are only allowed to file:// URLs. To allow
others URLs, you must add tags to your config.xml:
https://cordova.apache.org/docs/en/latest/reference/cordova-plugin-whitelist/
Install like this:
cordova plugin add cordova-plugin-whitelist
Then edit config.xml which is located in your application's root directory and add any of the following:
<!-- Allow links to example.com -->
<allow-navigation href="http://example.com/*" />
<!-- Wildcards are allowed for the protocol, as a prefix
to the host, or as a suffix to the path -->
<allow-navigation href="*://*.example.com/*" />
<!-- A wildcard can be used to whitelist the entire network,
over HTTP and HTTPS.
*NOT RECOMMENDED* -->
<allow-navigation href="*" />
Source: https://stackoverflow.com/a/30327204/3850405
3.
Even though you are using a whitelist you may still need to access an http API that does not support https. By default this is not allowed and can cause some real headache. Solve this as well by editing config.xml and add the following under <platform name="android">:
<edit-config xmlns:android="http://schemas.android.com/apk/res/android" file="app/src/main/AndroidManifest.xml" mode="merge" target="/manifest/application"> <application android:usesCleartextTraffic="true" /></edit-config>
Given that you do not browse to a URL any API call must specify the actual server. I normally use Axios so we only needed to add our server to the default URL. Example:
import axios, { AxiosPromise, AxiosRequestConfig, Method } from 'axios';
const getConfig = (url: string, method: Method, params?: any, data?: any) => {
const config: AxiosRequestConfig = {
url: 'http://192.168.1.249' + url,
method: method,
responseType: 'json',
params: params,
data: data,
headers: { 'X-Requested-With': 'XMLHttpRequest' },
}
return config;
}
export const sendRequest = (url: string, method: Method, params?: any, data?: any): AxiosPromise<any> => {
return axios(getConfig(url, method))
}
Then called like this:
const path = '/api/test/'
export const initialLoad = (number: number): AxiosPromise<InitialLoadDto> => {
return sendRequest(path + 'InitialLoad/' + number, 'get');
}
