S3 compatible file uploader Plugin for Vite
- 🦾 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
$ npm i @froxz/vite-plugin-s3
uploadOptions
default toACL: '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'
}
})
]
})
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 |
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 to MikaAK for s3-plugin-webpack used as inspiration fro this plugin
MIT License Sergkei Melingk