improve and document developer setup (#161)

japanese commit fixes #158
2018-07-13 09:54:12 +04:00
parent 62a5d7196e
commit a544aff6ac
17 changed files with 728 additions and 347 deletions
@@ -1,6 +1,6 @@
-const BASE_URL = 'https://remark42.radio-t.com';
+const BASE_URL = process.env.REMARK_URL;
 const API_BASE = '/api/v1';
-const NODE_ID = 'remark42';
+const NODE_ID = process.env.REMARK_NODE;
 const COUNTER_NODE_CLASSNAME = 'remark42__counter';
 const COMMENT_NODE_CLASSNAME_PREFIX = 'remark42__comment-';
 const LAST_COMMENTS_NODE_CLASSNAME = 'remark42__last-comments';
@@ -35,7 +35,7 @@ function init() {

  node.innerHTML = `
    <iframe
-      src="${process.env.NODE_ENV === 'production' ? `${BASE_URL}/web` : ''}/iframe.html?${query}"
+      src="${BASE_URL}/web/iframe.html?${query}"
      width="100%"
      frameborder="0"
      allowtransparency="true"
@@ -75,7 +75,7 @@ function init() {
        `&id=${user.id}&name=${user.name}&picture=${user.picture || ''}&isDefaultPicture=${user.isDefaultPicture || 0}`;
      this.node.innerHTML = `
      <iframe
-        src="${process.env.NODE_ENV === 'production' ? `${BASE_URL}/web` : ''}/iframe.html?${queryUserInfo}"
+        src="${BASE_URL}/web/iframe.html?${queryUserInfo}"
        width="100%"
        height="100%"
        frameborder="0"
@@ -1,6 +1,7 @@
 /* eslint-disable no-console */
 /** @jsx h */
 import { h, render } from 'preact';
+import 'preact/debug';

 import { BASE_URL, DEFAULT_LAST_COMMENTS_MAX, LAST_COMMENTS_NODE_CLASSNAME } from './common/constants';

@@ -3,6 +3,7 @@
 import loadPolyfills from 'common/polyfills';

 import { h, render } from 'preact';
+import 'preact/debug';
 import { Provider } from 'preact-redux';
 import Root from './components/root';
 import UserInfo from 'components/user-info';
@@ -21,14 +21,14 @@
  <div class="container">
    <p>
      First counter with url from data-attribute:
-      <span class="remark42__counter" data-url="https://radio-t.com/p/2017/11/11/podcast-571/"></span>
-      (<a href="https://radio-t.com/p/2017/11/11/podcast-571/" target="_blank">note</a>)
+      <span class="remark42__counter" data-url="http://127.0.0.1:8080/web/"></span>
+      (<a href="http://127.0.0.1:8080/web/" target="_blank">note</a>)
    </p>

    <p>
      Second counter with url from global remark config:
      <span class="remark42__counter"></span>
-      (<a href="https://radio-t.com/p/2017/12/16/podcast-576/" target="_blank">note</a>)
+      (<a href="http://127.0.0.1:8080/web/" target="_blank">note</a>)
    </p>

    <p>
@@ -38,14 +38,12 @@

  <script>
    var remark_config = {
-      site_id: 'radiot',
-      url: 'https://radio-t.com/p/2017/12/16/podcast-576/'
+      site_id: 'remark',
    };

    (function() {
      var d = document, s = d.createElement('script');
-      var baseurl = '';
-      s.src = baseurl + '/web/counter.js';
+      s.src = '/web/counter.js';
      s.type = 'text/javascript';
      (d.head || d.body).appendChild(s);
    })();
@@ -1,44 +0,0 @@
-<!DOCTYPE html>
-<html lang="ru">
-<head>
-  <meta charset="utf-8">
-  <meta name="viewport" content="width=device-width,initial-scale=1">
-  <title>remark42</title>
-
-  <style>
-    body {
-      padding: 0;
-      margin: 0;
-    }
-
-    .container {
-      max-width: 800px;
-      margin: 5px;
-    }
-
-    @media (min-width: 768px) {
-      .container {
-        margin: 40px;
-      }
-    }
-  </style>
-</head>
-<body>
-  <div class="container">
-    <div id="remark42"></div>
-  </div>
-
-  <script>
-    var remark_config = {
-      site_id: 'radiot',
-      url: 'https://radio-t.com/p/2017/12/16/podcast-576/',
-    };
-
-    (function() {
-      var d = document, s = d.createElement('script');
-      s.src = '/embed.js';
-      (d.head || d.body).appendChild(s);
-    })();
-  </script>
-</body>
-</html>
@@ -1,5 +1,5 @@
 <!DOCTYPE html>
-<html lang="ru">
+<html>
 <head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width,initial-scale=1">
@@ -75,6 +75,13 @@
    </div>
  </div>
  <script>
+    /* REMOVE-START */
+    if (window.parent !== window) {
+      try {
+        window.__REACT_DEVTOOLS_GLOBAL_HOOK__ = window.parent.__REACT_DEVTOOLS_GLOBAL_HOOK__;
+      } catch (e){}
+    }
+    /* REMOVE-END */
    var lastHeight = 0;
    setInterval(function() {
      if (document.body.offsetHeight !== lastHeight) {
@@ -19,6 +19,13 @@
 </head>
 <body>
  <div class="container">
+    <h1>Demo page</h1>
+    <p>To install widgets on your website, follow the <a href="https://github.com/umputun/remark#setup-on-your-website">instructions</a>.</p>
+    <p>See also</p>
+    <ul>
+      <li><a href="/web/last-comments.html">Last comments widget</a></li>
+      <li><a href="/web/counter.html">Counter widget</a></li>
+    </ul>
    <div id="remark42"></div>
  </div>

@@ -30,8 +37,7 @@

    (function() {
      var d = document, s = d.createElement('script');
-      var baseurl = 'https://demo.remark42.com/';
-      s.src = baseurl + '/web/embed.js';
+      s.src = '/web/embed.js';
      s.type = 'text/javascript';
      (d.head || d.body).appendChild(s);
    })();
@@ -24,13 +24,12 @@

  <script>
    var remark_config = {
-      site_id: 'radiot',
+      site_id: 'remark',
    };

    (function() {
      var d = document, s = d.createElement('script');
-      var baseurl = '';
-      s.src = baseurl + '/web/last-comments.js';
+      s.src = '/web/last-comments.js';
      s.type = 'text/javascript';
      (d.head || d.body).appendChild(s);
    })();
@@ -2,7 +2,7 @@
  "name": "remark-ui",
  "version": "0.1.0",
  "scripts": {
-    "build": "cross-env NODE_ENV=production webpack --config ./webpack.config.js",
+    "build": "webpack --config ./webpack.config.js",
    "start": "webpack-dev-server --progress --hot --inline --config ./webpack.config.js",
    "lint": "eslint --ext=.js,.jsx .",
    "test": "jest",
@@ -30,8 +30,6 @@
    "babel-preset-env": "^1.7.0",
    "clean-webpack-plugin": "^0.1.19",
    "copy-webpack-plugin": "^4.5.1",
-    "core-js": "^2.5.7",
-    "cross-env": "^5.2.0",
    "css-loader": "^0.28.11",
    "eslint": "^4.19.1",
    "eslint-config-prettier": "^2.9.0",
@@ -54,9 +52,7 @@
    "postcss-simple-vars": "^4.1.0",
    "postcss-url": "^6.3.1",
    "postcss-wrap": "0.0.4",
-    "preact-redux": "^2.0.3",
    "prettier": "^1.13.7",
-    "redux": "^4.0.0",
    "style-loader": "^0.19.1",
    "webpack": "^3.12.0",
    "webpack-bundle-analyzer": "^2.13.1",
@@ -65,7 +61,10 @@
  "dependencies": {
    "axios": "^0.18.0",
    "bem-react-helper": "^1.1.2",
-    "preact": "^8.2.9"
+    "core-js": "^2.5.7",
+    "preact": "^8.2.9",
+    "preact-redux": "^2.0.3",
+    "redux": "^4.0.0"
  },
  "eslintIgnore": [
    "public"
@@ -11,12 +11,13 @@ const Define = webpack.DefinePlugin;
 const BundleAnalyze = require('webpack-bundle-analyzer').BundleAnalyzerPlugin;

 const babelOptions = require('./babelOptions');
-const { NODE_ID } = require('./app/common/constants');
 const publicFolder = path.resolve(__dirname, 'public');
-const env = process.env.NODE_ENV || 'dev';
-
+const env = process.env.NODE_ENV || 'development';
+const remarkUrl = process.env.REMARK_URL || 'https://demo.remark42.com';
+const NODE_ID = 'remark42';
 // let's log some env variables because we can
 console.log(`NODE_ENV = ${env}`);
+console.log(`REMARK_ENV = ${process.env.REMARK_URL}`);

 const commonStyleLoaders = [
  'css-loader',
@@ -39,6 +40,7 @@ const commonStyleLoaders = [

 module.exports = {
  context: __dirname,
+  devtool: env === 'development' ? 'source-map' : false,
  entry: {
    embed: './app/embed',
    counter: './app/counter',
@@ -66,13 +68,10 @@ module.exports = {
      },
      {
        test: /\.scss$/,
-        use:
-          env === 'production'
-            ? ExtractText.extract({
-                fallback: 'style-loader',
-                use: commonStyleLoaders,
-              })
-            : ['style-loader', ...commonStyleLoaders],
+        use: ExtractText.extract({
+          fallback: 'style-loader',
+          use: commonStyleLoaders,
+        }),
      },
      {
        test: /\.(png|jpg|jpeg|gif|svg)$/,
@@ -91,7 +90,9 @@ module.exports = {
      b: 'bem-react-helper',
    }),
    new Define({
-      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV),
+      'process.env.NODE_ENV': JSON.stringify(env),
+      'process.env.REMARK_NODE': JSON.stringify(NODE_ID),
+      'process.env.REMARK_URL': env === 'production' ? JSON.stringify(remarkUrl) : 'window.location.origin',
    }),
    // TODO: we should add it only on demo serv
    new Html({
@@ -110,15 +111,6 @@ module.exports = {
      filename: 'last-comments.html',
      inject: false,
    }),
-    ...(env === 'production'
-      ? []
-      : [
-          new Html({
-            template: path.resolve(__dirname, 'dev.ejs'),
-            filename: 'dev.html',
-            inject: false,
-          }),
-        ]),
    new ExtractText({
      filename: `remark.css`,
      allChunks: true,
@@ -139,13 +131,25 @@ module.exports = {
        ]),
    new Copy(['./iframe.html']),
  ],
-  watch: env === 'dev',
  watchOptions: {
    ignored: /(node_modules|\.vendor\.js$)/,
  },
  devServer: {
-    host: '0.0.0.0',
-    port: 8080,
+    host: 'localhost',
+    port: 9000,
    contentBase: publicFolder,
+    publicPath: '/web',
+    proxy: {
+      '/api': {
+        target: remarkUrl,
+        logLevel: 'debug',
+        changeOrigin: true,
+      },
+      '/auth': {
+        target: remarkUrl,
+        logLevel: 'debug',
+        changeOrigin: true,
+      },
+    },
  },
 };