Pushing Assets to the Browser - Your Own Theme Mod

Question

For some beginners including myself , still figuring out on how to make our own theme module. But this is how I found a solution myself. Please Note : I don't know if this effects the performance issue on ApostropheCMS , but I'll leave this as a solution for all of us. Let's Begin ! (See Answer Below) :

Answer 1

UPDATED ANSWER FOR ALL APOSTROPHE DEVELOPERS BEGINNERS

We followed tutorial from Pushing Assets to the Browser , but there is a missing plot somehow on why the assets is still cannot be found. Let's say we have created our own theme module based on that tutorial here. I put mine for example :

my-theme
  - public/
     - css/
         - bootstrap/
             - bootstrap.min.css
         - font-awesome/
             - font-awesome.min.css
     - js/
         - bootstrap/
             - bootstrap.min.js
   - index.js

Then , you must put this in app.js to load the module :

  modules: {
      // in app.js
      // other config above
      // include my own-theme-module
      'my-theme' : {},

Then , in our my-theme/index.js , these are my pushAsset method :

module.exports = {
    construct : function(self,options){
        // Every asset you have in public folder
        self.pushAsset('script', 'bootstrap/bootstrap.min');
        self.pushAsset('stylesheet', 'bootstrap/bootstrap.min');
        self.pushAsset('stylesheet', 'custom');
    }
}

IMPORTANT NOTE : You don't have to include a link or script tag in your nunjucks template because it will make your performance issue on ApostropheCMS where minification process may not take if you put a link/script tags in nunjucks template. Let the Apostrophe made it for you , your job is only pushAsset ;)

Now, what if you have TOO MANY ASSETS , and you're too lazy to write the code everytime you upload a new asset , I have a shortcut using lodash , simple ! . In my-theme/index.js :

var _ = require('lodash');
module.exports = {
    stylesheets : [
        {   // Make sure your directory after css folder is correct for specific search
            name : 'bootstrap/bootstrap.min'
        },
        {
            name : 'custom'
        },
        {
            name : 'font-awesome/css/font-awesome.min'
        }
    ],
    scripts : [
        {
            name : 'bootstrap/bootstrap.min'
        }
    ],
    construct : function(self,options){
        // Every asset you have in public folder
        _.each(options.stylesheets || [] , function(item){
            self.pushAsset('stylesheet', item.name);
        });
        _.each(options.scripts || [] , function(item){
            self.pushAsset('script' , item.name)
        });
    }
}

---

What if I want to do <img> tag with my custom asset PNG for example ? Do I need to pushAsset too ?

Answer : NO , you don't have to push asset because its only works on Stylesheets and Scripts . Once you load the module in app.js , the apostrophe automatically upload the asset to the url to /modules/module-name/path-to-asset/ . For Example : <img src="/modules/my-theme/img/icon.png"> Simple !

---

YOU'RE DONE !

ANOTHER NOTE : If you need to call your asset ONLY via CSS for background-image that using url() or font-face, you need to call by using your own module name : /modules/your-module-name/path-to-your-asset/ . EASY ! !

AND REMEMBER , DON'T PUT LINK and SCRIPT tag to link an asset that you pushed. Apostrophe HAS MADE IT FOR YOU FOR POWERFUL PERFORMANCE ! Again , your job is to push the Asset ONLY.

Answer 2

It is not necessary or advisable to write your own link and script tags because this prevents Apostrophe from minifying your assets in production, and from compiling your LESS files as a single unit with the benefits of shared mixins, etc.

However, the apostrophe-samples project now contains a working example of a "theme" module. I have moved the assets sometimes found at project level in apostrophe-assets to the theme module to demonstrate how this can correctly be done.

The key elements are:

• Don't forget to enable your theme module in app.js.
• In lib/modules/theme/index.js, push the assets you need in construct, or a method called from construct.
• Put those assets in the public/css and public/js subdirectories of your theme module.

See the apostrophe-samples project for the exact working code.

To learn about Apostrophe in production and how to minify assets there with no additional code, see Apostrophe in production.

Thanks for the nudge to bring this use case into the samples project.