s3-loader

s3-loader

Load Webpack bundle dependencies from s3

This library allows you to pull s3 dependencies into your Webpack bundle from s3 for control over assets across different environments, or to create local "aliases" for files you would prefer not to store on your local machine.

Usage

I recommend this package be used in a switch of some sort to control assets coming from different buckets and different environments. Under no circumstance should AWS information be checked into a Git repository. A useful tool in this respect is dotenv.

File Configuration

First, we need a file to load. Create an arbitrary JSON file in the root of your project, index.json. Then, from index.js, also in the root:

import data from `index.json`;

By default, this loader will use only the name of the file as the key by which to load content from s3. All directory relativity will be stripped from the filename before the key is requested from the s3 bucket (eg.: "../" or "~/"). For additional path options, see Additional Options.

NOTE: It is important to understand that this file still must exist on your filesystem in order to bundle it. If you do not want to check this file into your repository, touch it, and add it to .gitignore. You can use resolvers to conditionally create these files for you.

Webpack Configuration

We now configure our Webpack! In webpack.config.js (or wherever you add your configuration):

{
    module: {
        loaders: [
            {
                test: /\.json$/,
                loaders: 'json!s3'
            }
        ]
    }
}

I'm also guessing that your intent is not only to load text, but to use the content from s3 in some capacity, which means that it will probably be used in tandem with another loader. The above loader configuration specifies that the s3 loader should load file content from s3 and then the json-loader package should load the content of the JSON into the bundle.

s3 Options

AWS keys and bucket names necessary to load data from s3 can be added to the Webpack configuration in two ways, either through s3Options at the root of your config:

{
    query: {
        accessKeyId: '',
        secretAccessKey: '',
        bucketName: ''
    }
}

Or as a loader query string:

{
    module: {
        loaders: [
            {
                test: /\.json$/,
                loaders: 'json!s3?' + JSON.stringify({
                    accessKeyId: '',
                    secretAccessKey: '',
                    bucketName: ''
                })
            }
        ]
    }
}

Additional Options

These are options that can be added to the "s3Loader" property (similarly to plugins) so that additional filename to key transforms can be performed.

key	description	default
filename	A function to call internal to the loader to build a key from a passed filename	undefined

Additional Query Options

These are options that can be added to the loader query.

key	description	default
root	The string name of the top level root searched in the s3 bucket	process.cwd()
depth	The number of additional "folders" to add to the s3 key from the filename	0
prefix	A string path to prefix on to the s3 key from the filename	undefined
overwrite	Whether or not to replace the file on the local filesystem with the s3 asset	false