add frontend web skeleton

jbweston · Apr 15, 2018 · 62bb5ae · 62bb5ae
1 parent 46f34ee
commit 62bb5ae
Show file tree

Hide file tree

Showing 8 changed files with 112 additions and 0 deletions.
diff --git a/.gitignore b/.gitignore
@@ -4,3 +4,5 @@ docs/build
 dist/
 build/
 venv/
+node_modules/
+nord/web/static/
diff --git a/README.rst b/README.rst
@@ -137,18 +137,29 @@ Both of these methods are explained in top-rated answers to this
 
 Developing
 ----------
+You will need Python 3.6 and Yarn_ (for the web components).
 ::
 
     git clone https://github.com/jbweston/nord
     cd nord
     virtualenv -p python3.6
     source venv/bin/activate
     pip install -e .[dev]
+    yarn install
 
 Periodically check your code with the linter::
 
     pylint nord
 
+Web components
+**************
+When developing the web frontend you can execute the following command
+to run an auto-reloading web server::
+
+    yarn dev
+
+.. _Yarn: https://yarnpkg.com/en/docs/install
+
 Building the API documentation
 ******************************
 ::

diff --git a/nord/web/__init__.py b/nord/web/__init__.py
diff --git a/package.json b/package.json
@@ -0,0 +1,32 @@
+{
+  "name": "nord",
+  "description": "An unofficial client for NordVPN",
+  "repository": "https://github.com/jbweston/nord",
+  "author": "Joseph Weston <[email protected]>",
+  "license": "GPL-3.0",
+  "scripts": {
+    "build": "webpack -p",
+    "dev": "webpack-dev-server --hot --inline --progress"
+  },
+  "devDependencies": {
+    "babel-core": "^6.26.0",
+    "babel-loader": "^7.1.2",
+    "babel-plugin-transform-runtime": "^6.23.0",
+    "babel-polyfill": "^6.26.0",
+    "babel-preset-es2015": "^6.24.1",
+    "babel-preset-react": "^6.24.1",
+    "babel-preset-stage-3": "^6.24.1",
+    "babel-runtime": "^6.26.0",
+    "css-loader": "^0.28.10",
+    "html-webpack-plugin": "^2.30.1",
+    "style-loader": "^0.20.2",
+    "webpack": "^3.11.0",
+    "webpack-dev-server": "^2.11.1"
+  },
+  "dependencies": {
+    "bulma": "^0.6.2",
+    "react": "^16.2.0",
+    "react-dom": "^16.2.0",
+    "transform-runtime": "^0.0.0"
+  }
+}
diff --git a/web/components/Nord.jsx b/web/components/Nord.jsx
@@ -0,0 +1,9 @@
+import React from 'react' ;
+
+const Nord = () => (
+    <h1 className="title">
+        Hello, World!
+    </h1>
+) ;
+
+export default Nord ;
diff --git a/web/index.html b/web/index.html
@@ -0,0 +1,11 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <title>nord</title>
+  </head>
+  <body>
+    <div id="root"></div>
+  </body>
+</html>
diff --git a/web/index.jsx b/web/index.jsx
@@ -0,0 +1,13 @@
+import 'bulma/css/bulma.css'
+
+import React from 'react' ;
+import ReactDOM from 'react-dom' ;
+
+import Nord from './components/Nord.jsx' ;
+
+const root = document.getElementById('root') ;
+if (root == null) {
+    throw new Error("No root element") ;
+} else {
+    ReactDOM.render(<Nord />, root) ;
+}
diff --git a/webpack.config.js b/webpack.config.js
@@ -0,0 +1,34 @@
+const path = require('path') ;
+const HtmlWebpackPlugin = require('html-webpack-plugin') ;
+
+const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
+    template: './web/index.html',
+    filename: 'index.html',
+    inject: 'body'
+})
+
+module.exports = {
+    entry: ['babel-polyfill', './web/index.jsx'],
+    output: {
+        path: path.resolve(__dirname, 'nord', 'web', 'static'),
+        filename: 'index_bundle.js',
+    },
+    plugins: [HtmlWebpackPluginConfig],
+    module: {
+        loaders: [
+            {
+                test: /\.(jsx|js)$/,
+                exclude: /node_modules/,
+                loader: 'babel-loader',
+                query: {
+                    plugins: ['transform-runtime'],
+                    presets: ['es2015', 'react', 'stage-3']
+                }
+            },
+            {
+                test: /\.css/,
+                use: ['style-loader', 'css-loader']
+            }
+        ]
+    }
+} ;
-Original file line number
+Diff line change
@@ Expand Up / @@ -4,3 +4,5 @@ docs/build @@
     dist/
     build/
     venv/
+    node_modules/
+    nord/web/static/