GithubHelp home page GithubHelp logo

johnkmzhou / cordova-create-react-app Goto Github PK

View Code? Open in Web Editor NEW
171.0 171.0 31.0 96 KB

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

JavaScript 94.82% HTML 4.41% CSS 0.77%
cordova create-react-app react starter tutorial webpack

cordova-create-react-app's Issues

Use Cordova plugins

Hi!
Have any ideas how to use cordova plugins inside react?
For example simplest cordova-plugin-device

Trying call like:

  • console.log(device.cordova);
  • --/-- window.cordova.plugins.device.cordova
  • --/-- window.plugins.device.cordova

But nothing works.

Why build to `www` instead of the usual `build`?

I am trying to use your instructions in the README. I am still struggling with a sequel of error messages originating from the yarn run eject step: missing babel-loader, etc.

Question is: all cordova apps have their source code inside www/, so I don't understand why you use that directory as build target. I fear that the build run will wipe it away every time, forcing me to move my source code elsewhere. But then why not leave the build target where create-react-app puts it?

On the other hand, I do not see how to integrate the various cordova build <platform> commands in the collection of scripts of the React app without ejecting it.

Can you please shed some more light on this subject?

Cordova.js loads too late

I was following this tutorial and I faced an issue where cordova.js wasn't loaded when index.js was executed.

In particular, window.cordova was undefined at this part. It would load later.

if (window.cordova) {
  document.addEventListener('deviceready', startApp, false);
} else {
  startApp();
}

I found the problem was that the <script type="text/javascript" src="cordova.js"></script> was placed below the </body>. This would lead to the script loading after the app. More information here.

To fix this, cordova.js should be placed somewhere such as before </head> (which is where the css is linked). This ensures we have cordova when the app bootstraps. I tried this fix and it works for me.

Empty screen

i followed everything you mentioned, but at the end when i run cordova emulator androind the emulator started but i only got empty white screen.
cordova version: 8.1.0
React version: 16.5.2

Is eject really necessary?

Hello, thanks for this amazing tutorial. It was helpful to me.

The only question is about ejection. When I ejected, the config folder was readonly, so I coudn't edit it. But it was not necessary, as the only reason to do that is to change the build path. I could manually move the build to www folder. Alternatively, you can do something as said in this issue, but with caution about support.

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.