[chore] add dot.env, updates to demo-app build, update gitignore (#2928)

- add dot.env plugin for demo-app - updates to demo-app build - update gitignore Signed-off-by: Ihor Dykhta <dikhta.igor@gmail.com>
keplergl · Jan 22, 2025 · 4af6092 · 4af6092
1 parent ce23c76
commit 4af6092
Show file tree

Hide file tree

Showing 5 changed files with 161 additions and 38 deletions.
diff --git a/.env.template b/.env.template
@@ -0,0 +1,11 @@
+mapboxApiAccessToken=...
+mapboxAccessToken=...
+MapboxAccessToken=...
+MAPBOX_ACCESS_TOKEN=...
+MapboxExportToken=...
+DropboxClientId=...
+CartoClientId=...
+FoursquareClientId=...
+FoursquareDomain=...
+FoursquareAPIURL=...
+FoursquareUserMapsURL=...
diff --git a/.gitignore b/.gitignore
@@ -38,3 +38,8 @@ npm-debug.log
 !.yarn/releases
 !.yarn/sdks
 !.yarn/versions
+
+# Local Netlify folder
+.netlify
+meta.json
+.env
diff --git a/examples/demo-app/esbuild.config.mjs b/examples/demo-app/esbuild.config.mjs
@@ -3,6 +3,7 @@
 
 import esbuild from 'esbuild';
 import {replace} from 'esbuild-plugin-replace';
+import {dotenvRun} from '@dotenv-run/esbuild';
 
 import process from 'node:process';
 import fs from 'node:fs';
@@ -29,60 +30,54 @@ const EXTERNAL_HUBBLE_SRC = join(LIB_DIR, '../../hubble.gl');
 
 const port = 8080;
 
-// add alias to serve from kepler src, resolve libraries so there is only one copy of them
-const RESOLVE_LOCAL_ALIASES = {
-  react: `${NODE_MODULES_DIR}/react`,
-  'react-dom': `${NODE_MODULES_DIR}/react-dom`,
-  'react-redux': `${NODE_MODULES_DIR}/react-redux/lib`,
-  'styled-components': `${NODE_MODULES_DIR}/styled-components`,
-  'react-intl': `${NODE_MODULES_DIR}/react-intl`,
-  // Suppress useless warnings from react-date-picker's dep
-  'tiny-warning': `${SRC_DIR}/utils/src/noop.ts`,
-  // kepler.gl and loaders.gl need to use same apache-arrow
-  'apache-arrow': `${NODE_MODULES_DIR}/apache-arrow`,
-  // all react-ai-assist needs to be resolved from samenode_modules
-  'react-ai-assist': `${NODE_MODULES_DIR}/react-ai-assist`
-};
-
 const getThirdPartyLibraryAliases = useKeplerNodeModules => {
-  const node_modules_dir = useKeplerNodeModules ? NODE_MODULES_DIR : BASE_NODE_MODULES_DIR;
+  const nodeModulesDir = useKeplerNodeModules ? NODE_MODULES_DIR : BASE_NODE_MODULES_DIR;
+
+  const localSources = useKeplerNodeModules
+    ? {
+        // Suppress useless warnings from react-date-picker's dep
+        'tiny-warning': `${SRC_DIR}/utils/src/noop.ts`
+      }
+    : {};
 
   return {
-    react: `${node_modules_dir}/react`,
-    'react-dom': `${node_modules_dir}/react-dom`,
-    'react-redux': `${node_modules_dir}/react-redux/lib`,
-    'styled-components': `${node_modules_dir}/styled-components`,
-    'react-intl': `${node_modules_dir}/react-intl`,
-    // Suppress useless warnings from react-date-picker's dep
-    ...(useKeplerNodeModules ? {'tiny-warning': `${SRC_DIR}/utils/src/noop.ts`} : {}),
+    ...localSources,
+    react: `${nodeModulesDir}/react`,
+    'react-dom': `${nodeModulesDir}/react-dom`,
+    'react-redux': `${nodeModulesDir}/react-redux/lib`,
+    'styled-components': `${nodeModulesDir}/styled-components`,
+    'react-intl': `${nodeModulesDir}/react-intl`,
     // kepler.gl and loaders.gl need to use same apache-arrow
-    'apache-arrow': `${node_modules_dir}/apache-arrow`,
+    'apache-arrow': `${nodeModulesDir}/apache-arrow`,
     // all react-ai-assist needs to be resolved from samenode_modules
-    'react-ai-assist': `${node_modules_dir}/react-ai-assist`
+    'react-ai-assist': `${nodeModulesDir}/react-ai-assist`
   };
 };
 
+const NODE_ENV = JSON.stringify(process.env.NODE_ENV || 'production');
 const config = {
   platform: 'browser',
   format: 'iife',
   logLevel: 'info',
-  loader: {'.js': 'jsx', '.css': 'css'},
+  loader: {
+    '.js': 'jsx',
+    '.css': 'css',
+    '.ttf': 'file',
+    '.woff': 'file',
+    '.woff2': 'file'
+  },
   entryPoints: ['src/main.js'],
   outfile: 'dist/bundle.js',
   bundle: true,
   define: {
-    NODE_ENV: JSON.stringify(process.env.NODE_ENV || 'production'),
-    'process.env.MapboxAccessToken': JSON.stringify(process.env.MapboxAccessToken || ''),
-    'process.env.DropboxClientId': JSON.stringify(process.env.DropboxClientId || ''),
-    'process.env.MapboxExportToken': JSON.stringify(process.env.MapboxExportToken || ''),
-    'process.env.CartoClientId': JSON.stringify(process.env.CartoClientId || ''),
-    'process.env.FoursquareClientId': JSON.stringify(process.env.FoursquareClientId || ''),
-    'process.env.FoursquareDomain': JSON.stringify(process.env.FoursquareDomain || ''),
-    'process.env.FoursquareAPIURL': JSON.stringify(process.env.FoursquareAPIURL || ''),
-    'process.env.FoursquareUserMapsURL': JSON.stringify(process.env.FoursquareUserMapsURL || ''),
-    'process.env.OpenAIToken': JSON.stringify(process.env.OpenAIToken || '')
+    NODE_ENV
   },
   plugins: [
+    dotenvRun({
+      verbose: true,
+      environment: NODE_ENV,
+      root: '../../.env'
+    }),
     // automatically injected kepler.gl package version into the bundle
     replace({
       __PACKAGE_VERSION__: KeplerPackage.version,
@@ -209,9 +204,35 @@ function openURL(url) {
     await esbuild
       .build({
         ...config,
-
         minify: true,
-        sourcemap: false
+        sourcemap: false,
+        // Add alias resolution for build
+        alias: {
+          ...getThirdPartyLibraryAliases(true)
+        },
+        // Add these production optimizations
+        define: {
+          ...config.define,
+          'process.env.NODE_ENV': '"production"'
+        },
+        drop: ['console', 'debugger'],
+        treeShaking: true,
+        metafile: true,
+        // Optionally generate a bundle analysis
+        plugins: [
+          ...config.plugins,
+          {
+            name: 'bundle-analyzer',
+            setup(build) {
+              build.onEnd(result => {
+                if (result.metafile) {
+                  // Write bundle analysis to disk
+                  fs.writeFileSync('meta.json', JSON.stringify(result.metafile));
+                }
+              });
+            }
+          }
+        ]
       })
       .catch(e => {
         console.error(e);

diff --git a/examples/demo-app/package.json b/examples/demo-app/package.json
@@ -1,6 +1,9 @@
 {
   "scripts": {
     "start": "node esbuild.config.mjs --start",
+    "build": "node esbuild.config.mjs --build",
+    "deploy": "yarn build && netlify deploy -d dist",
+    "deploy:prod": "yarn build && netlify deploy -d dist --prod",
     "start:local": "NODE_ENV=local node esbuild.config.mjs --start",
     "start:local-ai": "NODE_ENV=local node esbuild.config.mjs --start --env.ai",
     "start:local-deck": "NODE_ENV=local node esbuild.config.mjs --start --env.deck",
@@ -66,6 +69,7 @@
   },
   "packageManager": "yarn@4.4.0",
   "devDependencies": {
+    "@dotenv-run/esbuild": "^1.5.0",
     "esbuild-plugin-replace": "^1.4.0"
   }
 }
diff --git a/examples/demo-app/yarn.lock b/examples/demo-app/yarn.lock
@@ -365,6 +365,29 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@dotenv-run/core@npm:~1.3.6":
+  version: 1.3.6
+  resolution: "@dotenv-run/core@npm:1.3.6"
+  dependencies:
+    chalk: "npm:^4.1.2"
+    dotenv: "npm:^16.4.5"
+    dotenv-expand: "npm:^10.0.0"
+    find-up: "npm:^5.0.0"
+  checksum: 10c0/26a5e8698017ad3f56c236f199d945c4df00f19ac28381dc00ef688dba23e436449ae7d27606ca63d026b92143fa8e4840aca4ad89031b5ec9dbc6ee00c50fc2
+  languageName: node
+  linkType: hard
+
+"@dotenv-run/esbuild@npm:^1.5.0":
+  version: 1.5.0
+  resolution: "@dotenv-run/esbuild@npm:1.5.0"
+  dependencies:
+    "@dotenv-run/core": "npm:~1.3.6"
+  peerDependencies:
+    esbuild: ^0.21.0
+  checksum: 10c0/ff359e0aea49534be60486065b2f20ce4a83aacadf7706ff3bef5a793473d8527efe3b9c9b5c00333b04874d69f08676f27da5c8ec1027ed5a7d5df0ec4b6066
+  languageName: node
+  linkType: hard
+
 "@emotion/is-prop-valid@npm:1.2.1":
   version: 1.2.1
   resolution: "@emotion/is-prop-valid@npm:1.2.1"
@@ -9096,6 +9119,20 @@ __metadata:
   languageName: node
   linkType: hard
 
+"dotenv-expand@npm:^10.0.0":
+  version: 10.0.0
+  resolution: "dotenv-expand@npm:10.0.0"
+  checksum: 10c0/298f5018e29cfdcb0b5f463ba8e8627749103fbcf6cf81c561119115754ed582deee37b49dfc7253028aaba875ab7aea5fa90e5dac88e511d009ab0e6677924e
+  languageName: node
+  linkType: hard
+
+"dotenv@npm:^16.4.5":
+  version: 16.4.7
+  resolution: "dotenv@npm:16.4.7"
+  checksum: 10c0/be9f597e36a8daf834452daa1f4cc30e5375a5968f98f46d89b16b983c567398a330580c88395069a77473943c06b877d1ca25b4afafcdd6d4adb549e8293462
+  languageName: node
+  linkType: hard
+
 "draco3d@npm:1.5.5":
   version: 1.5.5
   resolution: "draco3d@npm:1.5.5"
@@ -9621,6 +9658,16 @@ __metadata:
   languageName: node
   linkType: hard
 
+"find-up@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "find-up@npm:5.0.0"
+  dependencies:
+    locate-path: "npm:^6.0.0"
+    path-exists: "npm:^4.0.0"
+  checksum: 10c0/062c5a83a9c02f53cdd6d175a37ecf8f87ea5bbff1fdfb828f04bfa021441bc7583e8ebc0872a4c1baab96221fb8a8a275a19809fb93fbc40bd69ec35634069a
+  languageName: node
+  linkType: hard
+
 "flat@npm:^5.0.2":
   version: 5.0.2
   resolution: "flat@npm:5.0.2"
@@ -11141,6 +11188,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"locate-path@npm:^6.0.0":
+  version: 6.0.0
+  resolution: "locate-path@npm:6.0.0"
+  dependencies:
+    p-locate: "npm:^5.0.0"
+  checksum: 10c0/d3972ab70dfe58ce620e64265f90162d247e87159b6126b01314dd67be43d50e96a50b517bce2d9452a79409c7614054c277b5232377de50416564a77ac7aad3
+  languageName: node
+  linkType: hard
+
 "lodash-es@npm:^4.17.15":
   version: 4.17.21
   resolution: "lodash-es@npm:4.17.21"
@@ -12139,6 +12195,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"p-limit@npm:^3.0.2":
+  version: 3.1.0
+  resolution: "p-limit@npm:3.1.0"
+  dependencies:
+    yocto-queue: "npm:^0.1.0"
+  checksum: 10c0/9db675949dbdc9c3763c89e748d0ef8bdad0afbb24d49ceaf4c46c02c77d30db4e0652ed36d0a0a7a95154335fab810d95c86153105bb73b3a90448e2bb14e1a
+  languageName: node
+  linkType: hard
+
 "p-locate@npm:^4.1.0":
   version: 4.1.0
   resolution: "p-locate@npm:4.1.0"
@@ -12148,6 +12213,15 @@ __metadata:
   languageName: node
   linkType: hard
 
+"p-locate@npm:^5.0.0":
+  version: 5.0.0
+  resolution: "p-locate@npm:5.0.0"
+  dependencies:
+    p-limit: "npm:^3.0.2"
+  checksum: 10c0/2290d627ab7903b8b70d11d384fee714b797f6040d9278932754a6860845c4d3190603a0772a663c8cb5a7b21d1b16acb3a6487ebcafa9773094edc3dfe6009a
+  languageName: node
+  linkType: hard
+
 "p-map@npm:^7.0.2":
   version: 7.0.3
   resolution: "p-map@npm:7.0.3"
@@ -13506,6 +13580,7 @@ __metadata:
   dependencies:
     "@auth0/auth0-spa-js": "npm:^2.1.2"
     "@carto/toolkit": "npm:0.0.1-rc.18"
+    "@dotenv-run/esbuild": "npm:^1.5.0"
     "@emotion/is-prop-valid": "npm:^1.2.1"
     "@kepler.gl/actions": "npm:^3.1.0-alpha.5"
     "@kepler.gl/cloud-providers": "npm:^3.1.0-alpha.5"
@@ -15052,6 +15127,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"yocto-queue@npm:^0.1.0":
+  version: 0.1.0
+  resolution: "yocto-queue@npm:0.1.0"
+  checksum: 10c0/dceb44c28578b31641e13695d200d34ec4ab3966a5729814d5445b194933c096b7ced71494ce53a0e8820685d1d010df8b2422e5bf2cdea7e469d97ffbea306f
+  languageName: node
+  linkType: hard
+
 "zod-to-json-schema@npm:^3.22.3, zod-to-json-schema@npm:^3.22.4, zod-to-json-schema@npm:^3.22.5":
   version: 3.24.1
   resolution: "zod-to-json-schema@npm:3.24.1"