Magento 2: get masonry working / source file path

Question

• Magento2 is installed via composer
• I've written a custom theme, based on luma
• masonry is installed via bower - the bower_components folder is placed in: app/design/frontend/VENDOR/MY_THEME/web

I've defined a new requireJS module for masonry in a requirejs-config.js

Question 1: Where should that file be? In .../MY_THEME/Magento_Theme or directly in my theme? Question 2: What is the correct path to the masonry source file in the bower_components? Because all my custom js-files end up somewhere below pub/static/frontend...

var config = {
    paths:{
        // creates a module named 'masonry'
        // points to the masonry source file
        "masonry":"???/web/bower_components/masonry/masonry"
    },

    shim:{
        // make sure that jquery is completely loaded when masonry starts loading
        'masonry':{
            'deps':['jquery']
        }
    }
};

I've read the answers of this question - but can't get it work without the correct source path.

Answer 1

Question1

Directly in your theme. Your requirejs-config.js will be:

var config = {
    map:{
        "masonry":"bower_components/masonry/masonry"
    },
    shim:{
       'masonry':{
            'deps':['jquery']
        }
    }
};

Question2

The correct path could be app/design/frontend/VENDOR/THEME/web/js/bower_components if you use your dependency directly. During the static asset deployment Magento will put you resources in pub/static/frontend/VENDOR/THEME/LOCALE/js/bower_components.