olsgreen / webpack-s3-pusher

Pushes your packed assets to your S3 compatible buckets, no more, no less.

webpack-s3-pusher

A webpack plugin that pushes your packed assets to S3 compatible bucket, no more, no less.

For webpack < 4 support use version 1.x

Installation

npm install webpack-s3-pusher

Configuration

new S3PusherPlugin({
    key: 'your_key',
    secret: 'your_secret',

    // If you are using Amazon S3 then only set region.
    // However if you are using some other provider then set only endpoint.
    // Region and endpoint both should not be set together.

    region: 'us-west-2',
    // endpoint: 'https://sgp1.digitaloceanspaces.com,

    bucket: 'bucket_name',
    acl: 'public-read', // If you are not using a bucket with default public permissions
    cache: 'max-age=602430', // Set Cache-Control header
    prefix: 'assets', // Publish to a folder instead of root directory

    include: '/.*\.(css|js)/',
    exclude: '/.*.min.js/',
    remove: [
        'path/to/file1.js',
        'path/to/file2.js',
    ], // Remove files from the bucket before upload.
})

Laravel Mix Implementation

.env

S3_KEY=your_key
S3_SECRET=your_secret
S3_BUCKET=your_bucket

# If you are using Amazon S3 then only set region.
# However if you are using some other provider then only set endpoint.
# Region and endpoint both should not be set together.

S3_REGION=your_region
# S3_ENDPOINT=your_endpoint

webpack.mix.js

const mix = require('laravel-mix');
const S3PusherPlugin = require('webpack-s3-pusher');

if (mix.inProduction()) {
    mix.webpackConfig({
        plugins: [
            new S3PusherPlugin({
                key: process.env.S3_KEY,
                secret: process.env.S3_SECRET,
                bucket: process.env.S3_BUCKET,
                region: process.env.S3_REGION,
                // endpoint: process.env.S3_ENDPOINT,
                prefix: 'assets',
                acl: 'public-read',
                cache: 'max-age=602430',
            })
        ]
    });
}

mix.js('resources/js/app.js', 'public/js')
    .postCss('resources/css/app.css', 'public/css');

Push assets to bucket

npm run production

Contributing

Pull requests are welcome. For major changes, please open an issue first to discuss what you would like to change.

License

MIT

webpack-s3-pusher's Issues

It's only uploading the main css and js

I have a quite long script which creates few css and js that I use differently depending on the page. The plugin works fine but it's not uploading the other css and js.

mix.js('resources/js/app.js', 'public/js')
.postCss('resources/css/main.css', 'public/css', require('tailwindcss'))
.scripts([
'resources/js/viotopo/choices/choices.js',
'resources/js/viotopo/toastify/toastify.js',
'resources/js/viotopo/sweet-alert/sweet-alert.js',
'resources/js/common.js',
'resources/js/lang.js',
], 'public/js/common.js')
.styles([
'resources/css/viotopo/choices/choices.css',
'resources/css/viotopo/toastify/toastify.css',
],'public/css/common.css')
.scripts([
'resources/js/viotopo/filepond/filepond.js',
'resources/js/viotopo/filepond/filepond-plugin-image-preview.js',
'resources/js/viotopo/filepond/filepond-plugin-file-validate-type.js',
'resources/js/viotopo/filepond/filepond-plugin-file-validate-size.js',
'resources/js/viotopo/filepond/filepond-plugin-image-validate-size.js',
'resources/js/viotopo/filepond/filepond-plugin-image-crop.js',
'resources/js/viotopo/upload.js',
],'public/js/upload.js')
.styles([
'resources/css/viotopo/filepond/filepond.css',
'resources/css/viotopo/filepond/filepond-plugin-image-preview.css',
],'public/css/upload.css')
.scripts([
'resources/js/viotopo/maps/leaflet.js',
'resources/js/viotopo/maps/geosearch.umd.js',
'resources/js/viotopo/glide/glide.js',
'resources/js/viotopo/nouislider/nouislider.js',
'resources/js/viotopo/nouislider/wNumb.js',
'resources/js/helper.js',
],'public/js/helper.js');

It's uploading only the app.js and main.css, not the other 5 files.

any ideas?

Error: Could not upload style.css to bucket-name: NoSuchBucket - null

new S3PusherPlugin({
            key: '***********',
            secret: '***********',
            
            endpoint: 'sfo2.digitaloceanspaces.com',
            bucket: 'bucket-name',
            acl: 'public-read',
            cache: 'max-age=602430'
        })

Unable to access uploaded assets

I've configured as per the documentation and have successfully had assets compile and upload to the right location on AWS, my issue is that the assets are not publically accessible and there appears to be no way to configure them to be public as default.

Am I missing something in my config?
Do I need another package to make things public?

Lastly, is this plugin still actively developed. I came across it earlier today and the page I found says it was updated 9 hours ago (at the time of writing) yet github says the same release was created in October 2020

files generated by mix.styles(), mix.scripts() , mix.combine() methods are not uploaded

The plugin works fine for files generated by mix.js() and mix.css() methods.
But not uploading files generated by mix.styles(), mix.scripts() , mix.combine() methods.