lasso-js / lasso

Advanced JavaScript module bundler, asset pipeline and optimizer
581 stars 75 forks source link

Example custom bundle writer #90

Open tropperstyle opened 8 years ago

tropperstyle commented 8 years ago

The README mentions the ability to "Upload bundles to a resource server that backs a CDN instead of writing them to disk"

An example of implementing these hooks would help immensely. @patrick-steele-idem suggested opening a ticket on gitter.

patrick-steele-idem commented 8 years ago

Hey @tropperstyle, I'll go ahead and put some content here, but it needs to be cleaned up before it gets moved to the docs.


Step 1) Create a Lasso.js plugin that configures a Lasso.js to use a custom bundle/resource writer:

var myWriter = require('./my-writer');

module.exports = function(myLasso, pluginConfig) {
    myLasso.config.writer = myWriter;
    ...
};

Step 2) Implement your custom writer:

function uploadBundle(bundle, reader, callback) {
    var readableBundleStream = reader.readBundle();
    var bundleName = bundle.name;
    var contentType = bundle.contentType; // Either 'css' or 'js'
    ...
}

function uploadResource(path, reader, callback) {
    var readableResourceStream = reader.readResource();    
    ...
}

module.exports = {
    /**
     * This will be called for JS and CSS bundles
     */
    writeBundle: function(reader, lassoContext, callback) {
        var bundle = lassoContext.bundle;

        uploadBundle(
            bundle,
            reader,
            function(err, result) {
                if (err) {
                    return callback(null);
                }

                callback(null, {
                    url: result.url
                })
            })
        });
    },

    /**
     * This will be called for front-end assets such as images, fonts, etc.
     */
    writeResource: function(reader, lassoContext, callback) {
        var path = lassoContext.path;

        uploadResource(
            path,
            reader,
            function(err, result) {
                if (err) {
                    return callback(null);
                }

                callback(null, {
                    url: result.url
                })
            })
        });
    }
};

Step 3) Register the plugin when initializing Lasso.js:

require('lasso').configure({
    plugins: [
        {
            plugin: require('my-lasso-plugin'),
            enabled: true
        }
    ]
    ...
});

Hopefully that is enough to get you started but please ask if you have questions. Please let us know if you have questions or get stuck.

StarpTech commented 7 years ago

Perhaps this helps too https://gist.github.com/StarpTech/e77e495b0c21a64f811a9c90f004001a

WilliamBewzenko commented 6 years ago

Hi, @patrick-steele-idem.

I am trying to send to s3 to use the cloudfront, I would like to be performing the build in runtime with the lasso, as per comment.

My current structure is over containers using docker. I can not guarantee the same file name:

How to ensure that different processes/containers use the same script, for example: Page 1: index-8bc460.js Other container: Page 1: index-8bc460.js

Can any issue happen? What do you suggest?