dev: move configuration to a `.env` file (#3430)

Putting the dev config in a git-ignored files improves DX and lower the
risk of a private dev key being committed by mistake.

.gitignore

@@ -14,6 +14,7 @@ node_modules
 yarn-error.log
 
 env.sh
+*.local
 
 dist/
 lib/

private/dev/.env

@@ -0,0 +1,24 @@
+VITE_UPLOADER=tus
+
+#### To customize this, create a .env.local file that overrides those values
+
+# VITE_UPLOADER=tus
+# VITE_UPLOADER=s3
+# VITE_UPLOADER=s3-multipart
+# xhr will use protocol 'multipart' in companion, if used with a remote service, e.g. google drive.
+# If local upload will use browser XHR
+# VITE_UPLOADER=xhr
+# VITE_UPLOADER=transloadit
+# VITE_UPLOADER=transloadit-s3
+# VITE_UPLOADER=transloadit-xhr
+
+### DEV CONFIG: Endpoint URLs
+
+VITE_COMPANION_URL=http://localhost:3020
+VITE_TUS_ENDPOINT=https://tusd.tusdemo.net/files/
+VITE_XHR_ENDPOINT=https://xhr-server.herokuapp.com/upload
+
+### DEV CONFIG: Transloadit keys
+VITE_TRANSLOADIT_KEY=...
+VITE_TRANSLOADIT_TEMPLATE=...
+VITE_TRANSLOADIT_SERVICE_URL=https://api2.transloadit.com

private/dev/Dashboard.js

@@ -25,29 +25,19 @@ import DropTarget from '@uppy/drop-target'
 import Audio from '@uppy/audio'
 /* eslint-enable import/no-extraneous-dependencies */
 
-// DEV CONFIG: pick an uploader
+// DEV CONFIG: create a .env.local file to customize those values.
+const {
+  VITE_UPLOADER : UPLOADER,
+  VITE_COMPANION_URL : COMPANION_URL,
+  VITE_TUS_ENDPOINT : TUS_ENDPOINT,
+  VITE_XHR_ENDPOINT : XHR_ENDPOINT,
+  VITE_TRANSLOADIT_KEY : TRANSLOADIT_KEY,
+  VITE_TRANSLOADIT_TEMPLATE : TRANSLOADIT_TEMPLATE,
+  VITE_TRANSLOADIT_SERVICE_URL : TRANSLOADIT_SERVICE_URL,
+} = import.meta.env
 
-const UPLOADER = 'tus'
-// const UPLOADER = 's3'
-// const UPLOADER = 's3-multipart'
-// xhr will use protocol 'multipart' in companion, if used with a remote service, e.g. google drive.
-// If local upload will use browser XHR
-// const UPLOADER = 'xhr'
-// const UPLOADER = 'transloadit'
-// const UPLOADER = 'transloadit-s3'
-// const UPLOADER = 'transloadit-xhr'
-
-// DEV CONFIG: Endpoint URLs
-
-const COMPANION_URL = 'http://localhost:3020'
-const TUS_ENDPOINT = 'https://tusd.tusdemo.net/files/'
-const XHR_ENDPOINT = 'https://xhr-server.herokuapp.com/upload'
-
-// DEV CONFIG: Transloadit keys
-
-const TRANSLOADIT_KEY = '...'
-const TRANSLOADIT_TEMPLATE = '...'
-const TRANSLOADIT_SERVICE_URL = 'https://api2.transloadit.com'
+import.meta.env.VITE_TRANSLOADIT_KEY = '***' // to avoid leaking secrets in screenshots.
+console.log(import.meta.env)
 
 // DEV CONFIG: enable or disable Golden Retriever
 

private/dev/DragDrop.js

@@ -6,6 +6,14 @@ import DragDrop from '@uppy/drag-drop'
 import ProgressBar from '@uppy/progress-bar'
 /* eslint-enable import/no-extraneous-dependencies */
 
+// DEV CONFIG: create a .env.local file to customize those values.
+const {
+  VITE_TUS_ENDPOINT : TUS_ENDPOINT,
+} = import.meta.env
+
+import.meta.env.VITE_TRANSLOADIT_KEY = '***' // to avoid leaking secrets in screenshots.
+console.log(import.meta.env)
+
 export default () => {
   const uppyDragDrop = new Uppy({
     debug: true,
@@ -15,7 +23,7 @@ export default () => {
       target: '#uppyDragDrop',
     })
     .use(ProgressBar, { target: '#uppyDragDrop-progress', hideAfterFinish: false })
-    .use(Tus, { endpoint: 'https://tusd.tusdemo.net/files/' })
+    .use(Tus, { endpoint: TUS_ENDPOINT })
 
   window.uppy = uppyDragDrop