{"id":3789,"url":"https://github.com/johnkmzhou/cordova-create-react-app","last_synced_at":"2025-08-03T23:34:00.479Z","repository":{"id":41497657,"uuid":"116205984","full_name":"johnkmzhou/cordova-create-react-app","owner":"johnkmzhou","description":"A tutorial on how to set up a Cordova project using Create React App.","archived":false,"fork":false,"pushed_at":"2018-08-14T20:09:15.000Z","size":96,"stargazers_count":172,"open_issues_count":6,"forks_count":31,"subscribers_count":8,"default_branch":"master","last_synced_at":"2024-08-16T16:49:23.435Z","etag":null,"topics":["cordova","create-react-app","react","starter","tutorial","webpack"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/johnkmzhou.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2018-01-04T02:43:06.000Z","updated_at":"2024-08-05T03:04:15.000Z","dependencies_parsed_at":"2022-09-05T04:21:19.665Z","dependency_job_id":null,"html_url":"https://github.com/johnkmzhou/cordova-create-react-app","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnkmzhou%2Fcordova-create-react-app","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnkmzhou%2Fcordova-create-react-app/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnkmzhou%2Fcordova-create-react-app/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/johnkmzhou%2Fcordova-create-react-app/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/johnkmzhou","download_url":"https://codeload.github.com/johnkmzhou/cordova-create-react-app/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":228576890,"owners_count":17939645,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cordova","create-react-app","react","starter","tutorial","webpack"],"created_at":"2024-01-05T20:16:51.536Z","updated_at":"2024-12-07T07:30:43.512Z","avatar_url":"https://github.com/johnkmzhou.png","language":"JavaScript","funding_links":[],"categories":["Learning"],"sub_categories":[],"readme":"# Cordova Create React App Tutorial\n\nI was dissatisfied with tutorials that didn't meet my needs, boilerplate projects with incompatible dependencies, and yeoman generators with errors so I decided to make a tutorial to help others set up their initial project. Also if you're migrating an existing web app to Cordova, this will provide insight into what you need to get that to work.\n\nNote that I'm running this tutorial with Cordova 8 but it should work with other versions.\n\n## Installation\n\nInstall the Create React App CLI.\n\n`npm install -g create-react-app`\n\nInstall the Cordova CLI.\n\n`npm install -g cordova`\n\nCreate the project.\n\n`create-react-app tutorial`\n\nBecause we will be editing the Webpack configuration, go to your Create React App project directory and run:\n\n`yarn run eject`\n\nGo to your config/paths.js file and change\n\n`appBuild: resolveApp('build')` to `appBuild: resolveApp('www')`\n\nBecause your files will be served from `file://` add this line to your package.json (https://github.com/facebookincubator/create-react-app/issues/1094):\n\n`\"homepage\": \"./\"`\n\nThis is specific to create-react-app. In other projects you would need to ensure your paths are not prepended with a /.\n\nNow we will need some files from a Cordova project.\n\n`cordova create tutorial com.example.tutorial Tutorial`\n\nNext copy the config.xml from your Cordova project to your Create React App project. The other files and directories in the Cordova project are not currently used in this tutorial but take note of them because you may make use of them as your project develops. For example, the `res` directory would be where you would place icons and splash screens.\n\nNext modify your index.js so it looks like:\n```\nconst startApp = () =\u003e {\n  ReactDOM.render(\u003cApp /\u003e, document.getElementById('root'));\n  registerServiceWorker();\n};\n\nif(window.cordova) {\n  document.addEventListener('deviceready', startApp, false);\n} else {\n  startApp();\n}\n```\n\nAnd add `\u003cscript type=\"text/javascript\" src=\"cordova.js\"\u003e\u003c/script\u003e` to index.html. You may also want to add\n```\n\u003cmeta http-equiv=\"Content-Security-Policy\" content=\"default-src 'self' data: gap: https://ssl.gstatic.com 'unsafe-eval'; style-src 'self' 'unsafe-inline'; media-src *; img-src 'self' data: content:;\"\u003e\n\u003cmeta name=\"format-detection\" content=\"telephone=no\"\u003e\n\u003cmeta name=\"msapplication-tap-highlight\" content=\"no\"\u003e\n```\n\nNow we can build our output to the www directory.\n\n`yarn run build`\n\nThe rest of these instructions have files and changes that are not in the current repository due to the nature of the dependencies that have to be brought down. Also I didn't want to tie the tutorial down with specific versions of Android and iOS.\n\nTo target platforms:\n\n`cordova platform add ios`\n\n`cordova platform add android`\n\nYou need to install SDKs for each platform that you wish to target. Read this to check what requirements need to be satisfied: https://cordova.apache.org/docs/en/latest/guide/cli/index.html#install-pre-requisites-for-building\nGenerally you will probably have to install Android Studio, XCode, SDKs, emulators, build systems, etc.\n\nTo test the app run:\n\n`cordova emulate android`\n\n`cordova emulate ios`\n\nTo test on a connected devie run:\n\n`cordova run android`\n\n`cordova run ios`\n\n## Recommended Plugins\n\nOften what you will find is that a plugin is no longer being maintained. In that scenario your options are either to find a fork that resolves the issues you are encountering or, as a last ditch effort, attempt to fix it yourself.\n\n### Firebase OAuth Authentication\n\nTo authenticate using OAuth Providers follow these instructions: https://firebase.google.com/docs/auth/web/cordova\n\nBecause the cordova-universal-links-plugin is outdated you should instead install this fork:\n```\ncordova plugin add https://github.com/walteram/cordova-universal-links-plugin.git --save\n```\n\n### Firebase Analytics and Push Notifications\n\nDue to various issues that haven't beeen resolved in the latest npm package of cordova-plugin-firebase I recommend getting the version of the plugin directly from git\n```\ncordova plugin add https://github.com/arnesson/cordova-plugin-firebase.git --save\n```\n\n## iOS Deployment\n\nFirst, sign up for a paid Apple Developer Account. In Xcode, open your project from `/platforms/ios` and go to your Preferences \u003e Accounts. Add the Apple ID that was used for the developer account. Select your Agent Role and click on `Manage Certificates..` and click on the `+` icon to generate a signing certificate. \n\nNext, go to `https://developer.apple.com/account/ios/profile` and add a new provisioning profile. Select your development or distribution option and on the next page fill your App ID Description (for example, My Cordova App) and your bundle ID that can be found in config.xml.\n\nNext, in Xcode go to your project navigator and select your project. In a drop down list make sure your project is selected as a target. Then, under Signing, select your Team and generate your signing certificate.\n\nTo prepare for distribution on the Apple App Store, you need to create an archive. In Xcode make sure the app is properly provisioned and signed for distribution. Next run `yarn build` followed by `cordova prepare` to copy any assets and plugins. Then in Xcode, ensure the version and build numbers are properly set and choose a generic device target from the Scheme toolbar menu. Then choose Product \u003e Archive. There is an issue uploading to the App Store from the Archives window. Instead export the archive and upload it via Application Loader. After uploading the build to iTunes Connect, if the build is still in the \"Processing\" phase after an hour, attempt to upload another build because more than likely there's probably an issue with Apple's servers.\n\n## Android Deployment\n\nFirst, sign up for a Google Play Developer account. Next, run `yarn build` followed by `cordova build android --release` which will result in an apk that needs to be signed. Then run: \n```\njarsigner -verbose -sigalg SHA1withRSA -digestalg SHA1 -keystore android.keystore app-release-unsigned.apk alias-name\n```\nwhere `android.keystore` is the location of the keystore and `alias-name` is the alias for your key. Make sure you have Android Studio installed because it will also come with the zipalign tool. For Mac OS you can find it in `~/Library/Android/sdk/build-tools/{version}/zipalign`. Then run:\n```\n~/Library/Android/sdk/build-tools/{version}/zipalign -v 4 app-release-unsigned.apk release.apk\n```\nfollowed by uploading the build to the Google Play Console.","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnkmzhou%2Fcordova-create-react-app","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fjohnkmzhou%2Fcordova-create-react-app","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fjohnkmzhou%2Fcordova-create-react-app/lists"}