react-crema
v0.11.0
Published
A framework to develop web and cordova applications all together
Downloads
24
Readme
🍨 CReMa
CReMa (Cordova React Material-UI) is a base project to develop web and cordova applications all together.
| We need | Without CReMa | With CReMa | | :----------------- |:------------------------------------|:-------------------| | A web application | 😀 Yes | 😀 Yes! | | and responsive | 🙄 Well with next release... | 😀 Yes! | | and Android app | 😓 With external support maybe... | 😀 Yes! | | and iOS app | 😱 ... Help!!!!! | 😀 Yes! |
Table of contents
- Basic system
- Prerequisites
- Install
- Easy start
- Add your code
- Web build
- Cordova builds
- Advanced topics
- Change log
- Code documentation
- What's next?
Basic system
It is built with these characteristics in mind:
- easy to configure and customize
- handy development and debugging
- automatic deployment of web and devices applications
These are the main components used to build CReMA:
- React ecosystem to build the application
- React Router as a routing library
- Redux (and React Redux) as the state container
- React Responsive to build responsive components
- React Intl for the internationalization
- Babel to use the best js feature available
- Material-ui to give the application a nice and light style
- Webpack to start the development site and package the app
- Cordova to package the app for Android and iOS
Prerequisites
To work with CReMa you simply need to have installed node
and npm
on your platform; cordova and all the other dependencies involved in building and running the application are downloaded and installed in the local package. For this reason you don't have to install cordova yourself (nor you have to check for incompatibilities with cordova or other globally installed packages).
- to build your app for Android you need the Android Developer Studio.
- to build your app for Ios you need Xcode.
- to install and run the web application built with CReMa you need a web server (like Apache).
Install
Installing CReMa is as easy as executing:
git clone https://bitbucket.org/pinturic/crema.git
cd crema
npm install
Easy start
To start the development web browser run this:
cd crema
npm start
And then open your favourite web browser at the address http://localhost:8080. CReMa is using hot reloading so the changes made to the code are immediately reflected in the app; after any code change you simply can refresh the page to see the updates.
Add your code
The routes used by react router can be found in crema/src/app.jsx
file:
const AppRoutes = (
<Router history={history}>
<Route path="/" component={ReduxApp}>
<IndexRedirect to="/deviceInfo" />
<Route path="deviceInfo" component={DeviceInfo} />
<Route path="guiSample" component={GuiSample} />
<Route path="resources" component={Resources} />
<Route path="fetchApi" component={FetchApi} />
</Route>
</Router>
);
CReMa comes with four example pages you can find in src/pages
; each of these pages includes one example regarding CReMa features:
- device detection
- fetch remote data
- using Material UI
- including resources (as images)
- including the internationalization library
To build your code simply take advantage of the existing pages and modify them or build yours. Then include the newly created pages in Approutes
.
There is a handy config.js
that can be used to store your configuration data; you can find it in:
- config/android.env
- config/development.env
- config/ios.env
- config/production.env
Web build
To build your application simply run:
cd crema
npm run build
In output/web
you will find the html / js / images built by CReMa; these files are to be served by your favourite web server.
Cordova builds
In the scripts
folder there are two handy scripts to build and run your cordova application cordovaBuild.js
and cordovaRun.js
.
Cordova build
Run node cordovaBuild.js --help
to see the available options for this command.
Running the following example will build the android application in debug mode for an emulator.
node cordovaBuild.js -d -e -p android
You can call the same script with npm
. The following command will build the ios application in debug mode for an emulator
npm run cordovaBuild -- -d -e -p ios
It is worth signaling that an Xcode project is generate in crema/devices/ios/platforms/ios/crema.xcodeproj
so you can run the application with the aid of Xcode instead of using the command line.
Cordova run
Run node cordovaRun.js --help
to see the available options for this command.
Running the following example will run the android application in debug mode for an emulator.
node cordovaRun.js -d -e -p android
You can call the same script with npm
. The following command will run the ios application in debug mode for an emulator
npm run cordovaRun -- -d -e -p ios
Cordova plugins handling
Run node cordovaPlugins.js --help
to see the available options for this command.
Running the following example will list the plugins available for the android application.
node cordovaPlugins.js -p android -l
You can call the same script with npm
. The following command will list the plugins available for the android application.
npm run cordovaPlugins -- -p ios -l
Advanced topics
Change log
Code documentation
What's next?
- Add Splashscreen configuration
- Add testing
- Add scripts documentation
- Improve the documentation