@froxz/vite-plugin-s3

S3 compatible file uploader Plugin for Vite

🚀 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