Allows you to upload files to AWS S3 or any other S3 compatible provider
npm install @froxz/vite-plugin-s3
S3 compatible file uploader Plugin for Vite
``bash`
$ 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:
`ts
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 |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.
`javascript`
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'
}
})
]
})
`javascript``
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
