How to combine Codrops tutorial codes into a SilverStripe project?

Question

I love all the tutorials and code examples on the Codrops website. Codrops Website I would like to include some of them in my SilverStripe projects. SilverStripe CMS

I've learnt how to install them to my site theme folder using NPM. The question is where is the best place to install all the dependencies like the node_modules folder. I'm breaking up the HTML code from the index.html file inside the src folder that comes with the NPM install from the tutorial and adding them to the CSS and JS folders for a SilverStripe project.

I am specifically trying to install this module: Letters Animation by Codrops

I'm trying to work this out for myself whilst still asking if anyone has direct advice for best practice for adding these modules to SilverStripe.

Answer 1

It sounds like you don't have any prior experience developing with Silverstripe CMS. I recommend you check out the getting started docs and the lessons which should walk you through all you need to know.

You aren't likely to get any specific advise for using Codrops tutorials in Silverstripe CMS, but it sounds like you have a bunch of static HTML code which you want to convert to use dynamic data from Silverstripe? If that's the case, lesson 2 covers that use case.

The question is where is the best place to install all the dependencies like the node_modules folder

You don't want to expose the actual dependencies. You'll want to build out some distribution files and then expose those. It's pretty standard to put them in app/client/dist, with the source files in app/client/src - or you can put them somewhere appropriate in your theme (e.g. themes/my-theme/client/). You can then expose the dist files by adding this to your composer.json file:

"extra": {
    "expose": [
        "app/client/dist"
    ]
}

and then running composer vendor-expose.

You can include those dist files in your templates using <% require javascript("app/client/dist/some_file.js") %> or <% require themedJavascript("client/dist/some_file") %>

You can also include those dist files in your response via PHP from your page controller:

Requirements::javascript('app/client/dist/some_file.js');
// or 
Requirements::themedJavascript('client/dist/some_file');

Disclaimer: The code I've written above is from memory. If it doesn't work immediately, refer back to the documentation I've linked to.