fix: update mapbox token

.github/workflows/nodejs.yml

@@ -71,6 +71,7 @@ jobs:
           APPLE_ID: ${{ secrets.APPLE_ID }}
           APPLE_ID_PASSWORD: ${{ secrets.APPLE_ID_PASSWORD }}
           MAPEO_VARIANT: ${{ matrix.variant }}
+          MAPBOX_ACCESS_TOKEN: ${{ secrets.MAPBOX_ACCESS_TOKEN }}
       - name: Publish (unsigned)
         # Currently undocumented, but if it is None (e.g. PR from a fork) then secrets are not defined
         if: github.secret_source != 'Actions'

.gitignore

@@ -12,3 +12,5 @@ storybook-static
 updates
 temp-resources
 .eslintcache
+.env
+.env*.local

.nvmrc

@@ -1 +1 @@
-v12.14.1
+v14.18

README.md

@@ -19,19 +19,30 @@ For a mobile application that is compatible with Mapeo Desktop, see [Mapeo Mobil
 
 Read the [online user guide](https://digital-democracy.gitbook.io/mapeo/) for
 information on how to install aerial imagery and tiles, custom configurations,
-and more. 
+and more.
 
 ![architecture](docs/desktop-architecture.png)
 
 ## Getting Started
 
-To clone and install all dependencies and start a process to re-build the app whenever you change a file:
+To clone and install all dependencies:
 
 ```sh
 git clone [email protected]:digidem/mapeo-desktop.git
 cd mapeo-desktop
 npm install
 npm run build:translations
+```
+
+Create a `.env` file at the project root that has the following structure (replace `<your_token_here>` with a valid [Mapbox public access token](https://docs.mapbox.com/help/getting-started/access-tokens/)):
+
+```env
+MAPBOX_ACCESS_TOKEN=<your_token_here>
+```
+
+Start a process to re-build the app whenever you change a file:
+
+```sh
 npm run watch
 ```
 
@@ -57,7 +68,6 @@ tail -f USERDATA/Mapeo/logs/$DATE.debug.log
 
 See [docs/CONTRIBUTING.md](docs/CONTRIBUTING.md) for more details.
 
-
 ## Community
 
 Connect with the Mapeo community for support & to contribute!

builder.config.js

@@ -4,6 +4,8 @@ const fs = require('fs')
 const path = require('path')
 const { nodeFileTrace } = require('@vercel/nft')
 
+require('dotenv').config()
+
 const config = {
   afterSign: 'bin/notarize.js',
   detectUpdateChannel: true,
@@ -54,7 +56,8 @@ const config = {
     {
       provider: 's3',
       bucket: 'downloads.mapeo.app',
-      path: process.env.ARCH === 'ia32' ? '/desktop/ia32' : '/desktop'
+      path: process.env.ARCH === 'ia32' ? '/desktop/ia32' : '/desktop',
+      publishAutoUpdate: false
     },
     {
       provider: 'github',
@@ -67,7 +70,8 @@ const config = {
       from: path.dirname(require.resolve('mapeo-default-settings')),
       to: 'presets/default'
     }
-  ]
+  ],
+  extraMetadata: { mapboxAccessToken: process.env.MAPBOX_ACCESS_TOKEN }
 }
 
 const files = [

config.js

@@ -1,7 +1,25 @@
 var path = require('path')
 var APP_NAME = 'Mapeo'
 var APP_TEAM = 'Digital Democracy'
-var APP_VERSION = require('./src/build-config').version
+var buildConfig = require('./src/build-config')
+var APP_VERSION = buildConfig.version
+/**
+ * This is very confusing due to the fact that this file is used across two different contexts, where one is bundled via webpack (renderer)
+ * and the other is not (main). For context, we need this to work in the following situations:
+ *
+ * - The development environment (when you have a .env file)
+ * - In CI (when you have an env variable exported in the shell),
+ * - When the app is packaged via electron-builder (renderer code is bundled via webpack, main process code is essentially Node code that gets executed by an Electron executable)
+ *
+ * How this is implemented on a technical level:
+ *
+ * - In the renderer process, process.env.MAPBOX_ACCESS_TOKEN gets replaced inline by dotenv-webpack.
+ * - In the main process, process.env.MAPBOX_ACCESS_TOKEN is not defined (unless you export an environment variable when running the app via the CLI).
+ *   In order for the main process to get access to this value, we use electron-builder to read the env variable in the build environment and
+ *   add a field called `mapboxAccessToken` to the packaged package.json file. This is read at runtime by the main process and eventually used in this variable.
+ */
+var MAPBOX_ACCESS_TOKEN =
+  process.env.MAPBOX_ACCESS_TOKEN || buildConfig.mapboxAccessToken
 
 var isElectron = typeof process.type === 'string'
 // Is `true` when running from Node
@@ -22,8 +40,7 @@ module.exports = {
   // This is super confusing... due to hard-coded paths in @mapeo/settings
   // TODO: Clean all of this up in mapeo-server and @mapeo/settings
   DEFAULT_CONFIG_DIR: path.join(RESOURCES_DIR, 'presets'),
-  MAPBOX_ACCESS_TOKEN:
-    'pk.eyJ1IjoiZ21hY2xlbm5hbiIsImEiOiJSaWVtd2lRIn0.ASYMZE2HhwkAw4Vt7SavEg',
+  MAPBOX_ACCESS_TOKEN,
   GITHUB_URL: 'https://github.com/digidem/mapeo-desktop',
   GITHUB_URL_RAW:
     'https://raw.githubusercontent.com/digidem/mapeo-desktop/master'

package.json

@@ -10,9 +10,6 @@
     "email": "[email protected]"
   },
   "main": "index.js",
-  "engine": {
-    "node": "12.14.1"
-  },
   "scripts": {
     "clean": "rimraf \"dist/\"",
     "check": "npm-run-all -p check:prod check:prod-unused check:dev",
@@ -220,6 +217,8 @@
     "css-loader": "^3.2.0",
     "debug": "^4.1.1",
     "dependency-check": "^3.4.1",
+    "dotenv": "^16.4.5",
+    "dotenv-webpack": "^8.1.0",
     "electron": "^9.4.4",
     "electron-builder": "^22.14.10",
     "electron-devtools-installer": "^3.1.1",

src/build-config.js

@@ -2,5 +2,6 @@ const pkg = require('../package.json')
 
 module.exports = {
   variant: pkg.variant || 'main',
-  version: pkg.version
+  version: pkg.version,
+  mapboxAccessToken: pkg.mapboxAccessToken
 }

variants/icca/builder.config.js

@@ -1,6 +1,10 @@
 /* eslint-disable no-template-curly-in-string */
 const path = require('path')
 
+require('dotenv').config({
+  path: '../../.env'
+})
+
 module.exports = async function (config) {
   const productName = 'Mapeo for ICCAs'
   return {
@@ -15,7 +19,8 @@ module.exports = async function (config) {
     extraMetadata: {
       name: 'mapeo-icca',
       productName,
-      variant: 'icca'
+      variant: 'icca',
+      mapboxAccessToken: process.env.MAPBOX_ACCESS_TOKEN
     },
     publish: [
       {

webpack.common.js

@@ -1,4 +1,5 @@
 const path = require('path')
+const Dotenv = require('dotenv-webpack')
 
 module.exports = {
   entry: {
@@ -17,8 +18,6 @@ module.exports = {
     'mime-db',
     '../package.json'
   ],
-  // plugins: [new LiveReloadPlugin()],
-  // plugins: [new BundleAnalyzerPlugin()],
   output: {
     filename: '[name].bundle.js',
     chunkFilename: '[name].bundle.js',
@@ -51,5 +50,10 @@ module.exports = {
         loader: 'url-loader'
       }
     ]
-  }
+  },
+  plugins: [
+    new Dotenv({
+      systemvars: true
+    })
+  ]
 }