Answers.Body: <p>Did you place the init function within your asset bundle class as stated in the docs?</p>
  
  <p>e.g.:</p>
  
  <pre><code>&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();
      }
  }
  </code></pre>
  
  <p>If so, there is only one step left to register the asset in your template (e.g. <code>yourplugin/src/templates/index.twig</code>), you simply have to register it in your template with:</p>
  
  <p><code>{% do view.registerAssetBundle("ns\\prefix\\FooBundle") %}</code></p>
  
  <p>If it still does't work, you could generate a minimalistic plugin scaffolding with <a href="https://pluginfactory.io/" rel="nofollow noreferrer">https://pluginfactory.io/</a> , its all set up for you and commented out.</p>
  
  <p><strong>Update</strong>:
  To register the plugins assetbundle in your frontend layout, add </p>
  
  <pre><code>&lt;body&gt;
    {{ beginBody() }
      .
      .
      .
      content
      .
      .
      .
      {% do view.registerAssetBundle("ns\\prefix\\FooBundle") %}
    {{ endBody() }}
  &lt;/body&gt;
  </code></pre>
  
  <p>to your frontend templates, e.g. in your main <code>layout.twig</code> at the start and the end of the body tag. </p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-12-06T12:47:17.840Z
Answers.Text: Thanks! I did read the docs but found it a little difficult to piece together exactly where some of this stuff went. I'll have to read more of the plugin factory comments.
Answers.UserDisplayName: Chattervast
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-12-07T13:23:40.177Z
Answers.Text: I wasn't able to get my scripts onto the page so I created a new scaffold via Plugin Factory. It worked but only loads the scripts onto the plugin's settings page in the dashboard. Is there something I need to change to get it to the frontend pages? It registers the asset bundles in templates/index.twig but most of the code references cp layouts.
Answers.UserDisplayName: Chattervast
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-12-07T19:09:37.423Z
Answers.Text: So you do want to make use of the plugins css and js assets not only in the cp but also on the regular frontend? So that your plugin modifies what you would usualy sort out with css and js linked in your frontend layout.twig?
Answers.UserDisplayName: HendrikEng
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-12-07T19:13:47.520Z
Answers.Text: Yes correct. The plugin doesn't need the css/js files for the backend. It needs to add the css and js files to the frontend to all pages.
Answers.UserDisplayName: Chattervast
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-12-07T19:27:05.807Z
Answers.Text: updated the answer
Answers.UserDisplayName: HendrikEng
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-12-07T19:43:28.977Z
Answers.Text: When you say layout.twig are you referring to a layout.twig within the plugin folders or the main templates folder in craft?
Answers.UserDisplayName: Chattervast
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-12-07T20:09:57.407Z
Answers.Text: the main templates folder you would use for frontend development https://docs.craftcms.com/v3/dev/#template-paths
Answers.UserDisplayName: HendrikEng
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-12-07T20:17:48.000Z
Answers.Text: So if I wanted to go the route of not requiring the user to add it to their templates and the plugin just add it to the frontend, Im guessing I would need to read more on template roots and registering with the frontend? https://docs.craftcms.com/v3/extend/template-roots.html#plugin-control-panel-templates
Answers.UserDisplayName: Chattervast
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-12-06T10:48:06.283Z
Answers.LastActivityDate: 2018-12-07T19:32:58.020Z
Answers.LastEditDate: 2018-12-07T19:32:58.020Z
Answers.UserDisplayName: HendrikEng
Answers.Body: <p>If it helps, I couldn't get it to show either - my solution was that I wasn't calling {% do... inside the body tag, so it was being ignored!</p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-02-12T12:43:53.083Z
Answers.Text: Thank you! I actually figured it out without {% do calls by checking if CP request in init() and showing appropriate code like so: $request = Craft::$app->getRequest(); if ($request->getIsCpRequest()) {Craft::$app>view>registerAssetBundle(PluginNameCpAsset::class);} else {Craft::$app->view->registerAssetBundle(PluginNameFrontendAsset::class);}
Answers.UserDisplayName: Chattervast
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2020-02-11T02:09:51.093Z
Answers.LastActivityDate: 2020-02-11T02:09:51.093Z
Answers.UserDisplayName: Jamie M
Answers.Body: <p>I found Yii's documentation on Assets to be helpful in understanding how to get asset dependencies. 
  <strong>Assets</strong>
  <a href="https://www.yiiframework.com/doc/guide/2.0/en/structure-assets" rel="nofollow noreferrer">https://www.yiiframework.com/doc/guide/2.0/en/structure-assets</a>
  <strong>Asset Bundle Class documentation</strong>
  <a href="https://www.yiiframework.com/doc/api/2.0/yii-web-assetbundle" rel="nofollow noreferrer">https://www.yiiframework.com/doc/api/2.0/yii-web-assetbundle</a></p>
  
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-12-07T21:49:56.963Z
Answers.Text: So from the first link, the top example, would that be what Plugin Factory generates for PluginNameAsset in the assetbundles folder? I looked through the craft3 class reference docs but mostly found craft\web\assets listed for cp side . is there a specific front end reference that Im missing? Or can I just use that first link template and reference it from my plugin main file init? Sorry Im fairly new to this, mostly just twig filters so far.
Answers.UserDisplayName: Chattervast
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-12-07T21:57:30.740Z
Answers.Text: This should be all you need 
  {% do view.registerAssetBundle("ns\\prefix\\FooBundle") %}
Answers.UserDisplayName: bshelling
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-12-07T22:00:21.107Z
Answers.Text: For example if your plugin directory is structured like so:
  plugin-name/src/FooBundle.php
Answers.UserDisplayName: bshelling
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-12-08T15:39:44.267Z
Answers.Text: Still struggling to get asset bundles to frontend pages. I have the bundles setup and can get stuff go to the setting page of the plugin with a new Plugin Factory generation. Shouldn't I be able to just create a new file in the templates folder of the plugin then call Craft::$app->getView()->renderTemplate('pluginName/templateFile'); and it output the asset bundle that is registered in that file with {% do view.... - obviously doesn't work that way cause page errors with "unable to find template"...
Answers.UserDisplayName: Chattervast
Answers.ContentLicense: CC BY-SA 4.0
Answers.CreationDate: 2018-12-07T21:32:34.700Z
Answers.LastActivityDate: 2018-12-07T21:32:34.700Z
Answers.UserDisplayName: bshelling
Body: <p>How do I add js and css files to frontend page loads via a plugin? I did reference this issue:
  <a href="https://craftcms.stackexchange.com/questions/267/can-a-plugin-add-js-or-css-to-the-control-panel">Can a plugin add JS or CSS to the control panel?</a></p>
  
  <p>but that is for Craft 2.</p>
  
  <p>Reading the docs here:
  <a href="https://docs.craftcms.com/v3/changes-in-craft-3.html#template-tags" rel="nofollow noreferrer">https://docs.craftcms.com/v3/changes-in-craft-3.html#template-tags</a>
  and here
  <a href="https://docs.craftcms.com/v3/extend/asset-bundles.html" rel="nofollow noreferrer">https://docs.craftcms.com/v3/extend/asset-bundles.html</a></p>
  
  <p>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?</p>
  
  <p>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:</p>
  
  <p>"With that in place, all that is left is to register the asset bundle wherever its JS/CSS files are needed."</p>
  
  <p>or I may be understanding this incorrectly.
  Can I accomplish what I'm trying just by placing:</p>
  
  <pre><code>$this-&gt;sourcePath = '@ns/prefix/resources';
      $this-&gt;depends = [
          CpAsset::class,
      ];
  
      $this-&gt;js = [
          'custom-scripts.js',
      ];
  
      $this-&gt;css = [
          'custom-styles.css',
      ];
  </code></pre>
  
  <p>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?</p>
  
  <p>Thank you for any help. Most of my plugin knowledge is based on reverse engineering plugins and in this area I'm still confused.</p>
  
Tags: <plugin-development><assets><plugins>
Title: Craft 3 Plugin Development: Add CSS and JS File to Frontend Templates
ThreadText: # Craft 3 Plugin Development: Add CSS and JS File to Frontend Templates
  
  (Asked by: username_0 on 2018-12-05)
  
  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?](https://craftcms.stackexchange.com/questions/267/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->sourcePath = '@ns/prefix/resources';
      $this->depends = [
          CpAsset::class,
      ];
  
      $this->js = [
          'custom-scripts.js',
      ];
  
      $this->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.
  
  **Tags:** plugin-development, assets, plugins
  
  
  ---
  
  ## 3 answers
  
  ### Answer by username_1 on 2018-12-06. Score: 2 | Accepted answer
  
  Did you place the init function within your asset bundle class as stated in the docs?
  
  e.g.:
  
  ```
  <?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->sourcePath = '@ns/prefix/resources';
  
          // define the dependencies
          $this->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->js = [
              'script.js',
          ];
  
          $this->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
  
  ```
  <body>
    {{ beginBody() }
      .
      .
      .
      content
      .
      .
      .
      {% do view.registerAssetBundle("ns\\prefix\\FooBundle") %}
    {{ endBody() }}
  </body>
  
  ```
  
  to your frontend templates, e.g. in your main `layout.twig` at the start and the end of the body tag.
  
  > **Comments:**
  > **username_0**: Thanks! I did read the docs but found it a little difficult to piece together exactly where some of this stuff went. I'll have to read more of the plugin factory comments.  
  > **username_0**: I wasn't able to get my scripts onto the page so I created a new scaffold via Plugin Factory. It worked but only loads the scripts onto the plugin's settings page in the dashboard. Is there something I need to change to get it to the frontend pages? It registers the asset bundles in templates/index.twig but most of the code references cp layouts.  
  > **username_1**: So you do want to make use of the plugins css and js assets not only in the cp but also on the regular frontend? So that your plugin modifies what you would usualy sort out with css and js linked in your frontend layout.twig?  
  > **username_0**: Yes correct. The plugin doesn't need the css/js files for the backend. It needs to add the css and js files to the frontend to all pages.  
  > **username_1**: updated the answer  
  > **username_0**: When you say layout.twig are you referring to a layout.twig within the plugin folders or the main templates folder in craft?  
  > **username_1**: the main templates folder you would use for frontend development https://docs.craftcms.com/v3/dev/#template-paths  
  > **username_0**: So if I wanted to go the route of not requiring the user to add it to their templates and the plugin just add it to the frontend, Im guessing I would need to read more on template roots and registering with the frontend? https://docs.craftcms.com/v3/extend/template-roots.html#plugin-control-panel-templates  
  
  ---
  
  ### Answer by username_2 on 2020-02-11. Score: 2
  
  If it helps, I couldn't get it to show either - my solution was that I wasn't calling {% do... inside the body tag, so it was being ignored!
  
  > **Comments:**
  > **username_0**: Thank you! I actually figured it out without {% do calls by checking if CP request in init() and showing appropriate code like so: $request = Craft::$app->getRequest(); if ($request->getIsCpRequest()) {Craft::$app>view>registerAssetBundle(PluginNameCpAsset::class);} else {Craft::$app->view->registerAssetBundle(PluginNameFrontendAsset::class);}  
  
  ---
  
  ### Answer by username_3 on 2018-12-07. Score: 1
  
  I found Yii's documentation on Assets to be helpful in understanding how to get asset dependencies.
  **Assets**
  <https://www.yiiframework.com/doc/guide/2.0/en/structure-assets>
  **Asset Bundle Class documentation**
  <https://www.yiiframework.com/doc/api/2.0/yii-web-assetbundle>
  
  > **Comments:**
  > **username_0**: So from the first link, the top example, would that be what Plugin Factory generates for PluginNameAsset in the assetbundles folder? I looked through the craft3 class reference docs but mostly found craft\web\assets listed for cp side . is there a specific front end reference that Im missing? Or can I just use that first link template and reference it from my plugin main file init? Sorry Im fairly new to this, mostly just twig filters so far.  
  > **username_3**: This should be all you need  {% do view.registerAssetBundle("ns\\prefix\\FooBundle") %}  
  > **username_3**: For example if your plugin directory is structured like so: plugin-name/src/FooBundle.php  
  > **username_0**: Still struggling to get asset bundles to frontend pages. I have the bundles setup and can get stuff go to the setting page of the plugin with a new Plugin Factory generation. Shouldn't I be able to just create a new file in the templates folder of the plugin then call Craft::$app->getView()->renderTemplate('pluginName/templateFile'); and it output the asset bundle that is registered in that file with {% do view.... - obviously doesn't work that way cause page errors with "unable to find template"...  
  
  ---
  
  