100 lines
No EOL
4.1 KiB
Markdown
100 lines
No EOL
4.1 KiB
Markdown
# React app to mobile app
|
||
|
||
- React app to mobile app
|
||
|
||
[https://medium.com/@pshubham/using-react-with-cordova-f235de698cc3](https://medium.com/@pshubham/using-react-with-cordova-f235de698cc3)
|
||
|
||
`npm i -g cordova@9.0.0`
|
||
|
||
`cordova create playlist [com.playlist.app](http://com.playlist.app) Playlist`
|
||
|
||
where playlist is app name
|
||
|
||
public and src folder to be copied
|
||
|
||
copy browserslist, scripts and dependencies to package.json.
|
||
|
||
also add `"homepage": "./",` in **package.json**.
|
||
|
||
Add
|
||
|
||
```html
|
||
<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval' 'unsafe-inline'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;">
|
||
<meta name="format-detection" content="telephone=no">
|
||
<meta name="msapplication-tap-highlight" content="no">
|
||
<meta name="viewport" content="initial-scale=1, width=device-width, viewport-fit=cover">
|
||
|
||
```
|
||
|
||
under head tag in **public/index.html**.
|
||
|
||
Add `<script src="cordova.js" type="text/javascript"></script>` at end under body tag.
|
||
|
||
Adding even listener when cordava is used and device is ready.
|
||
|
||
```jsx
|
||
const renderReactDom = () => {
|
||
ReactDOM.render(<App />, document.getElementById('root'));
|
||
};
|
||
|
||
if (window.cordova) {
|
||
document.addEventListener('deviceready', () => {
|
||
renderReactDom();
|
||
}, false);
|
||
} else {
|
||
renderReactDom();
|
||
}
|
||
```
|
||
|
||
in src/index.js.
|
||
|
||
In this file we need to perform two main functions:
|
||
|
||
- Execute the react build process
|
||
- React-scripts generates the build output to the **build/** folder and cordova uses **www/** as its input directory. So once the react build is completed we need to rename **build/** to **www/**
|
||
|
||
[https://www.youtube.com/watch?v=9OnZuuJJlCk](https://www.youtube.com/watch?v=9OnZuuJJlCk)
|
||
|
||
To square the icons for android apps:
|
||
|
||
[https://squaremyimage.com/](https://squaremyimage.com/)
|
||
|
||
To get different icons resizes like app-icon, playstore icon etc, use:
|
||
|
||
[https://resizeappicon.com/](https://resizeappicon.com/)
|
||
|
||
```bash
|
||
cordova platform add android
|
||
cordova build android
|
||
```
|
||
|
||
For release build use:
|
||
|
||
`cordova build —release android`
|
||
|
||
[Cordova Website To App Conversion new.pdf](../../../_resources/Cordova_Website_To_App_Conversion_new.pdf)
|
||
|
||
- html5 input file issue
|
||
|
||
[https://pragmaapps.com/fix-html5-file-input-cordova-android/](https://pragmaapps.com/fix-html5-file-input-cordova-android/)
|
||
|
||
[https://github.com/apache/cordova-plugin-inappbrowser/](https://github.com/apache/cordova-plugin-inappbrowser/)
|
||
|
||
[https://cordova.apache.org/docs/en/10.x/reference/cordova-plugin-file/#sample](https://cordova.apache.org/docs/en/10.x/reference/cordova-plugin-file/#sample)
|
||
|
||
[Dealing with Android content URIs in a Cordova based project](https://engineering.spideroak.com/how-to-deal-with-the-android-filesystem-in-a-cordova-based-project/)
|
||
|
||
[https://engineering.spideroak.com/how-to-deal-with-the-android-filesystem-in-a-cordova-based-project/](https://engineering.spideroak.com/how-to-deal-with-the-android-filesystem-in-a-cordova-based-project/)
|
||
|
||
[https://stackoverflow.com/questions/35056472/how-to-create-a-separate-directory-for-cordova-app-and-storing-data-in-it](https://stackoverflow.com/questions/35056472/how-to-create-a-separate-directory-for-cordova-app-and-storing-data-in-it)
|
||
|
||
|
||
[https://www.andreszsogon.com/using-android-8-and-9-emulators-without-android-studio/](https://www.andreszsogon.com/using-android-8-and-9-emulators-without-android-studio/)
|
||
|
||
[https://doc.xuwenliang.com/docs/cordova/1630](https://doc.xuwenliang.com/docs/cordova/1630)
|
||
|
||
- Debugging mobile app of cordova
|
||
|
||
[https://geeklearning.io/apache-cordova-and-remote-debugging-on-android/](https://geeklearning.io/apache-cordova-and-remote-debugging-on-android/)
|
||
|
||
Type `chrome://inspect` in browser address bar. |