Add dotenv file loading

.env.dist

@@ -0,0 +1 @@
+GA_SECRET=

components/helmet/index.js

@@ -1,7 +1,5 @@
-const { PHASE_DEVELOPMENT_SERVER } = require('next/constants');
 import NextHead from 'next/head';
 import siteConfig from 'storage/site';
-import { GA_TRACKING_ID } from 'lib/gtag';
 
 const prepareTitle = (givenTitle) => {
   givenTitle = givenTitle || siteConfig.title;
@@ -56,15 +54,19 @@ const Helmet = (props) => (
     <link rel="icon" href="/static/manifest/favicon.ico" type="image/x-icon" />
 
     { /* Global Site Tag (gtag.js) - Google Analytics */ }
-    <script async src={ `https://www.googletagmanager.com/gtag/js?id=${GA_TRACKING_ID}` } />
+    { process.env.GA_SECRET && (
-    <script dangerouslySetInnerHTML={{
+      <>
-      __html: `
+        <script async src={ `https://www.googletagmanager.com/gtag/js?id=${process.env.GA_SECRET}` } />
-        window.dataLayer = window.dataLayer || [];
+        <script dangerouslySetInnerHTML={{
-        function gtag(){dataLayer.push(arguments);}
+          __html: `
-        gtag('js', new Date());
+            window.dataLayer = window.dataLayer || [];
-        gtag('config', '${GA_TRACKING_ID}');
+            function gtag(){dataLayer.push(arguments);}
-      `,
+            gtag('js', new Date());
-    }} />
+            gtag('config', '${process.env.GA_SECRET}');
+          `,
+        }} />
+      </>
+    )}
   </NextHead>
 );
 

lib/gtag.js

@@ -1,5 +1,3 @@
-export const GA_TRACKING_ID = 'UA-139582634-1';
-
 // https://developers.google.com/analytics/devguides/collection/gtagjs/pages
 export const firePageView = url => {
   if (!window.gtag) {
@@ -7,7 +5,7 @@ export const firePageView = url => {
     return;
   }
 
-  window.gtag('config', GA_TRACKING_ID, {
+  window.gtag('config', process.env.GA_SECRET, {
     page_path: url,
   })
 };

next.config.js

@@ -8,6 +8,8 @@ const {
   getRoadmapRoutes,
 } = require("./scripts/path-map");
 
+require('dotenv').config();
+
 const withMDX = require('@next/mdx')({
   extension: /\.(md|mdx)?$/,
   options: {
@@ -24,6 +26,11 @@ const options = {
     };
   },
 
+  // @todo read these from `process.env` and inject without having to write the vars here
+  env: {
+    GA_SECRET: process.env.GA_SECRET
+  },
+
   // Allow mdx and md files to be pages
   pageExtensions: ['jsx', 'js', 'mdx', 'md'],
 

package.json

@@ -28,6 +28,7 @@
     "bootstrap": "^4.3.1",
     "classnames": "^2.2.6",
     "date-fns": "^2.6.0",
+    "dotenv": "^8.2.0",
     "font-awesome": "^4.7.0",
     "next": "^9.0.4",
     "node-sass": "^4.12.0",

yarn.lock

@@ -3390,6 +3390,11 @@ domutils@^1.7.0:
     dom-serializer "0"
     domelementtype "1"
 
+dotenv@^8.2.0:
+  version "8.2.0"
+  resolved "https://registry.yarnpkg.com/dotenv/-/dotenv-8.2.0.tgz#97e619259ada750eea3e4ea3e26bceea5424b16a"
+  integrity sha512-8sJ78ElpbDJBHNeBzUbUVLsqKdccaa/BXF1uPTw3GrvQTBgrQrtObr2mUrE38vzYd8cEv+m/JBfDLioYcfXoaw==
+
 duplexify@^3.4.2, duplexify@^3.6.0:
   version "3.7.1"
   resolved "https://registry.yarnpkg.com/duplexify/-/duplexify-3.7.1.tgz#2a4df5317f6ccfd91f86d6fd25d8d8a103b88309"