Merge pull request #63 from gitcomteam/feature/62-performance-improvements

Feature/62 performance improvements

Author: mx2s

.env.example

@@ -1 +1,7 @@
-REACT_APP_API_URL=http://localhost:8000
+REACT_APP_API_URL=http://localhost:8000
+
+PUBLIC_URL=https://sdn-host.net/public/
+
+CDN_HOST=some-ftp-host.com
+CDN_LOGIN=gitcom
+CDN_PASSWORD=your-password

package.json

@@ -46,5 +46,6 @@
       "last 1 firefox version",
       "last 1 safari version"
     ]
-  }
+  },
+  "devDependencies": {}
 }

public/index.html

@@ -24,34 +24,5 @@
 
     gtag('config', 'UA-153205738-3');
 </script>
-
-<!-- Start of Async Drift Code -->
-<script>
-    "use strict";
-
-    !function () {
-        var t = window.driftt = window.drift = window.driftt || [];
-        if (!t.init) {
-            if (t.invoked) return void (window.console && console.error && console.error("Drift snippet included twice."));
-            t.invoked = !0, t.methods = ["identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on"],
-                t.factory = function (e) {
-                    return function () {
-                        var n = Array.prototype.slice.call(arguments);
-                        return n.unshift(e), t.push(n), t;
-                    };
-                }, t.methods.forEach(function (e) {
-                t[e] = t.factory(e);
-            }), t.load = function (t) {
-                var e = 3e5, n = Math.ceil(new Date() / e) * e, o = document.createElement("script");
-                o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + n + "/" + t + ".js";
-                var i = document.getElementsByTagName("script")[0];
-                i.parentNode.insertBefore(o, i);
-            };
-        }
-    }();
-    drift.SNIPPET_VERSION = '0.3.1';
-    drift.load('kmcg4ky4chmh');
-</script>
-<!-- End of Async Drift Code -->
 </body>
 </html>

public/js/lazy_init.js

@@ -0,0 +1,28 @@
+!function () {
+    var t = window.driftt = window.drift = window.driftt || [];
+    if (!t.init) {
+        if (t.invoked) return void (window.console && console.error && console.error("Drift snippet included twice."));
+        t.invoked = !0, t.methods = ["identify", "config", "track", "reset", "debug", "show", "ping", "page", "hide", "off", "on"],
+            t.factory = function (e) {
+                return function () {
+                    var n = Array.prototype.slice.call(arguments);
+                    return n.unshift(e), t.push(n), t;
+                };
+            }, t.methods.forEach(function (e) {
+            t[e] = t.factory(e);
+        }), t.load = function (t) {
+            var e = 3e5, n = Math.ceil(new Date() / e) * e, o = document.createElement("script");
+            o.type = "text/javascript", o.async = !0, o.crossorigin = "anonymous", o.src = "https://js.driftt.com/include/" + n + "/" + t + ".js";
+            var i = document.getElementsByTagName("script")[0];
+            i.parentNode.insertBefore(o, i);
+        };
+    }
+}();
+drift.SNIPPET_VERSION = '0.3.1';
+drift.load('kmcg4ky4chmh');
+
+window.dataLayer = window.dataLayer || [];
+function gtag(){dataLayer.push(arguments);}
+gtag('js', new Date());
+
+gtag('config', 'UA-153205738-3');

scripts/deploy/prod/copy_build.sh

@@ -1,3 +1,4 @@
 #!/bin/bash
-rm -rf /usr/local/gitcom/frontend/app/build/*
-cp -avr /usr/local/gitcom/frontend/app/tmp/build /usr/local/gitcom/frontend/app/
+python3 scripts/deploy/prod/stages/cdn_upload.py
+./scripts/deploy/prod/stages/copy_build.sh $1
+ssh $1 "bash -s" < ./scripts/deploy/prod/stages/deploy.sh

scripts/deploy/prod/deploy.sh

@@ -0,0 +1,62 @@
+import os.path, os
+from ftplib import FTP, error_perm
+
+from dotenv import load_dotenv
+load_dotenv()
+
+load_dotenv(verbose=True)
+
+from pathlib import Path
+env_path = Path('.') / '.env'
+
+host = os.getenv("CDN_HOST")
+port = 21
+
+ftp = FTP()
+ftp.connect(host,port)
+ftp.login(os.getenv("CDN_LOGIN"), os.getenv("CDN_PASSWORD"))
+
+def count_files(path):
+    files_count = 0
+    for name in os.listdir(path):
+        localpath = os.path.join(path, name)
+        if os.path.isfile(localpath):
+            files_count += 1
+        elif os.path.isdir(localpath):
+            files_count += 1
+            files_count += count_files(localpath)
+    return files_count
+
+def upload_folder(ftp, path, prefix = None):
+    if prefix is not None:    
+        progress = 0
+        print("total files: " + str(count_files(path)) + " in " + path)
+        root_dir = "/gitcom/" + prefix
+        try:
+            ftp.mkd(root_dir)
+        except error_perm as e:
+            print(e)
+        ftp.cwd(root_dir)
+
+    for name in os.listdir(path):
+        localpath = os.path.join(path, name)
+        if os.path.isfile(localpath):
+            print("Storing ", name, localpath)
+            ftp.storbinary('STOR ' + name, open(localpath,'rb'))
+        elif os.path.isdir(localpath):
+            print("MKD", name)
+
+            try:
+                ftp.mkd(name)
+            except error_perm as e:
+                print(e)
+
+            print("CWD", name)
+            ftp.cwd(name)
+            upload_folder(ftp, localpath)
+            print("CWD", "..")
+            ftp.cwd("..")
+
+upload_folder(ftp, "build", "public/")
+
+ftp.quit()

scripts/deploy/prod/stages/cdn_upload.py

@@ -0,0 +1,2 @@
+#!/bin/bash
+scp -r build "$1":/usr/local/gitcom/frontend/app/tmp

scripts/deploy/prod/stages/copy_build.sh

@@ -0,0 +1,3 @@
+#!/bin/bash
+rm -rf /usr/local/gitcom/frontend/app/build/*
+cp -avr /usr/local/gitcom/frontend/app/tmp/build /usr/local/gitcom/frontend/app/

scripts/deploy/prod/stages/deploy.sh

@@ -19,6 +19,21 @@ window.AppConfig = config;
 // @ts-ignore
 window.App = new App();
 
+async function loadScriptAsync(url: string) {
+    const script = document.createElement("script");
+
+    script.src = url;
+    script.async = true;
+
+    document.body.appendChild(script);
+}
+
+loadScriptAsync("https://momentjs.com/downloads/moment.min.js").then(() => {});
+
+setTimeout(() => {
+    loadScriptAsync("/js/lazy_init.js").then(() => {});
+}, 1000);
+
 function AppRoot() {
     return (
         <div className="app">