adding js and css to custom templates

Question

i created a custom module, which renderes a custom template.

i followed this tutorial

now basically i want to add, bootstrap, jquery, and some custom stling and scripts,

I read this article,

and i am not able to attach any files to my timplate..

my file structure:

 - product_tree
  - templates  
     - products-tree.html.twig
  - src
     - Controller
         - productTreeController.php
  - js
     - bootstrap.min.js
     - customScripts.js
     - ...

  - css
     - customStyles.css
     - bootstrap.min.css
     - ...

  - product_tree.libraries.yml
  - product_tree.info.yml
  - product_tree.module

this is my libraries file:

# producttree.libraries.yml
product-tree-libraries:
 version: 1.x
  css:
   theme:
    css/customStyles.css: {}
  js:
   js/customScripts.js: {}
  dependencies:
   - core/jquery

this is my hook:

function product_tree_theme($existing, $type, $theme, $path) {
  return array(
    'products_tree' => array(
      'variables' => array('items' => array(), 'title' => '')
    )
  );
}

i tried attaching it through the renfer array

$build =  array(
    'page' => array (
        '#theme' => 'products_tree',
        '#items' => $items,
        '#title' => 'products', 
        '#attached' => array(
            'library' => array(
              'product_tree/product-tree-libraries',
            ),
        ),
    )
);

and in the twig template:

{{ attach_library('product_tree/product-tree-libraries') }}

but still no luck,

in the twig i call the css and scripts

<link href="css/style.css" rel="stylesheet">

i dont know if that is needed, but i tried with and with out, when i include it, i see in the browser inspector that the css file being uploaded, but then "canceled"

can any one tell me what should i do? or what am i doing wrong ?

EDIT: in the controller, I am renderiung the page like this:

$items = array(
    array('name' => 'product one'),
    array('name' => 'product two'),
    array('name' => 'product three'),
    array('name' => 'product four')
);  
$build =  array(
    'page' => array (
        '#theme' => 'products_tree',
        '#items' => $items,
        '#title' => 'products', 
    )
);

$html = \Drupal::service('renderer')->renderRoot($build);
$response = new Response();
$response->setContent($html);

return $response;

i made This according to this answer

because i want it to be separated from drupal. maybe this is the problem?

when i use BareHtmlPageRenderer to render the page (according to this answer). i see drupal imports and the page looks more alive, but still my custom css and js are not there!

Answer 1

I Found the Solution for this.. and it is by using the BareHtmlPageRenderer (found it here) and then attach the files in the controller php file like this

$build['#attached']['library'][] = 'product_tree/product-tree-libraries';

with out the attachments hook function.

so the controller would look like:

    $build =  array(
        'page' => array (
            '#theme' => 'products_tree',
            '#items' => $term_data,
            '#title' => 'products', 
        )
    );

    $build['#attached']['library'][] = 'product_tree/product-tree-libraries';



    $attachments = \Drupal::service('html_response.attachments_processor');
    $renderer = \Drupal::service('renderer');

    $bareHtmlPageRenderer = new BareHtmlPageRenderer($renderer, $attachments);

    $response = $bareHtmlPageRenderer->renderBarePage($build, 'Page Title', 'markup');
    return $response;

it could also be in the $build array it self i think.. but this way its better when looking at it..

and still no need for:

{{ attach_library('product_tree/product-tree-libraries') }}

Or

<link href="css/style.css" rel="stylesheet">

Answer 2

1. Check the yml indentation:

product-tree-libraries:
  version: 1.x
    css:
      theme:
        css/customStyles.css: {}
    js:
      js/customScripts.js: {}
    dependencies:
      core/jquery

2. Attach your library with hook_page_attachments To attach to hole page.

    /**
     * Implements hook_page_attachments().
     */
    function product_tree_page_attachments(array &$attachments) {
      //- Note YourModuleName/Library name
      $attachments['#attached']['library'][] = 'product_tree/product-tree-libraries';
    }

3. No need for:

    {{ attach_library('product_tree/product-tree-libraries') }}

Or

<link href="css/style.css" rel="stylesheet">