Skip to content

Commit

Permalink
use webassets
Browse files Browse the repository at this point in the history
  • Loading branch information
David Rasch committed Jul 9, 2015
1 parent 3fbd5a7 commit 003e38c
Show file tree
Hide file tree
Showing 10 changed files with 88 additions and 145 deletions.
2 changes: 1 addition & 1 deletion .bowerrc
@@ -1,4 +1,4 @@
{
"directory": "app/static/libs",
"directory": "rfs/static/libs",
"json": "bower.json"
}
5 changes: 3 additions & 2 deletions .gitignore
Expand Up @@ -57,7 +57,8 @@ docs/_build/
target/

# project specific
app/static/libs/*
rfs/static/libs/*
.module-cache/
node_modules/
test.db
test.db
.webassets-cache/
9 changes: 5 additions & 4 deletions README.md
Expand Up @@ -2,21 +2,22 @@
Shopping cart application build with flask and facebook react

## Installation
Inspired from https://github.com/cbalan/react-flask-todo-app
Inspired from https://github.com/cbalan/react-flask-todo-app,
and https://github.com/Fibio/flamaster

* install python dependencies

pip install -r requirements.txt

* install bower
* install bower

npm install -g bower

* install js dependencies
* install js dependencies

bower install

* compile jsx files using [React tool](http://facebook.github.io/react/docs/tooling-integration.html#productionizing-precompiled-jsx) for development purpose
* compile jsx files using [React tool](http://facebook.github.io/react/docs/tooling-integration.html#productionizing-precompiled-jsx) for development purpose

jsx --watch static/js static/jsx

Expand Down
7 changes: 6 additions & 1 deletion manage.py
Expand Up @@ -3,8 +3,9 @@
import os

from flask.ext.script import Manager
from flask.ext.assets import ManageAssets

from rfs.app import create_app
from rfs.app import create_app, assets

app = create_app(config=os.environ.get('APP_CONFIG', 'rfs.config.DevelopmentConfig'))
manager = Manager(app)
Expand All @@ -26,5 +27,9 @@ def run():
"""
app.run()

@manager.command
def assets():
ManageAssets(assets)

if __name__ == "__main__":
manager.run()
3 changes: 3 additions & 0 deletions requirements.txt
Expand Up @@ -5,3 +5,6 @@ Flask-SQLAlchemy
Flask-WTF
satchless
#trafaret
Flask-Mail
#Flask-Assets
#Flask-Login
23 changes: 22 additions & 1 deletion rfs/app.py
Expand Up @@ -5,10 +5,12 @@

from flask import Flask, render_template
from flask.ext.sqlalchemy import SQLAlchemy
from flask.ext.assets import Environment, Bundle

from rfs.config import DefaultConfig

db = SQLAlchemy()
assets = Environment()

from products.views import products
DEFAULT_BLUEPRINTS = (
Expand All @@ -33,7 +35,8 @@ def create_app(config=None, app_name=None, blueprints=None):
configure_logging(app)
configure_error_handlers(app)
configure_database(app)

configure_assets(app)

return app

def configure_app(app, config=None):
Expand Down Expand Up @@ -93,3 +96,21 @@ def server_error_page(error):

def configure_database(app):
db.init_app(app)

def configure_assets(app):
assets.init_app(app)
js = Bundle("libs/react/react.js",
"libs/jquery/dist/jquery.js",
"libs/bootstrap/dist/js/bootstrap.min.js",
filters="jsmin", output="libs/bundle.js")
assets.register("js_all",js)

css = Bundle("libs/bootstrap/dist/css/bootstrap.css",
"css/app.css",
filters="cssmin",
output="libs/bundle.css")
assets.register("css_all",css)




10 changes: 5 additions & 5 deletions rfs/products/models.py
Expand Up @@ -7,13 +7,13 @@ class Product(db.Model):
description = db.Column(db.Text)
image = db.Column(db.String(512))

class ProductVariant(db.model)
class ProductVariant(db.Model):
id = db.Column(db.Integer, primary_key=True)
title = db.Column(db.String(512), nullable=False)
description = db.Column(db.Text)
sku = db.Column(db.String(512))
price = db.Column(db.Integer))
inventory = db.Column(db.Integer))
price = db.Column(db.Integer)
inventory = db.Column(db.Integer)

mainproduct_id = db.Column(Integer, ForeignKey('products.id'))
mainproduct = relationship("Product", backref=backref('varients', order_by=id))
mainproduct_id = db.Column(db.Integer, db.ForeignKey('products.id'))
mainproduct = db.relationship("Product", backref=db.backref('varients', order_by=id))
137 changes: 13 additions & 124 deletions rfs/static/js/app.js
@@ -1,127 +1,16 @@
'use strict';
var React = require('react');
var ProductData = require('./ProductData');
var CartAPI = require('./utils/CartAPI')
var FluxCartApp = require('./components/FluxCartApp.react');

// Simple pure-React component so we don't have to remember
// Bootstrap's classes
var BootstrapButton = React.createClass({
render: function() {
return (
<a {...this.props}
href="javascript:;"
role="button"
className={(this.props.className || '') + ' btn'} />
);
}
});
// Load Mock Product Data into localStorage
ProductData.init();

var BootstrapModal = React.createClass({
// The following two methods are the only places we need to
// integrate Bootstrap or jQuery with the components lifecycle methods.
componentDidMount: function() {
// When the component is added, turn it into a modal
$(React.findDOMNode(this))
.modal({backdrop: 'static', keyboard: false, show: false});
},
componentWillUnmount: function() {
$(React.findDOMNode(this)).off('hidden', this.handleHidden);
},
close: function() {
$(React.findDOMNode(this)).modal('hide');
},
open: function() {
$(React.findDOMNode(this)).modal('show');
},
render: function() {
var confirmButton = null;
var cancelButton = null;
// Load Mock API Call
CartAPI.getProductData();

if (this.props.confirm) {
confirmButton = (
<BootstrapButton
onClick={this.handleConfirm}
className="btn-primary">
{this.props.confirm}
</BootstrapButton>
);
}
if (this.props.cancel) {
cancelButton = (
<BootstrapButton onClick={this.handleCancel} className="btn-default">
{this.props.cancel}
</BootstrapButton>
);
}

return (
<div className="modal fade">
<div className="modal-dialog">
<div className="modal-content">
<div className="modal-header">
<button
type="button"
className="close"
onClick={this.handleCancel}>
&times;
</button>
<h3>{this.props.title}</h3>
</div>
<div className="modal-body">
{this.props.children}
</div>
<div className="modal-footer">
{cancelButton}
{confirmButton}
</div>
</div>
</div>
</div>
);
},
handleCancel: function() {
if (this.props.onCancel) {
this.props.onCancel();
}
},
handleConfirm: function() {
if (this.props.onConfirm) {
this.props.onConfirm();
}
}
});

var Example = React.createClass({
handleCancel: function() {
if (confirm('Are you sure you want to cancel?')) {
this.refs.modal.close();
}
},
render: function() {
var modal = null;
modal = (
<BootstrapModal
ref="modal"
confirm="OK"
cancel="Cancel"
onCancel={this.handleCancel}
onConfirm={this.closeModal}
title="Hello, Bootstrap!">
This is a React component powered by jQuery and Bootstrap!
</BootstrapModal>
);
return (
<div className="example">
{modal}
<BootstrapButton onClick={this.openModal} className="btn-default">
Open modal
</BootstrapButton>
</div>
);
},
openModal: function() {
this.refs.modal.open();
},
closeModal: function() {
this.refs.modal.close();
}
});

React.render(<Example />, document.getElementById('jqueryexample'));
// Render FluxCartApp Controller View
React.render(
<FluxCartApp />,
document.getElementById('flux-cart')
);
14 changes: 8 additions & 6 deletions rfs/templates/base.html
Expand Up @@ -4,16 +4,18 @@
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery Integration</title>
<link rel="stylesheet" href="/static/libs/bootstrap/dist/css/bootstrap.min.css" type="text/css" />
<link rel="stylesheet" href="/static/css/app.css" type="text/css" />
{% assets "css_all" %}
<link rel="stylesheet" href="{{ ASSET_URL }}">
{% endassets %}

</head>
<body>
<div id="jqueryexample"></div>

<script src="/static/libs/react/react.js"></script>
<script type="text/javascript" src="/static/libs/jquery/dist/jquery.min.js" charset="utf-8"></script>
<script type="text/javascript" src="/static/libs/bootstrap/dist/js/bootstrap.min.js" charset="utf-8"></script>

{% assets "js_all" %}
<script type="text/javascript" src="{{ ASSET_URL }}"></script>
{% endassets %}
{#
compiled with:
$ jsx app/static/jsx app/static/js
Expand Down
23 changes: 22 additions & 1 deletion rfs/templates/index.html
@@ -1 +1,22 @@
Hoi
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>jQuery Integration</title>
{% assets "css_all" %}
<link rel="stylesheet" href="{{ ASSET_URL }}">
{% endassets %}

</head>
<body>
<div id="jqueryexample"></div>

{% assets "js_all" %}
<script type="text/javascript" src="{{ ASSET_URL }}"></script>
{% endassets %}

<script type="text/javascript" src="/jsx/app.js"></script>

</body>
</html>

0 comments on commit 003e38c

Please sign in to comment.