Cordova with Create-react-app
I have created a ReactJs app with create-react-app and then made the Production build with npm run build. In my www folder created with Cordova I just copy all the files from the create-react-app's build folder and that's fine.
I want to know how do I hook into Cordova's events like for example:
function startApp() {
// your app logic
}
if (window.cordova) {
document.addEventListener('deviceready', startApp, false);
} else {
startApp();
}
For example I want to call the minified JS file inside startApp(). Or is there any other workflow that can be used to make Cordova events work with react app.
A small example would be helpful.
Is it possible to use the build file at all and just use the React App directly inside Cordova? I am unsure how that would work given that there is Webpack settings which transpiles the ES6 code to ES5 and all.
I am new to Cordova and struggling with this integration aspect.
Answer
I have found to make the two work and will post here for anyone else looking for the same. There maybe other methods to do this , but this is what worked for me.
So basically we will create a Cordova App using(say) : cordova create testapp com.test.testapp testapp This will give me a Folder Structure as so:
testapp
--hooks
--platforms
--plugins
--www
--config.xml
Now inside the testapp folder we run : create-react-app teastappReact Which will add my react app inside testapp folder. Your react app will have a main index.js in the /src directory.
I the index.js make sure to wrap your main logic inside a function and then call the function along with Cordova object like so:
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';
const startApp = () => {
ReactDOM.render(
<App />,
document.getElementById('root')
);
}
if(!window.cordova) {
startApp()
} else {
document.addEventListener('deviceready', startApp, false)
}
That should do now your app will have the Cordova instance along with Device objects like navigator.camera inside your app.
Also in your react apps index.html which can be found in the public folder copy the html from the index.html that you will find in the Codova www folder. Now we can delete all files from www folder. We will later manually or via a script copy all files from react apps build folder to Cordova www folder.
So my index.html would look something like below, notice the cordova.js file thats included as a script.
<!DOCTYPE html>
<!--
Licensed to the Apache Software Foundation (ASF) under one
or more contributor license agreements. See the NOTICE file
distributed with this work for additional information
regarding copyright ownership. The ASF licenses this file
to you under the Apache License, Version 2.0 (the
"License"); you may not use this file except in compliance
with the License. You may obtain a copy of the License at
http://www.apache.org/licenses/LICENSE-2.0
Unless required by applicable law or agreed to in writing,
software distributed under the License is distributed on an
"AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
KIND, either express or implied. See the License for the
specific language governing permissions and limitations
under the License.
-->
<html>
<head>
<!--
Customize this policy to fit your own app's needs. For more guidance, see:
https://github.com/apache/cordova-plugin-whitelist/blob/master/README.md#content-security-policy
Some notes:
* gap: is required only on iOS (when using UIWebView) and is needed for JS->native communication
* https://ssl.gstatic.com is required only on Android and is needed for TalkBack to function properly
* Disables use of inline scripts in order to mitigate risk of XSS vulnerabilities. To change this:
* Enable inline JS: add 'unsafe-inline' to default-src
-->
<meta http-equiv="Content-Security-Policy" content="default-src * 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src * data: content:;">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width">
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico">
<!-- Latest compiled and minified CSS -->
<title>React App</title>
</head>
<body>
<div id="root"></div>
<script type="text/javascript" src="cordova.js"></script>
</body>
</html>
Finally in your react apps' package.json add the following line: .... "homepage": "../www" .... This will make sure your final build file is pointing at the right path. we can also add the following lines in your package.json build script.
"scripts": {
"start": "react-scripts start",
***"build": "react-scripts build && robocopy .\\build ..\\www /MIR",***
"test": "react-scripts test --env=jsdom",
"eject": "react-scripts eject",
"deploy": "npm run build&&gh-pages -d build"
}
It can be robocopy or cp-r based on the OS(Windows/Linux etc)..
We should have our Cordova app ready to be build with cordova build android/ios.