@froxz/vite-plugin-s3

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
sequentialUploads	If true, files will be uploaded sequentially.	boolean	false

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