PanoptesJS: add dev server

zooniverse · Oct 11, 2024 · a67248a · a67248a
1 parent bb4caec
commit a67248a
Show file tree

Hide file tree

Showing 4 changed files with 137 additions and 0 deletions.
diff --git a/packages/lib-panoptes-js/dev/index.html b/packages/lib-panoptes-js/dev/index.html
@@ -0,0 +1,30 @@
+<!DOCTYPE html>
+<html>
+  <head>
+    <meta charset="utf-8">
+    <title>Panoptes.js dev app</title>
+    <style>
+      * {
+        box-sizing: border-box;
+      }
+
+      html, body {
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+  </head>
+  <body>
+    <h1>Panoptes.js dev app</h1>
+    <form
+      id="login-form"
+      method="POST"
+    >
+      <input type="text" name="username" />
+      <br>
+      <input type="password" name="password" />
+      <br>
+      <button type="submit">Login</button>
+    </form>
+  </body>
+</html>
diff --git a/packages/lib-panoptes-js/dev/index.js b/packages/lib-panoptes-js/dev/index.js
@@ -0,0 +1,22 @@
+class App {
+  constructor () {
+    this.html = {
+      loginForm: document.getElementById('login-form')
+    }
+
+    this.html.loginForm.addEventListener('submit', this.loginForm_onSubmit.bind(this))
+  }
+
+  loginForm_onSubmit (e) {
+    console.log('+++ loginForm_onSubmit', e)
+
+    e.preventDefault()
+    return false
+  }
+}
+
+function init () {
+  new App()
+}
+
+window.onload = init
diff --git a/packages/lib-panoptes-js/package.json b/packages/lib-panoptes-js/package.json
@@ -11,6 +11,7 @@
     "directory": "packages/lib-panoptes-js"
   },
   "scripts": {
+    "dev": "BABEL_ENV=es6 webpack serve --config webpack.dev.js",
     "lint": "zoo-standard --fix | snazzy",
     "postversion": "npm publish",
     "test": "NODE_ENV=test mocha --recursive --config ./test/.mocharc.json  \"./src/**/*.spec.js\"",

diff --git a/packages/lib-panoptes-js/webpack.dev.js b/packages/lib-panoptes-js/webpack.dev.js
@@ -0,0 +1,84 @@
+const { execSync } = require('child_process')
+const HtmlWebpackPlugin = require('html-webpack-plugin')
+const path = require('path')
+const webpack = require('webpack')
+
+function gitCommit() {
+  try {
+    const commitHash = execSync('git describe --always').toString('utf8').trim()
+    return commitHash
+  } catch (error) {
+    console.log(error)
+    return 'Not a git repository.'
+  }
+}
+
+const EnvironmentWebpackPlugin = new webpack.EnvironmentPlugin({
+  COMMIT_ID: gitCommit(),
+  DEBUG: false,
+  NODE_ENV: 'development',
+  PANOPTES_ENV: 'staging'
+})
+
+const HtmlWebpackPluginConfig = new HtmlWebpackPlugin({
+  template: './dev/index.html',
+  filename: 'index.html',
+  inject: 'body'
+})
+
+module.exports = {
+  devServer: {
+    allowedHosts: [
+      'bs-local.com',
+      'localhost',
+      '.zooniverse.org'
+    ],
+    server: 'https'
+  },
+  entry: [
+    './dev/index.js'
+  ],
+  mode: 'development',
+  resolve: {
+    fallback: {
+      fs: false,
+      // for markdown-it plugins
+      path: require.resolve("path-browserify"),
+      process: false,
+      url: false,
+    }
+  },
+  module: {
+    rules: [
+      {
+        test: /\.js?$/,
+        exclude: /node_modules/,
+        use: [{
+          loader: 'babel-loader',
+          options: { compact: false }
+        }]
+      },
+      {
+        test: /\.css$/,
+        use: [
+          'style-loader',
+          'css-loader'
+        ]
+      }
+    ]
+  },
+  output: {
+    path: path.resolve('build'),
+    filename: 'main.js',
+    library: '@zooniverse/user',
+    libraryTarget: 'umd',
+    umdNamedDefine: true
+  },
+  plugins: [
+    new webpack.ProvidePlugin({
+      process: 'process/browser',
+    }),
+    EnvironmentWebpackPlugin,
+    HtmlWebpackPluginConfig
+  ]
+}