GitList
Browse code

add frontend web skeleton

Joseph Weston authored on 24/02/2018 21:02:14
Showing 8 changed files
.gitignore
History View file @ 62bb5ae
... ... 
@@ -4,3 +4,5 @@ docs/build
4 4 
 dist/
5 5 
 build/
6 6 
 venv/
7 
+node_modules/
8 
+nord/web/static/
README.rst
History View file @ 62bb5ae
... ... 
@@ -137,6 +137,7 @@ Both of these methods are explained in top-rated answers to this
137 137
138 138 
 Developing
139 139 
 ----------
140 
+You will need Python 3.6 and Yarn_ (for the web components).
140 141 
 ::
141 142
142 143 
     git clone https://github.com/jbweston/nord
... ... 
@@ -144,11 +145,21 @@ Developing
144 145 
     virtualenv -p python3.6
145 146 
     source venv/bin/activate
146 147 
     pip install -e .[dev]
148 
+    yarn install
147 149
148 150 
 Periodically check your code with the linter::
149 151
150 152 
     pylint nord
151 153
154 
+Web components
155 
+**************
156 
+When developing the web frontend you can execute the following command
157 
+to run an auto-reloading web server::
158 
+
159 
+    yarn dev
160 
+
161 
+.. _Yarn: https://yarnpkg.com/en/docs/install
162 
+
152 163 
 Building the API documentation
153 164 
 ******************************
154 165 
 ::
nord/web/__init__.py
History View file @ 62bb5ae
155 166 
new file mode 100644
package.json
History View file @ 62bb5ae
156 167 
new file mode 100644
... ... 
@@ -0,0 +1,32 @@
1 
+{
2 
+  "name": "nord",
3 
+  "description": "An unofficial client for NordVPN",
4 
+  "repository": "https://github.com/jbweston/nord",
5 
+  "author": "Joseph Weston <joseph@weston.cloud>",
6 
+  "license": "GPL-3.0",
7 
+  "scripts": {
8 
+    "build": "webpack -p",
9 
+    "dev": "webpack-dev-server --hot --inline --progress"
10 
+  },
11 
+  "devDependencies": {
12 
+    "babel-core": "^6.26.0",
13 
+    "babel-loader": "^7.1.2",
14 
+    "babel-plugin-transform-runtime": "^6.23.0",
15 
+    "babel-polyfill": "^6.26.0",
16 
+    "babel-preset-es2015": "^6.24.1",
17 
+    "babel-preset-react": "^6.24.1",
18 
+    "babel-preset-stage-3": "^6.24.1",
19 
+    "babel-runtime": "^6.26.0",
20 
+    "css-loader": "^0.28.10",
21 
+    "html-webpack-plugin": "^2.30.1",
22 
+    "style-loader": "^0.20.2",
23 
+    "webpack": "^3.11.0",
24 
+    "webpack-dev-server": "^2.11.1"
25 
+  },
26 
+  "dependencies": {
27 
+    "bulma": "^0.6.2",
28 
+    "react": "^16.2.0",
29 
+    "react-dom": "^16.2.0",
30 
+    "transform-runtime": "^0.0.0"
31 
+  }
32 
+}
web/components/Nord.jsx
History View file @ 62bb5ae
0 33 
new file mode 100644
... ... 
@@ -0,0 +1,9 @@
1 
+import React from 'react' ;
2 
+
3 
+const Nord = () => (
4 
+    <h1 className="title">
5 
+        Hello, World!
6 
+    </h1>
7 
+) ;
8 
+
9 
+export default Nord ;
web/index.html
History View file @ 62bb5ae
0 10 
new file mode 100644
... ... 
@@ -0,0 +1,11 @@
1 
+<!DOCTYPE html>
2 
+<html>
3 
+  <head>
4 
+    <meta charset="utf-8">
5 
+    <meta name="viewport" content="width=device-width, initial-scale=1">
6 
+    <title>nord</title>
7 
+  </head>
8 
+  <body>
9 
+    <div id="root"></div>
10 
+  </body>
11 
+</html>
web/index.jsx
History View file @ 62bb5ae
0 12 
new file mode 100644
... ... 
@@ -0,0 +1,13 @@
1 
+import 'bulma/css/bulma.css'
2 
+
3 
+import React from 'react' ;
4 
+import ReactDOM from 'react-dom' ;
5 
+
6 
+import Nord from './components/Nord.jsx' ;
7 
+
8 
+const root = document.getElementById('root') ;
9 
+if (root == null) {
10 
+    throw new Error("No root element") ;
11 
+} else {
12 
+    ReactDOM.render(<Nord />, root) ;
13 
+}
webpack.config.js
History View file @ 62bb5ae
0 14 
new file mode 100644
... ... 
@@ -0,0 +1,34 @@
1 
+const path = require('path') ;
2 
+const HtmlWebpackPlugin = require('html-webpack-plugin') ;
3 
+
4 
+const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
5 
+    template: './web/index.html',
6 
+    filename: 'index.html',
7 
+    inject: 'body'
8 
+})
9 
+
10 
+module.exports = {
11 
+    entry: ['babel-polyfill', './web/index.jsx'],
12 
+    output: {
13 
+        path: path.resolve(__dirname, 'nord', 'web', 'static'),
14 
+        filename: 'index_bundle.js',
15 
+    },
16 
+    plugins: [HtmlWebpackPluginConfig],
17 
+    module: {
18 
+        loaders: [
19 
+            {
20 
+                test: /\.(jsx|js)$/,
21 
+                exclude: /node_modules/,
22 
+                loader: 'babel-loader',
23 
+                query: {
24 
+                    plugins: ['transform-runtime'],
25 
+                    presets: ['es2015', 'react', 'stage-3']
26 
+                }
27 
+            },
28 
+            {
29 
+                test: /\.css/,
30 
+                use: ['style-loader', 'css-loader']
31 
+            }
32 
+        ]
33 
+    }
34 
+} ;