summaryrefslogtreecommitdiff
path: root/www
diff options
context:
space:
mode:
authorelijah <elijah@riseup.net>2016-09-16 13:54:10 -0700
committerKali Kaneko (leap communications) <kali@leap.se>2016-09-22 11:39:47 -0400
commitae5a20d059209f2027c05820dc3b4cfe7346c8a8 (patch)
tree3ddc591e3d8b9fc9721c198bb83976b1d6705490 /www
parentbb82515bca6ff6e6b74718bf946faf3747e40002 (diff)
[pkg] fix www (aka bitmask_js) when run in "development mode"
this change allows you to edit the js and have the changes reflected immediately in the app.
Diffstat (limited to 'www')
-rw-r--r--www/MANIFEST.in1
-rw-r--r--www/Makefile59
-rw-r--r--www/README.md34
-rw-r--r--www/leap/bitmask_www/__init__.py0
-rw-r--r--www/notes-python.txt8
-rw-r--r--www/notes.txt173
-rw-r--r--www/pydist/README.md4
-rw-r--r--www/pydist/setup.py (renamed from www/setup.py)24
-rw-r--r--www/webpack.config.js11
9 files changed, 89 insertions, 225 deletions
diff --git a/www/MANIFEST.in b/www/MANIFEST.in
deleted file mode 100644
index 7d5f58b..0000000
--- a/www/MANIFEST.in
+++ /dev/null
@@ -1 +0,0 @@
-include notes-python.txt
diff --git a/www/Makefile b/www/Makefile
index 18a7107..d67a02b 100644
--- a/www/Makefile
+++ b/www/Makefile
@@ -1,34 +1,47 @@
-build:
+#
+# builds for development mode
+#
+
+dev-build: build-clean
npm install
- npm run build:production
+ npm run build
+ touch pydist/bitmask_js/__init__.py
-build-dev:
- npm run watch
+dev-install: dev-build
+ pip install -e pydist
-clean:
- rm -rf public
- rm -rf node_modules
+#
+# installs python package, but does not rebuild the js.
+# for usage when you don't want to install nodejs
+#
+dev-install-prebuilt:
+ pip install -e pydist
-py-pkg:
- touch leap/bitmask_www/__init__.py
- cp -r public/ leap/bitmask_www
-pydist: pydist-clean build py-pkg
- python setup.py bdist_wheel
+#
+# distribution builds
+#
-pydist-dev: pydist-clean build py-pkg
- pip install -e .
+dist-build: build-clean
+ npm install
+ npm run build:production
+ touch pydist/bitmask_js/__init__.py
+ cd pydist && python setup.py bdist_wheel
-pydist-install: pydist
- pip install dist/*.whl
+dist-install: dist-build
+ pip install pydist/dist/*.whl
-pydist-clean:
- rm -rf build dist
- rm -rf leap/bitmask_www/*
+#
+# cleaning up
+#
-uninstall:
- pip uninstall leap.bitmask_www
+build-clean:
+ rm -rf pydist/bitmask_js
+ rm -rf pydist/dist
+ rm -rf pydist/build
-all: clean build pydist
+clean: build-clean
+ rm -rf node_modules
-.PHONY: clean build install all
+uninstall:
+ pip uninstall bitmask_js
diff --git a/www/README.md b/www/README.md
index 17c5042..3f276c0 100644
--- a/www/README.md
+++ b/www/README.md
@@ -5,10 +5,9 @@ Here lies the user interface for Bitmask, written in Javascript.
quick start:
+ sudo apt install nodejs npm nodejs-legacy
npm install # installs development dependencies in "node_modules"
- npm run watch # continually rebuilds source .js into "public"
- bitmaskd # launch backend
- npm run open # opens http://localhost:7070/ in a browser
+ npm run watch # continually rebuilds source .js into "pydist"
build for deployment:
@@ -16,10 +15,31 @@ build for deployment:
npm run build:production
After 'build', 'build:production', or 'watch' is run, everything needed for
-Bitmask JS is contained in the 'public' directory. No additional files are
-needed. Open the public/index.html file in a browser or web widget. Because of
-the single origin policy of browsers, you will need to open public/index.html
-through the webserver included with bitmaskd (e.g. http://localhost:7070)
+Bitmask JS is contained in the 'pydist' directory. No additional files are
+needed. Open the pydist/bitmask_js/public/index.html file in a browser or web
+widget.
+
+However! Because of the single origin policy of browsers, you will need to
+open public/index.html through the webserver included with bitmaskd (e.g.
+http://localhost:7070)
+
+In order for this JS app to be loaded by bitmask, it must be packaged as a
+python package and installed in the virtualenv:
+
+ source path-to-virtualenv/bin/activate
+ make dev-install # builds and installs JS app as python package
+ pkill bitmaskd # make sure bitmaskd is not already running
+ bitmaskd # launch backend
+ npm run open # opens http://localhost:7070/ in a browser
+ npm run watch # rebuild JS whenever source file is changed.
+
+In order to package for distribution:
+
+ make dist-build
+
+NOTE: If you make changes to the asset files, like add or modify an image, you
+ will need to stop then rerun `npm run watch` for the changes to take
+ effect.
Development Dependencies
-----------------------------------------------------------------
diff --git a/www/leap/bitmask_www/__init__.py b/www/leap/bitmask_www/__init__.py
deleted file mode 100644
index e69de29..0000000
--- a/www/leap/bitmask_www/__init__.py
+++ /dev/null
diff --git a/www/notes-python.txt b/www/notes-python.txt
deleted file mode 100644
index 90621f8..0000000
--- a/www/notes-python.txt
+++ /dev/null
@@ -1,8 +0,0 @@
-leap.bitmask_www
------------------
-this package contains the already compiled static element for
-the web-ui of bitmask.
-
-If you want to develop for this UI, please checkout the bitmask-dev [0] repo and follow the instructions in the www/README.md file.
-
-[0] https://github.com/leapcode/bitmask-dev
diff --git a/www/notes.txt b/www/notes.txt
deleted file mode 100644
index 39d60ed..0000000
--- a/www/notes.txt
+++ /dev/null
@@ -1,173 +0,0 @@
-
-
-# BITMASK API
-
-https://0xacab.org/leap/leap_pycommon/blob/develop/src/leap/common/events/catalog.py
-
-
-
-
-https://github.com/rofrischmann/react-layout-components/blob/develop/modules/components/Box.jsx
-https://github.com/tastejs/todomvc/tree/master/examples
-
-ES6
-
- https://github.com/DrkSephy/es6-cheatsheet
- http://egorsmirnov.me/2015/06/14/react-and-es6-part2.html
-
-React component examples
-
- https://github.com/Khan/perseus/tree/master/src/components
- https://react.parts/web
-
-Props versus States
-
- https://github.com/uberVU/react-guide/blob/master/props-vs-state.md
-
-
-Localization
-
- https://github.com/martinandert/counterpart
- http://www.localeplanet.com/
-
-Flexbox
-
- https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Flexible_Box_Layout/Using_CSS_flexible_boxes
-
-Style
-
- Flat/Low Saturation visual language: https://www.youtube.com/watch?v=jAhjPd4uNFY
-
-
-testing
------------------------------------------
-
-https://github.com/airbnb/enzyme
-
-
-webpack
-------------------------------------------
-
-https://github.com/webpack/docs/wiki/optimization
-
-https://github.com/rauschma/webpack-es6-demo
-
-https://github.com/shakacode/react-webpack-rails-tutorial
-
-https://stackoverflow.com/questions/27639005/how-to-copy-static-files-to-build-directory-with-webpack#27651720
-
-react ui components
---------------------------------------------
-
-material design
-
- material-ui
- http://www.material-ui.com
- materialize
- materialize looks to have the best css
- https://react-materialize.github.io
- http://materializecss.com
- mui
- https://www.muicss.com
- react-material
- react-polymer
-
-elemental
- http://elemental-ui.com/
- react-only toolkit
-
-foundation
- used by pixelated user agent
-
-grommet.io
-
-topcoat
- react-topui
-
-belle
- "configurable react components with great UX"
- use belle or bootstrap theme
- nikgraf.github.com/belle
-
-react-islands
- react implementation of yandex's islands design
- github.com/narqo/react-islands
-
-Pivotol UI
- react ui components styles for the Pivotal brand
- http://styleguide.pivotal.io
-
-react
-------------------------
-
-react with es6 classes:
-
-https://facebook.github.io/react/docs/reusable-components.html#es6-classes
-
-
-redux
------------------
-
-http://redux.js.org/
-https://github.com/reactjs/redux
- Redux is a predictable state container for JavaScript apps.
- functional programming
-
- oop with redux
- https://github.com/newtoncodes/react-redux-oop
- https://github.com/ddsol/redux-schema
-
- boilerplates
- https://github.com/markerikson/react-redux-links/blob/master/boilerplates-and-starter-kits.md
- https://github.com/tsaiDavid/simple-redux-boilerplate
-
-ec6
-------------------
-
- http://frontendjournal.com/javascript-es6-learn-important-features-in-a-few-minutes/
- https://www.infoq.com/news/2015/03/react-es6-classes
- https://github.com/google/traceur-compiler/wiki/Getting-Started
- http://www.developerdrive.com/2011/08/top-10-must-follow-javascript-best-practices-2/
-
-
-react templates
----------------------------------
-
-https://wix.github.io/react-templates/
-
-
-Toolchain
--------------------
-
-processors
- traceur
- babel
-
-front-end package management
- bower - https://bower.io/
- component
- npm + browserify
- http://browserify.org/
- and many others
- https://github.com/wilmoore/frontend-packagers
-
-module builder
- browserify
- webpack
-
-testing framework
- https://github.com/karma-runner/karma
-
-full frameworks
-------------------------
-
-http://aurelia.io/
-
-
-watcherify
-----------------------------
-
-
-#!/bin/bash
-watchify client/main.js -o public/bundle.js -dv &
-nodemon --exec npm run babel-node -- app.js
diff --git a/www/pydist/README.md b/www/pydist/README.md
new file mode 100644
index 0000000..6e2b11f
--- /dev/null
+++ b/www/pydist/README.md
@@ -0,0 +1,4 @@
+This directory holds the python package of the javascript app, called 'bitmask_js'.
+
+Why it it done this way? By creating a python package, it is easier for the
+javascript app to be distributed with the bitmask client.
diff --git a/www/setup.py b/www/pydist/setup.py
index d45dbbd..b5d3ffb 100644
--- a/www/setup.py
+++ b/www/pydist/setup.py
@@ -17,32 +17,34 @@
# along with this program. If not, see <http://www.gnu.org/licenses/>.
"""
-Setup file for leap.bitmask-www
+Setup file for bitmask_js
"""
from setuptools import setup
-
import datetime
import time
+long_description = \
+'''bitmask_js
+-----------------
+This package contains the already compiled javascript resources for the bitmask UI.
+
+If you want to develop for this UI, please checkout the bitmask-dev [0] repo and follow the instructions in the ui/README.md file.
-# TODO add all the node steps in this setup too.
-# Right now it's expected that you run the node commands by hand
-# i.e., 'make build'
+[0] https://github.com/leapcode/bitmask-dev'''
-now = datetime.datetime.now()
+now = datetime.datetime.now()
timestamp = time.strftime('%Y%m%d%H%M', now.timetuple())
setup(
- name='leap.bitmask_www',
+ name='bitmask_js',
version='0.1.%s' % timestamp,
- description='Bitmask html/js UI',
- long_description=open('notes-python.txt').read(),
+ description='Bitmask UI',
+ long_description=long_description,
author='LEAP Encrypted Access Project',
author_email='info@leap.se',
url='http://leap.se',
- namespace_packages=['leap'],
- packages=['leap.bitmask_www'],
+ packages=['bitmask_js'],
package_data={
'': ['public/*',
'public/css/*',
diff --git a/www/webpack.config.js b/www/webpack.config.js
index a29e575..c0f8d19 100644
--- a/www/webpack.config.js
+++ b/www/webpack.config.js
@@ -6,7 +6,7 @@ var config = {
context: path.join(__dirname, 'app'),
entry: ['babel-polyfill', './main.js'],
output: {
- path: path.join(__dirname, 'public'),
+ path: path.join(__dirname, 'pydist', 'bitmask_js', 'public'),
filename: 'app.bundle.js'
},
resolve: {
@@ -41,7 +41,14 @@ var config = {
// https://webpack.github.io/docs/code-splitting.html
// new webpack.optimize.CommonChunkPlugin('common.js')
- // https://github.com/kevlened/copy-webpack-plugin
+ //
+ // ASSETS
+ //
+ // If you make changes to the asset files, you will need to stop then rerun
+ // `npm run watch` for the changes to take effect.
+ //
+ // For more information: https://github.com/kevlened/copy-webpack-plugin
+ //
new CopyWebpackPlugin([
{ from: 'css/*.css' },
{ from: 'img/*'},