Craft 3 Plugin Development: Add CSS and JS File to Frontend Templates How do I add js and css files to frontend page loads via a plugin? I did reference this issue:
Can a plugin add JS or CSS to the control panel?

but that is for Craft 2.

Reading the docs here:
https://docs.craftcms.com/v3/changes-in-craft-3.html#template-tags
and here
https://docs.craftcms.com/v3/extend/asset-bundles.html

show that Craft 3 is much different. I've looked through several Craft 3 plugins that do load scripts and styles on the frontend but each seems to handle this in very different ways. Is there a straight-forward standard that should be used if a plugin is loaded and needs to add resources to frontend page loads?

On the Asset Bundles doc page, it seems you can link directly to the asset in the plugin init but a comment further down the page suggests that you need to load the assets into the template:

"With that in place, all that is left is to register the asset bundle wherever its JS/CSS files are needed."

or I may be understanding this incorrectly.
Can I accomplish what I'm trying just by placing:

$this-&gt;sourcePath = '@ns/prefix/resources';
    $this-&gt;depends = [
        CpAsset::class,
    ];

    $this-&gt;js = [
        'custom-scripts.js',
    ];

    $this-&gt;css = [
        'custom-styles.css',
    ];


within the init function? Is this enough to get those files onto the frontend loads or do I need something else and something to tell them not to load onto backend pages?

Thank you for any help. Most of my plugin knowledge is based on reverse engineering plugins and in this area I'm still confused.
Did you place the init function within your asset bundle class as stated in the docs?

e.g.:

&lt;?php
namespace ns\prefix;

use craft\web\AssetBundle;
use craft\web\assets\cp\CpAsset;

class MyPluginAsset extends AssetBundle
{
    public function init()
    {
        // define the path that your publishable resources live
        $this-&gt;sourcePath = '@ns/prefix/resources';

        // define the dependencies
        $this-&gt;depends = [
            CpAsset::class,
        ];

        // define the relative path to CSS/JS files that should be registered with the page
        // when this asset bundle is registered
        $this-&gt;js = [
            'script.js',
        ];

        $this-&gt;css = [
            'styles.css',
        ];

        parent::init();
    }
}


If so, there is only one step left to register the asset in your template (e.g. yourplugin/src/templates/index.twig), you simply have to register it in your template with:

{% do view.registerAssetBundle("ns\\prefix\\FooBundle") %}

If it still does't work, you could generate a minimalistic plugin scaffolding with https://pluginfactory.io/ , its all set up for you and commented out.

Update:
To register the plugins assetbundle in your frontend layout, add 

&lt;body&gt;
  {{ beginBody() }
    .
    .
    .
    content
    .
    .
    .
    {% do view.registerAssetBundle("ns\\prefix\\FooBundle") %}
  {{ endBody() }}
&lt;/body&gt;


to your frontend templates, e.g. in your main layout.twig at the start and the end of the body tag.