Cordova Create React App screenshot

Cordova Create React App

Author Avatar Theme by Johnkmzhou
Updated: 23 Mar 2018
174 Stars

A tutorial on how to set up a Cordova project using Create React App.

Categories

Overview:

The author of this content was dissatisfied with existing tutorials and tools for setting up a Cordova Create React App project. They decided to create a tutorial to help others set up their initial project and provide insight for migrating existing web apps to Cordova. The tutorial is specifically designed for Cordova 8, but it should work with other versions as well.

Features:

  • Create React App CLI installation
  • Cordova CLI installation
  • Editing the Webpack configuration
  • Modifying the package.json file
  • Creating a Cordova project and copying config files
  • Modifying the index.js file
  • Building the output to the www directory
  • Targeting platforms and installing SDKs
  • Testing the app on emulators and connected devices
  • Recommended plugins, such as Firebase OAuth Authentication

Installation:

  1. Install the Create React App CLI by running npm install -g create-react-app.
  2. Install the Cordova CLI by running npm install -g cordova.
  3. Create the project by running create-react-app tutorial.
  4. Go to your Create React App project directory and run yarn run eject.
  5. Modify the config/paths.js file by changing appBuild: resolveApp('build') to appBuild: resolveApp('www').
  6. Add "homepage": "./" to your package.json file.
  7. Create a Cordova project by running cordova create tutorial com.example.tutorial Tutorial.
  8. Copy the config.xml file from your Cordova project to your Create React App project.
  9. Modify the index.js file to match the provided code.
  10. Add <script type="text/javascript" src="cordova.js"></script> to index.html.
  11. Build the output to the www directory by running yarn run build.
  12. Install SDKs for each platform you wish to target.
  13. Test the app on emulators by running cordova emulate android or cordova emulate ios.
  14. Alternatively, test on a connected device by running cordova run android or cordova run ios.

Summary:

This product analysis discusses a tutorial for setting up a Cordova Create React App project. The tutorial provides step-by-step instructions for installation, configuration, and testing on both emulators and connected devices. It also suggests recommended plugins, such as Firebase OAuth Authentication. The tutorial is designed for Cordova 8 but is expected to work with other versions as well. Overall, it aims to help users set up their initial Cordova projects and migrate existing web apps to Cordova.