npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

react-crema

v0.11.0

Published

A framework to develop web and cordova applications all together

Downloads

38

Readme

bitHound Overall Score bitHound Dependencies bitHound Dev Dependencies bitHound Code  Code documentation

🍨 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! |

Images examples

Table of contents

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
  • 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

Advanced topics

Change log

Change log

Code documentation

Code documentation

What's next?

  • Add Splashscreen configuration
  • Add testing
  • Add scripts documentation
  • Improve the documentation