Merge pull request #13 from topcoder-platform/dev

Segment Analytics env fix during webpack build

Author: urwithat

build.sh

@@ -4,6 +4,7 @@ APP_NAME=$1
 UPDATE_CACHE=""
 
 docker build -f docker/Dockerfile -t $APP_NAME:latest \
+--build-arg SEGMENT_ANALYTICS_KEY=$SEGMENT_ANALYTICS_KEY \
 --build-arg APPMODE=$APPMODE \
 --build-arg APPENV=$APPENV .
 

docker/Dockerfile

@@ -3,9 +3,11 @@ FROM node:10.22.1
 
 ARG APPMODE
 ARG APPENV
+ARG SEGMENT_ANALYTICS_KEY
 
 ENV APPMODE=$APPMODE
 ENV APPENV=$APPENV
+ENV SEGMENT_ANALYTICS_KEY=$SEGMENT_ANALYTICS_KEY
 
 # Copy the current directory into the Docker image
 COPY . /micro-frontends-frame

package.json

@@ -2,9 +2,9 @@
   "name": "@topcoder/micro-frontends-frame",
   "scripts": {
     "start": "node server.js",
-    "build": "webpack --mode=${APPMODE:-development} --env.config=${APPENV:-dev}",
+    "build": "webpack --mode=${APPMODE:-development} --env.APPENV=${APPENV:-dev} --env.SEGMENT_ANALYTICS_KEY=${SEGMENT_ANALYTICS_KEY:-NS}",
     "local-server": "nodemon ./server.js",
-    "local-client": "webpack-dev-server --mode=development --port 8080 --env.config=local",
+    "local-client": "webpack-dev-server --mode=development --port 8080 --env.APPENV=local",
     "lint": "eslint src --ext js",
     "test": "cross-env BABEL_ENV=test jest --passWithNoTests",
     "format": "prettier --write \"./**\""

src/index.ejs

@@ -76,7 +76,7 @@
     </single-spa-router>
   </template>
 
-  <% if (!!htmlWebpackPlugin.options.templateParameters.SEGMENT_ANALYTICS_KEY) { %>
+  <% if (htmlWebpackPlugin.options.templateParameters.SEGMENT_ANALYTICS_KEY != "NS") { %>
   <!-- Segment Analytics Code -->
   <script type="text/javascript">
     !function(){var analytics=window.analytics=window.analytics||[];if(!analytics.initialize)if(analytics.invoked)window.console&&console.error&&console.error("Segment snippet included twice.");else{analytics.invoked=!0;analytics.methods=["trackSubmit","trackClick","trackLink","trackForm","pageview","identify","reset","group","track","ready","alias","debug","page","once","off","on","addSourceMiddleware","addIntegrationMiddleware","setAnonymousId","addDestinationMiddleware"];analytics.factory=function(t){return function(){var e=Array.prototype.slice.call(arguments);e.unshift(t);analytics.push(e);return analytics}};for(var t=0;t<analytics.methods.length;t++){var e=analytics.methods[t];analytics[e]=analytics.factory(e)}analytics.load=function(t,e){var n=document.createElement("script");n.type="text/javascript";n.async=!0;n.src="https://cdn.segment.com/analytics.js/v1/"+t+"/analytics.min.js";var a=document.getElementsByTagName("script")[0];a.parentNode.insertBefore(n,a);analytics._loadOptions=e};analytics.SNIPPET_VERSION="4.1.0";

webpack.config.js

@@ -32,8 +32,8 @@ module.exports = (webpackConfigEnv) => {
         inject: false,
         template: "src/index.ejs",
         templateParameters: {
-          env: webpackConfigEnv.config,
-          SEGMENT_ANALYTICS_KEY: process.env.SEGMENT_ANALYTICS_KEY,
+          APPENV: webpackConfigEnv.APPENV,
+          SEGMENT_ANALYTICS_KEY: webpackConfigEnv.SEGMENT_ANALYTICS_KEY,
           orgName,
         },
       }),