3

Is there a good step by step guide of how to create an Onsen UI 2 + React + Redux + Cordova application from scratch?

There are a lot of guides out there but almost none of them tell about the initial project setup: what npm packages to install and how. How you create the project, how you structure it, where goes css, where goes logic and so on.

In the last week I have read a lot of articles and tutorials about Onsen and React. But I still don't have any clear understanding of how all this things work together in a real project. I am lacking the basics.

Like a small step by step guide:

  1. use npm and install following packages...
  2. this package does this and this and you have to configure it like that and that...
  3. to create a project which will use Cordova + Onsen + React + Redux and will use Babel and WebPack you have to use this and this... and make following configurations in following files...
  4. OK you have created the project! nice! Now here is the correct way of initializing app using cordova... (because I don't understand how I have to initialize it... should I use Cordova onDeviceReady? or ons.onReady? or something else?)
  5. you have to structure you project like that... because it brings following benefits...
  6. the are several additional libraries that can help you and make your life easier...
  7. here is an example of a working project with code where you can see everything: the correct app initialization, brilliant structure, working with stores and async web services...

If someone knows where to find this or maybe can create this guide, please do it!

halfer
  • 19,824
  • 17
  • 99
  • 186
DiselPower
  • 31
  • 4

1 Answers1

0

I made a repo with a basic setup for React + Onsen UI + Redux + Webpack 2. You can use it with or without Cordova, to see the available commands just type npm run. If you know something about Webpack it should be simple to understand the configuration.

Here is the repo

It's not a guide but an example instead, but it should help you a lot (I hope)

Cristóvão Trevisan
  • 1,775
  • 17
  • 18
  • I'm using this one that seems like the "official" one https://github.com/monaca-templates/onsenui-v2-react-minimum But still it seems like `monaca preview` doesn't have access to the Cordova plugins (cordova.js). So I don't really understand the benefit of using that versus any other React+Webpack boilerplate like Create React App. Does yours support this? – adriendenat Apr 25 '17 at 18:55
  • Preview is basically running webpack-dev-server, so it won't have cordova (which is added by "cordova run" itself). That's why it is named preview (it's just so you can see the UI running). My repo is just what you described, a React+Webpack boilerplate. The difference from something like Create React App is that it has Onsen UI. I don't recommend using monaca if you are not using their IDE+online paid tools because it adds unnecessary code plus it uses node_modules cached outside of your control (a lot packages are also outdated/deprecated) – Cristóvão Trevisan Apr 26 '17 at 19:58
  • To run "preview" with cordova you should run webpack in watch mode plus "cordova run browser" at the same time – Cristóvão Trevisan Apr 26 '17 at 20:00
  • One more thing, I actually made the repo because I was discontent with the whole mocana thing – Cristóvão Trevisan Apr 26 '17 at 20:02
  • Yeah I did a setup like this as well, using the browser platform just like you described. I may post it on Github. – adriendenat Apr 27 '17 at 13:53