@froxz/vite-plugin-s3
v1.5.2
Published
Allows you to upload files to AWS S3 or any other S3 compatible provider
Downloads
6,249
Readme
🚀 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 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'
}
})
]
})
👀 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](https://docs.aws.amazon.com/AWSJavaScriptSDK/v3/latest/clients/client-s3/interfaces/putobjectrequest.html) |
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