example: migrate digitalocean-spaces to ESM (#4015)

transloadit · Aug 22, 2022 · bef7b58 · bef7b58
1 parent 183187d
commit bef7b58
Show file tree

Hide file tree

Showing 9 changed files with 76 additions and 92 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -195,6 +195,7 @@ module.exports = {
         'examples/aws-presigned-url/*.js',
         'examples/bundled/*.js',
         'examples/custom-provider/client/*.js',
+        'examples/digitalocean-spaces/*.js',
         'examples/multiple-instances/*.js',
         'examples/node-xhr/*.js',
         'examples/php-xhr/*.js',

diff --git a/examples/digitalocean-spaces/.gitignore b/examples/digitalocean-spaces/.gitignore
@@ -0,0 +1 @@
+tmp/
diff --git a/examples/digitalocean-spaces/README.md b/examples/digitalocean-spaces/README.md
@@ -0,0 +1,29 @@
+# Uploading to DigitalOcean Spaces
+
+This example uses Uppy to upload files to a DigitolOcean Space. DigitalOcean Spaces has an identical API to S3, so we can use the [AwsS3](https://uppy.io/docs/aws-s3) plugin. We use @uppy/companion with a [custom `endpoint` configuration](./server.cjs#L39) that points to DigitalOcean.
+
+## Running it
+
+To run this example, make sure you've correctly installed the **repository root**:
+
+```bash
+corepack yarn install
+corepack yarn build
+```
+
+That will also install the dependencies for this example.
+
+First, set up the `COMPANION_AWS_KEY`, `COMPANION_AWS_SECRET`,
+`COMPANION_AWS_REGION`, and `COMPANION_AWS_BUCKET` environment variables for
+`@uppy/companion` in a `.env` file. You may find useful to first copy the
+`.env.example` file:
+
+```sh
+[ -f .env ] || cp .env.example .env
+```
+
+Then you can start the dev server:
+
+```bash
+corepack yarn workspace @uppy-example/digitalocean-spaces start
+```
diff --git a/examples/digitalocean-spaces/index.html b/examples/digitalocean-spaces/index.html
@@ -4,14 +4,14 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title>Uppy DigitalOcean Example</title>
-    <link href="uppy.min.css" rel="stylesheet">
   </head>
   <body>
     <h1>DigitalOcean Spaces</h1>
     <p>
       Using the <a href="https://uppy.io/docs/aws-s3">AwsS3</a> plugin to upload to DigitalOcean Spaces ✌️
     </p>
 
-    <script src="main.js"></script>
+    <noscript>This app requires JavaScript.</noscript>
+    <script src="./main.js" type="module"></script>
   </body>
 </html>
diff --git a/examples/digitalocean-spaces/main.js b/examples/digitalocean-spaces/main.js
@@ -1,6 +1,9 @@
-const Uppy = require('@uppy/core')
-const Dashboard = require('@uppy/dashboard')
-const AwsS3 = require('@uppy/aws-s3')
+import Uppy from '@uppy/core'
+import Dashboard from '@uppy/dashboard'
+import AwsS3 from '@uppy/aws-s3'
+
+import '@uppy/core/dist/style.css'
+import '@uppy/dashboard/dist/style.css'
 
 const uppy = new Uppy({
   debug: true,

diff --git a/examples/digitalocean-spaces/package.json b/examples/digitalocean-spaces/package.json
@@ -1,19 +1,21 @@
 {
   "name": "@uppy-example/digitalocean-spaces",
   "version": "0.0.0",
+  "type": "module",
   "dependencies": {
-    "@babel/core": "^7.2.2",
     "@uppy/aws-s3": "workspace:*",
     "@uppy/core": "workspace:*",
     "@uppy/dashboard": "workspace:*",
-    "babelify": "^10.0.0",
     "body-parser": "^1.18.3",
-    "budo": "^11.6.1",
-    "cors": "^2.8.5",
-    "router": "^1.3.3"
+    "cors": "^2.8.5"
+  },
+  "devDependencies": {
+    "dotenv": "^16.0.1",
+    "express": "^4.16.2",
+    "vite": "^3.0.0"
   },
   "private": true,
   "scripts": {
-    "start": "node ./server.js"
+    "start": "node ./server.cjs"
   }
 }
diff --git a/examples/digitalocean-spaces/readme.md b/examples/digitalocean-spaces/readme.md
diff --git a/examples/digitalocean-spaces/server.js → examples/digitalocean-spaces/server.cjs b/examples/digitalocean-spaces/server.js → examples/digitalocean-spaces/server.cjs
@@ -1,9 +1,10 @@
 const fs = require('node:fs')
 const path = require('node:path')
-const budo = require('budo')
-const router = require('router')
 const crypto = require('node:crypto')
 
+require('dotenv').config({ path: path.join(__dirname, '..', '..', '.env') })
+
+const app = require('express')()
 const companion = require('../../packages/@uppy/companion')
 
 /**
@@ -22,44 +23,38 @@ if (!process.env.COMPANION_AWS_BUCKET) throw new Error('Missing Space name, plea
 
 // Prepare the server.
 const PORT = process.env.PORT || 3452
+const host = `localhost:${PORT}`
+
+const DATA_DIR = path.join(__dirname, 'tmp')
 
-const app = router()
+fs.mkdirSync(DATA_DIR, { recursive: true })
 
 // Set up the /params endpoint that will create signed URLs for us.
 app.use(require('cors')())
 app.use(require('body-parser').json())
 
 const { app: companionApp } = companion.app({
-  providerOptions: {
-    s3: {
-      // This is the crucial part; set an endpoint template for the service you want to use.
-      endpoint: 'https://{region}.digitaloceanspaces.com',
-      getKey: (req, filename) => `${crypto.randomUUID()}-${filename}`,
-
-      key: process.env.COMPANION_AWS_KEY,
-      secret: process.env.COMPANION_AWS_SECRET,
-      bucket: process.env.COMPANION_AWS_BUCKET,
-      region: process.env.COMPANION_AWS_REGION,
-    },
+  s3: {
+    // This is the crucial part; set an endpoint template for the service you want to use.
+    endpoint: 'https://{region}.digitaloceanspaces.com',
+    getKey: (req, filename) => `${crypto.randomUUID()}-${filename}`,
+
+    key: process.env.COMPANION_AWS_KEY,
+    secret: process.env.COMPANION_AWS_SECRET,
+    bucket: process.env.COMPANION_AWS_BUCKET,
+    region: process.env.COMPANION_AWS_REGION,
   },
-  server: { serverUrl: `localhost:${PORT}` },
+  server: { host },
+  filePath: DATA_DIR,
+  secret: 'blah blah',
+  debug: true,
 })
 
 app.use('/companion', companionApp)
 
-// Serve the built CSS file.
-app.get('/uppy.min.css', (req, res) => {
-  res.setHeader('content-type', 'text/css')
-  fs.createReadStream(path.join('../../packages/uppy/dist/uppy.min.css')).pipe(res)
-})
-
-// Start the development server, budo.
-budo(path.join(__dirname, 'main.js'), {
-  live: true,
-  stream: process.stdout,
-  port: PORT,
-  middleware: app,
-  browserify: {
-    transform: ['babelify'],
-  },
+require('vite').createServer({ clearScreen: false, server:{ middlewareMode: true } }).then(({ middlewares }) => {
+  app.use(middlewares)
+  app.listen(PORT, () => {
+    console.log(`Listening on http://localhost:${PORT}/...`)
+  })
 })
diff --git a/yarn.lock b/yarn.lock
@@ -596,7 +596,7 @@ __metadata:
   languageName: node
   linkType: hard
 
-"@babel/core@npm:>=7.2.2, @babel/core@npm:^7.0.0, @babel/core@npm:^7.1.0, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.10, @babel/core@npm:^7.12.3, @babel/core@npm:^7.14.3, @babel/core@npm:^7.14.6, @babel/core@npm:^7.17.2, @babel/core@npm:^7.17.5, @babel/core@npm:^7.17.9, @babel/core@npm:^7.2.2, @babel/core@npm:^7.4.4, @babel/core@npm:^7.4.5":
+"@babel/core@npm:>=7.2.2, @babel/core@npm:^7.0.0, @babel/core@npm:^7.1.0, @babel/core@npm:^7.11.6, @babel/core@npm:^7.12.10, @babel/core@npm:^7.12.3, @babel/core@npm:^7.14.3, @babel/core@npm:^7.14.6, @babel/core@npm:^7.17.2, @babel/core@npm:^7.17.5, @babel/core@npm:^7.17.9, @babel/core@npm:^7.4.4, @babel/core@npm:^7.4.5":
   version: 7.18.10
   resolution: "@babel/core@npm:7.18.10"
   dependencies:
@@ -8121,15 +8121,14 @@ __metadata:
   version: 0.0.0-use.local
   resolution: "@uppy-example/digitalocean-spaces@workspace:examples/digitalocean-spaces"
   dependencies:
-    "@babel/core": ^7.2.2
     "@uppy/aws-s3": "workspace:*"
     "@uppy/core": "workspace:*"
     "@uppy/dashboard": "workspace:*"
-    babelify: ^10.0.0
     body-parser: ^1.18.3
-    budo: ^11.6.1
     cors: ^2.8.5
-    router: ^1.3.3
+    dotenv: ^16.0.1
+    express: ^4.16.2
+    vite: ^3.0.0
   languageName: unknown
   linkType: soft
 
@@ -10528,13 +10527,6 @@ __metadata:
   languageName: node
   linkType: hard
 
-"array-flatten@npm:3.0.0":
-  version: 3.0.0
-  resolution: "array-flatten@npm:3.0.0"
-  checksum: ad00c51ca70cf837501fb6da823ba39bc6a86b43d0b76d840daa02fe0f8e68e94ad5bc2d0d038053118b879aaca8ea6168c32c7387a2fa5b118ad28db4f1f863
-  languageName: node
-  linkType: hard
-
 "array-flatten@npm:^2.1.2":
   version: 2.1.2
   resolution: "array-flatten@npm:2.1.2"
@@ -31800,21 +31792,6 @@ hexo-filter-github-emojis@arturi/hexo-filter-github-emojis:
   languageName: node
   linkType: hard
 
-"router@npm:^1.3.3":
-  version: 1.3.7
-  resolution: "router@npm:1.3.7"
-  dependencies:
-    array-flatten: 3.0.0
-    debug: 2.6.9
-    methods: ~1.1.2
-    parseurl: ~1.3.3
-    path-to-regexp: 0.1.7
-    setprototypeof: 1.2.0
-    utils-merge: 1.0.1
-  checksum: ae595e4d1e875f26934a012d39bfdc232135e1ee956f68b1b808fab166ac48d4a5025b30cb793bcf4ad8978884c1a7a65acf17a9cdd84e0340862bf0c12a6a47
-  languageName: node
-  linkType: hard
-
 "rsvp@npm:^4.8.4":
   version: 4.8.5
   resolution: "rsvp@npm:4.8.5"