Standardized integration with Cordova

[snickell]

Hybrid app development is a significant use-case for react (even apart from react-native), but the standard cordova 'approach' uses the cordova CLI tool and build system. Unfortunately you can't have two CLI/build systems operative at once in the stack, so we end up having to choose between a smooth cordova-based stack, or a smooth create-react-app based stack.

EmberCLI (via an addon), Ionic and other CLI-type platforms have integrated cordova support, so you can use their CLI tool and still access cordova features.

It would be great to have basic Cordova integration in create-react-app, ala ionic or embercli. I suspect a small set of Cordova features would cover the majority of simple hybrid app use cases.

[gaearon]

What kind to integration points do you imagine and how would they work?

[pke]

I don't see a need for that. create-react-app creates what in cordova becomes the www/bundle.js. You can just add cordova on top of create-react-app.

[ForbesLindesay]

I'd rather see create-react-native-app :)

[gaearon]

I’m closing because there aren’t any specific suggestions in this thread yet, and I don’t have the necessary context around this. If somebody using Cordova sends a PR demonstrating the kind of integration they would like to see, we can discuss that. Thank you!

[knuhol]

Hi, I'd also like to have some Cordova integration in this project. My current approach is to develop a new app completely as a plain web application and then use a manual like this to deploy it to Cordova.

This isn't a good solution, especially when you need using Cordova plugins, e.g. camera, you has to deploy app manually every time, try it on emulator/device and if something is wrong then go again.

It would be really nice if this project supports Cordova project starter and we could develop application directly on emulator/device with a live reload.

[gaearon]

I’d appreciate if you could create a new issue with an actionable plan of what is missing in CRA to make it a good experience.

[knuhol]

@gaearon Well, I can do it, but it will be a duplicity - all is described in this thread already.

[gaearon]

Sorry but I don’t see any specific suggestions in this thread besides “add Cordova integration”. I don’t have enough knowledge about it to understand what this entails. If you could provide a list of actionable todos that would enable Cordova integration that would be great!

[knuhol]

@gaearon Well, I don't have either. All I know is it would be nice to have something to automatize these steps - I can't explain it better, sorry. Forget it then.

[pke]

@akarienta as I wrote in this issue before, the steps required to make a CRA bundle to work in any cordova app is trivial. Have a post-build step to copy the out folder CRA creates to the cordova www folder.
I described the process over here: #786

[knuhol]

@pke That's not so easy, you need to init Cordova and include it's script. All steps needed are described here.

[pke]

You first create the cordova app, then the CRA. Merge both folders, add the change to the package.json I wrote, and your are done.
Of course this merge/copy could be automated, but its so trivial I don't see why that would be required to be part of CRA.

[knuhol]

@pke I don't think it can work like this - all what is your script doing is copying all files from build folder into www folder when CRA build is complete, nothing more and that's not enough. Did you read this article? There are more steps required. In addition I need to remove the first slashes from generated paths by build (e.g. /logo.svg -> logo.svg).

[pke]

I also didn't think it can work like this, thats why I opened #786 in the first place. But then it turned out to be very easy. No problems with paths here, I just don't ever use absolute paths with a leading slash.

[knuhol]

@pke The paths are generated automatically by whatever-is-inside-CRA (Webpack I guess). E.g. it generates /static/css/main.9a0fe4f1.css which has to be renamed to static/css/main.9a0fe4f1.css. Ok, I can do it manually for approx. five files but what about larger project?

Maybe I don't understand properly a goal of this project - I thought it is a fast project starter and it seems it is much more a tool for beginners whose learn React and need to start fast examples - because you can't reconfigure Webpack, add SASS support etc.

[gaearon]

The issue about non-root paths is here: #1094. It is not specific to Cordova. Please track that issue if you are interested in progress on it.

Also as noted in many issues you can add SASS the same way people have been using it for years: by running its watcher. It is just not built-in.

Let's keep the discussion in this issue on the topic of Cordova integration needs.

[knuhol]

Oh my, I've just discovered an eject option so I am absolutely happy about this project right now - it's my fault, I should read the doc better. Thanks to all for your help!

[gaearon]

Going to reopen so that we add something to the docs when other issues are solved.

[gaearon]

I'll close because it doesn't appear like a lot of people are hitting this, but feel free to send a doc PR if you'd like!

In addition I need to remove the first slashes from generated paths by build (e.g. /logo.svg -> logo.svg).

This is now officially supported if you specify "homepage": "." in your package.json.