Using 3rd party js css in v3

[jackie-chan]

Hi there!

I'm really new to apostrophe so please bear with me!
I've seen multiple answers on pushing assets in v2 to get things like bootstrap or font-awesome in, but in v3, I'm not seeing how to easily add that into my pages? Could someone please provide some advice?

Thanks!

[boutell]

The simplest way is to use ui/src folders in any module, see: https://v3.docs.apostrophecms.org/guide/front-end-assets.html#placing-client-side-code For specifics on the correct way to import your custom styles and javascript.

…

On Wed, Mar 22, 2023 at 6:32 PM Chris Chan ***@***.***> wrote: Hi there! I'm really new to apostrophe so please bear with me! I've seen multiple answers on pushing assets in v2 to get things like bootstrap or font-awesome in, but in v3, I'm not seeing how to easily add that into my pages? Could someone please provide some advice? Thanks! — Reply to this email directly, view it on GitHub <#4105>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAH27P4LKF6VUNIN3PKZETW5N4ZRANCNFSM6AAAAAAWEN26RU> . You are receiving this because you are subscribed to this thread.Message ID: ***@***.***>

-- THOMAS BOUTELL | CHIEF TECHNOLOGY OFFICER APOSTROPHECMS | apostrophecms.com | he/him/his

[jackie-chan]

Thanks! But if I wanted to just link to a CDN rather than hosting the file myself (e.g. Google Analytics), where would I put those link tags?

[BoDonkey]

The answer depends on what the content type is and what pages need it. For a Google Analytics script, I would put it into an extraHead block. You can do that in the main views/layout.html file, or in specific page templates. If your package is available as an npm package, like Google Analytics, you could also elect to install it in your project and then import it through an index.js file within a module's ui/src folder. This is going to make that code generally available throughout the project. For stylesheets, you can import from a local npm package or from a URL using @import within the index.scss file within a module's ui/src folder. Hope this helps.

[jackie-chan]

awesome. For stylesheets, I wasn't sure if I could import the CDN hosted sheet within one module and have it readily available, but I guess that makes sense. For importing an installed npm package in the project within the index.js of a module, is there a quick example of that I could reference? Apologies for the newbie questions!

[BoDonkey]

It would be just like any other package.
Install the package using npm install <package name> in the root of your project (I assume you are not using Assembly)
Then, just put import <package name or specific export> from '<npm name>' Into the top of a index.js file within modules/<module name>/ui/src.
If you create a new index.js file, make sure it exports a default function. export default () => {}. You don't have to reference the module from within the exported function.
Does this make sense/help?

[jackie-chan]

This does! Thanks! The sample projects I've seen don't seem to have any sample imports so this is great! Thanks again

[boutell]

Interesting Bob, are you talking about the @analytics/google-analytics npm module? BTW that seems to be unofficial, as in not from Google, although it seems to be from a good source. The traditional paste-of-tags-from-google in an extraHead tag is an official google offering.

…

On Thu, Mar 23, 2023 at 8:24 AM Robert Means ***@***.***> wrote: The answer depends on what the content type is and what pages need it. For a Google Analytics script, I would put it into an extraHead block <https://v3.docs.apostrophecms.org/guide/layout-template.html>. You can do that in the main views/layout.html file, or in specific page templates. If your package is available as an npm package, like Google Analytics, you could also elect to install it in your project and then import it through an index.js file within a module's ui/src folder. This is going to make that code generally available throughout the project. For stylesheets, you can import from a local npm package or from a URL using @import within the index.scss file within a module's ui/src folder. Hope this helps. — Reply to this email directly, view it on GitHub <#4105 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAAH27NSDLHXHHFGN6MFXPTW5Q6JDANCNFSM6AAAAAAWEN26RU> . You are receiving this because you commented.Message ID: ***@***.*** com>

-- THOMAS BOUTELL | CHIEF TECHNOLOGY OFFICER APOSTROPHECMS | apostrophecms.com | he/him/his

[BoDonkey]

Yeah - It seemed like an interesting package. Seemed easier to configure than paste option. I guess I should have added a disclaimer about the package being non-official.