summaryrefslogtreecommitdiff
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
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.
-rw-r--r--.gitignore3
-rw-r--r--Makefile2
-rw-r--r--README.rst72
-rw-r--r--setup.py4
-rw-r--r--src/leap/bitmask/core/_web.py6
-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
14 files changed, 143 insertions, 258 deletions
diff --git a/.gitignore b/.gitignore
index 94c51d3..31d862b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -36,9 +36,8 @@ ENV/
# Javascript, web-ui
www/node_modules
-www/public
www/npm-debug.log
-www/leap/bitmask_www/public/
+www/pydist/bitmask_js
# vim
*.swp
diff --git a/Makefile b/Makefile
index bcf4cf0..46a6ca8 100644
--- a/Makefile
+++ b/Makefile
@@ -4,7 +4,7 @@ clean:
dev-mail:
pip install -e '.[mail]'
- pip install -e www
+ make -C www dev-install-prebuilt
dev-all:
pip install -e '.[all]'
diff --git a/README.rst b/README.rst
index 8125503..6f2f98d 100644
--- a/README.rst
+++ b/README.rst
@@ -1,5 +1,5 @@
Bitmask
-===========
+=======================================
*Your internet encryption toolkit*
@@ -28,37 +28,38 @@ application.
.. _`GPL3`: http://www.gnu.org/licenses/gpl.txt
Package under development!
---------------------------
+---------------------------------------
+
This is a unified repo that has merged the following packages, previously isolated, under the leap namespace:
bonafide, mail, keymanager, bitmask.
The previous Qt client has been deprecated (bitmask version 0.8.2, still
-available at the http://github.com/leapcode/bitmask_client repo).
+available at the http://github.com/leapcode/bitmask_client repo).
Note that this repo still doesn't have support for VPN: its porting will
follow soon.
Read the Docs!
-------------------
+---------------------------------------
The latest documentation about Bitmask is available at `LEAP`_.
.. _`LEAP`: https://leap.se/en/docs/client
Bugs
-====
+=======================================
Please report any bugs `in our bug tracker`_.
-.. _`in our bug tracker`: https://leap.se/code/projects/report-issues
+.. _`in our bug tracker`: https://leap.se/code/projects/report-issues
Development
-==============
+=======================================
-Tests
------
+Running Tests
+---------------------------------------
You need tox to run the tests. If you don't have it in your system yet::
@@ -70,33 +71,54 @@ And then run all the tests::
Hacking
--------
+----------------------------------
+
+In order to run bitmask in a development environment, you must activate a
+virtualenv and install the various packages using 'pip install -e'. This
+installs python packages as links to the source code, so that your code
+changes are immediately reflected in the packages installed in the virtualenv.
-If you want to develop for the encrypted mail service, execute inside your virtualenv::
+All this is done for you with the Makefile. For example, if you want to
+develop for the encrypted mail service::
+ virtualenv venv
+ source venv/bin/activate
make dev-mail
-If you want to develop for the gui client too, you have to have installed the
-python2 bindings for Qt5 in your system (in debian: ``apt install python-pyqt5
-python-pyqt5.qtwebkit``). After ensuring this, you can do::
+If you want to develop for the gui client too, you have to have
+installed the python2 bindings for Qt5 in your system (in debian: ``apt
+install python-pyqt5 python-pyqt5.qtwebkit``). After ensuring this, you can
+do::
make dev-all
-hacking on the webui
-++++++++++++++++++++
+Note: even though the UI is in javascript. Qt is used to create a webview
+window.
+
+hacking on the javascript UI
++++++++++++++++++++++++++++++++++++++++
+
+The above instructions will install a python package that contains a pre-
+bundled version of the javascript UI.
-The above instructions will install a python package that contains a
-pre-compiled version of all the html+js elements, which is updated
-periodically. If you want to hack on the
-web-ui, you should read the instructions on the ``www/README.rst``. If you want
-to test the integration of the web-ui and the webkit client, you can install a
-development version of the bitmask_www package. Inside your virtualenv::
+If you want to hack on the javascript UI, then it needs to be able to update the
+javascript bundle whenever a javascript or CSS source file changes.
+First, install the javascript prerequisites:
+
+ sudo apt install nodejs npm nodejs-legacy
+
+Next, run ``dev-install``:
+
+ source venv/bin/activate # if not already activated
cd www
- make pydist-dev
+ make dev-install # install JS user interface as a python package in "develop" mode.
+ node run watch # continually rebuild javascript bundle when source files change.
+
+For more information, see ``www/README.md``.
cross-testing
-+++++++++++++
++++++++++++++++++++++++++++++++++++++++
If you are developing against a non-published branch of ``leap.common`` or
``leap.soledad``, run instead::
@@ -108,7 +130,7 @@ parent folder.
License
-=======
+=======================================
.. image:: https://raw.github.com/leapcode/bitmask_client/develop/docs/user/gpl.png
diff --git a/setup.py b/setup.py
index 62609d4..c480c3e 100644
--- a/setup.py
+++ b/setup.py
@@ -27,11 +27,11 @@ extras = {
],
'gui': [
'vext.pyqt5',
- 'leap.bitmask_www',
+ 'bitmask_js',
],
'all': [
'vext.pyqt5',
- 'leap.bitmask_www',
+ 'bitmask_js',
'leap.soledad.client',
'gnupg',
]
diff --git a/src/leap/bitmask/core/_web.py b/src/leap/bitmask/core/_web.py
index ae22325..344e26e 100644
--- a/src/leap/bitmask/core/_web.py
+++ b/src/leap/bitmask/core/_web.py
@@ -34,7 +34,7 @@ from twisted.python import log
from leap.bitmask.core.dispatcher import CommandDispatcher
try:
- import leap.bitmask_www
+ import bitmask_js
HAS_WEB_UI = True
except ImportError:
HAS_WEB_UI = False
@@ -54,9 +54,9 @@ class HTTPDispatcherService(service.Service):
def startService(self):
if HAS_WEB_UI:
webdir = os.path.abspath(
- pkg_resources.resource_filename('leap.bitmask_www', 'public'))
+ pkg_resources.resource_filename('bitmask_js', 'public'))
else:
- log.msg('leap.bitmask_www not found, serving bitmask.core web ui')
+ log.msg('bitmask_js not found, serving bitmask.core ui')
webdir = os.path.abspath(
pkg_resources.resource_filename('leap.bitmask.core', 'web'))
root = File(webdir)
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/*'},