kraken-example-with-shoppingcart

Kraken with Shopping Cart, universal react view rendering, and PayPal integration

Prerequisites

This example requires that MongoDB is installed and running on it's default port.
You will -- of course -- need Node (Version >= 0.10.22 preferred)

Installation

Clone, install and run.

git clone [email protected]:krakenjs/kraken-example-with-shoppingcart.git
cd kraken-example-with-shoppingcart
npm install
npm start

Explore the app

Visit http://localhost:8000

Illustrates

anemone-machina and for universal react view rendering
anemone-lingua for localized content (en-US or es-ES) from .properties files
react-router for URL/view mapping
flux to manage the application lifecycle and architecture
'browserify` for browser JavaScript dependency management
bundalo for localized messages with model data
mongodb for storing product information
Integration with the PayPal SDK

React components

krakenjs (PayPal's JavaScript open source umbrella) has namespaced important react-related modules under the anemone namespace.

anemone-machina

The example utilizes anemone-machina for rendering views on both the client and server (as an express view engine).

The express view engine is configured in config/config.json in this block:

    "express": {
        "view engine": "jsx",
        "view": "require:anemone-machina/lib/expressView",
        "view cache": false,
        "views": "path:./public/views"
    },
    "view engines": {
        "jsx": {
            "module": "anemone-machina/lib/server",
            "renderer": {
                "method": "create",
                "arguments": [
                    {
                        "routes": "require:./routes.jsx",
                        "routesFilePath": "path:./routes.jsx"
                    }
                ]
            }
        }
    },

anenome-lingua

Configured as a middleware in config/config.json:

        "reactContentLoader": {
            "priority": 100,
            "enabled": true,
            "module": {
                "name": "anemone-lingua",
                "arguments": [
                    {
                        "contentPath": "path:./locales",
                        "fallback": "en-US"
                    }
                ]
            }
        }

react-router

Please see routes.jsx for the Router definition. You can see server-rendered views by making a direct get request for any of:

/
/products
/cart

When the application is loaded in the browser, clicking any of the main navigation links will illustrate browser-rendered views.

flux

The flux-based patterns can be found in the files under public/js/*.js. You can also see the flux listeners pushed down from the routes.jsx file.

browserify

The browserify bundle.js build is defined in Gruntfile.js as well as tasks/browserify.js.
The development hot-loader construx-browserify for the bundle is configured in config/development.json
The above block also specifies routes.jsx as this application makes use of react-router.
The browser react renderer is configured in public/main.js

mongodb

Pre-requisite: An instance of MongoDB installed and running on its default port.

config changes (config.json):

"databaseConfig": {
	"host": "localhost",
	"database": "shocart"
},

lib/database.js: configure and connect to mongodb instance lib/spec.js: call database.js config method in the kraken-js onconfig event

PayPal SDK

config changes (config.json):

"paypalConfig": {
	"host": "api.sandbox.paypal.com",
	"port": "",
	"client_id": "EBWKjlELKMYqRNQ6sYvFo64FtaRLRR5BdHEESmha49TM",
	"client_secret": "EO422dn3gQLgDbuwqTjzrFgFtaRLRR5BdHEESmha49TM"
},

Payment initiated in the /pay route which is defined in controllers/pay/index.js

Localized content

config changes (config.json):

"i18n": {
	"contentPath": "path:./locales",
	"fallback": "en-US"
},

config changes (config.json) under middleware:

"locale": {
	"priority": 95,
	"enabled": true,
	"module": {
		"name": "path:./lib/locale"
	}
}

locale is chosen via the /setLanguage/:locale route, which is initiated by hyperlinked flag images in the UI

locale is set into the response via the locale middleware defined in lib/locale.js

Localized model data with bundalo

bundalo is used to provide localized messages directly in server responses. The bundle middleware, lib/getBundle.js, attaches a bundle property to the response object.

bundle.get({'bundle': 'messages', 'locality': locality}, function bundleReturn(err, messages) {
		if (err) {
			console.error(err && err.stack || err);
			return next(err);
		}
		res.bundle = intl(messages);
		next();
	});

Note the line res.bundle = intl(messages);. intl is a local method (utilizing intl-messageformat) that adds an additional getter to the existing bundalo API. You can see that in use in controllers/index.js:

model.itemsInCart = res.bundle.getIntl('items', {cartItemLength: cartLength});
//combines the given model with the property from messages.properties:
//items=You have {cartItemLength} items in your cart.

This combines the property with the given model. intl-messageformat can transform the model data based on the user's locale if necessary.

bigwisu / kraken-example-with-shoppingcart Goto Github PK