@froxz/vite-plugin-s3
TypeScript icon, indicating that this package has built-in type declarations

1.5.2 • Public • Published


S3 compatible file uploader Plugin for Vite

NPM version NPM Downloads
GitHub stars

🚀 Features

  • 🦾 Type Strong: written in TypeScript
  • S3 Compatible: Support any S3 compatible provider (AWS, DO Spaces...)
  • Uploads any files: can upload any files or directory not just build folder

📦 Install

$ npm i @froxz/vite-plugin-s3

🦄 Usage

uploadOptions default to ACL: 'public-read' so you may need to override if you have other needs.

Add vite-plugin-s3 plugin to vite.config.js / vite.config.ts and configure it:

import { defineConfig } from 'vite'
import { ViteS3 } from '@froxz/vite-plugin-s3'

export default defineConfig({
  plugins: [
    ViteS3(!!process.env.UPLOAD_ENABLED, {
      basePath: '/build',
      clientConfig: {
        credentials: {
          accessKeyId: '',
          secretAccessKey: '',
        },
        region: 'eu-west-2'
      },
      uploadOptions: {
        Bucket: 'my-bucket'
      }
    })
  ]
})

👀 Options

enabled/disable: This setting can be used to disable or enable the uploading of assets (In addition Plugin is disabled in SSR and non build run)

Option Description Type Default
exclude A Pattern to match for excluded content string,RegExp,Function,Array null
include A Pattern to match for included content string,RegExp,Function,Array null
clientConfig The configuration interface of S3Client class constructor S3ClientConfig required
uploadOptions PutObjectRequest options except Body and `Key' PutObjectRequest required
basePath Namespace of uploaded files on S3 string null
directory Directory to upload string build.outDir

Advanced include and exclude rules

include and exclude in addition to a RegExp you can pass a function which will be called with the path as its first argument. Returning a truthy value will match the rule. You can also pass an Array of rules, all of which must pass for the file to be included or excluded.

import { defineConfig } from 'vite'
import { ViteS3 } from '@froxz/vite-plugin-s3'
import isGitIgnored from 'is-gitignored'
// Up to you how to handle this
var isPathOkToUpload = function(path) {
    return require('my-projects-publishing-rules').checkFile(path)
}
export default defineConfig({
    plugins: [
        new ViteS3(!!process.env.UPLOAD_ENABLED, {
            // Only upload css and js and only the paths that our rules database allows
            include: [
                /.*\.(css|js)/,
                function(path) { isPathOkToUpload(path) }
            ],
            // function to check if the path is gitignored
            exclude: isGitIgnored,
            clientConfig: {
                credentials: {
                    accessKeyId: process.env.AWS_ACCESS_KEY_ID,
                    secretAccessKey: process.env.AWS_SECRET_ACCESS_KEY,
                },
                region: 'eu-west-2'
            },
            uploadOptions: {
                Bucket: 'my-bucket'
            }
        })
    ]
})

💧 DigitalOcean Spaces Object Storage example

import { defineConfig } from 'vite'
import { ViteS3 } from '@froxz/vite-plugin-s3'
export default defineConfig({
    plugins: [
        new ViteS3(!!process.env.UPLOAD_ENABLED, {
            clientConfig: {
                credentials: {
                    accessKeyId: process.env.DO_ACCESS_KEY_ID,
                    secretAccessKey: process.env.DO_SECRET_ACCESS_KEY,
                },
                endpoint: 'https://fra1.digitaloceanspaces.com',
                region: 'fra1'
            },
            uploadOptions: {
                Bucket: 'my-bucket'
            }
        })
    ]
})

🙏 Thanks

Thanks to MikaAK for s3-plugin-webpack used as inspiration fro this plugin

📄 License

MIT License Sergkei Melingk

DigitalOcean Referral Badge

Package Sidebar

Install

npm i @froxz/vite-plugin-s3

Weekly Downloads

682

Version

1.5.2

License

MIT

Unpacked Size

174 kB

Total Files

8

Last publish

Collaborators

  • froxz