How can I reference node_modules components inside Symfony's Views

Question

I have installed a widget using npm. It is installed under node_modules folder. I need to include the widget's javascript and CSS files in my View but since they are not in Web folder I can't include them, using the following method :

<link href="{{ asset('assets/someFolder/.css') }}" rel="stylesheet" type="text/css" />

How can I achieve the above?

Answer 1

There are couple of ways around this issue that I know of. I'm going to show you the way I use node_modules in symfony. I use Yarn and Assetic bundle for this, it's actually easier than you think.

1. Install yarn for your system and install assetic bundle in symfony. They are pretty straightforward.

2. Create a new directory inside your AppBundle (or in any of your bundles) and name it Assets. Go to your assets directory from console and install your node modules there using Yarn.

   yarn add [email protected]

3. Now you can include your asset as follows in your view.

   {% stylesheets '@AppBundle/Assets/node_modules/bootstrap/dist/css/bootstrap.css' filter='cssrewrite' %} <link rel="stylesheet" href="{{ asset_url }}" /> {% endstylesheets %}

Hope this helps.