Adding Bootstrap and a logo png to Apostrophe CMS

Question

I am simply trying to add a bootstrap.min.css file with its corresponding bootstrap.min.js file to an Apostrophe CMS project. I have no idea how to simply add a static resource. I have the following in my app.js

'apostrophe-assets': {
    stylesheets: [
        {
            name: 'bootstrap.min',
            minify: false
        },
        {
            name: 'site'
        }
    ],
    scripts: [
        {
            name: 'bootstrap.min',
            minify: false
        }
    ]
}

but alas, it does nothing. I have removed the .min versions as well and tried those, still nothing.

On that note, I need to be able to link to a .png that will be used in my navbar, but I have no idea where to store any static resources for the website.

Is there a place I can just drop static files that I don't want pushed as apostrophe-assets so they are rendered and consumed properly?

Answer 1

I am the lead developer of Apostrophe at P'unk Avenue.

For this to work, Apostrophe needs the files to be located at:

lib/modules/apostrophe-assets/public/css/bootstrap.min.css

And:

lib/modules/apostrophe-assets/public/js/bootstrap.min.js

Within your project (don't copy them into node_modules). You create your own lib/modules/apostrophe-assets folder within your own project, to parallel the one in the apostrophe npm module.

This is as documented here in the tutorials on pushing assets.

(If you have trouble pushing the CSS file, try renaming it with a .less extension and let me know you had to do that. It ought to be unnecessary though.)

Of course there is also nothing keeping you from overriding any of the blocks in outerLayoutBase.html in your own templates to insert script and link tags, but that shouldn't be necessary. If you follow the practice I'm recommending your files will minify with everything else in production.