Vite CDN Uploader Plugin 🚀

The Vite CDN Uploader Plugin is a handy utility to automatically upload build files from Vite projects to various CDN providers. It currently supports Amazon S3 and Custom Providers.

Installation 💻

Install the plugin via npm or yarn:

npm install --save-dev vite-cdn-uploader

or

yarn add -D vite-cdn-uploader

Usage 🛠

First, import the plugin in your Vite configuration file:

import { cdnUploaderPlugin, providers } from "vite-cdn-uploader"

If your project does not have an .env file yet:

touch .env

Then, add the following content to your .env file:

AWS_ACCESS_KEY_ID=
AWS_SECRET_ACCESS_KEY=
AWS_DEFAULT_REGION=
AWS_BUCKET=

Then, add the plugin to the plugins array in your Vite configuration:

export default {
  plugins: [
    cdnUploaderPlugin({
      provider: new providers.AwsS3Provider(),
    }),
  ],
};

If you are using a custom build output path, such as in the Laravel Framework where the build output is in the public folder, you can follow the example below:

import path from "node:path"

export default {
  plugins: [
    cdnUploaderPlugin({
      provider: new providers.AwsS3Provider(),
      root: path.join(__dirname, 'public'),
    }),
  ],
};

Custom Provider 🎛

Create a custom provider by defining a class with a config method and an upload method:

class CustomProvider {
    config() {
        // Provider Configs
        return {};
    }
    async upload(file, filePath) {
        // Upload Process
    }
}

Vite Configuration 📝

Include your custom provider in your Vite configuration:

export default {
  plugins: [
    cdnUploaderPlugin({
      provider: new CustomProvider(),
    }),
  ],
};

License 📄

MIT