How to Copy Assets From node_modules in Stencil.js

In this post I describe how to copy assets from the node_modules directory using the copy config in the stencil.config.ts file for Stencil.js.

My Stencil project has a dependency on Bootstrap, so in the pages that use my components, I needed to include the following files:

• bootstrap.min.css
• bootstrap.min.js
• jquery.slim.min.js
• popper.min.js

First, I added these as dev dependencies using npm. For one example:

npm install boostrap --save-dev

The next goal was to make sure that these assets were copied to the www/assets directory during the build process. Copying resources from one location to another can be achieved with the copy config specified with src and dest in the stencil.config.ts file as shown below.

copy: [
    { src: '../node_modules/bootstrap/dist/css/bootstrap.min.css', dest: 'assets/css/bootstrap.min.css'},
    { src: '../node_modules/bootstrap/dist/js/bootstrap.min.js', dest: 'assets/js/bootstrap.min.js'},
    { src: '../node_modules/jquery/dist/jquery.slim.min.js', dest: 'assets/js/jquery.slim.min.js'},
    { src: '../node_modules/popper.js/dist/popper.min.js', dest: 'assets/js/popper.min.js'}
]

With that configuration, Stencil.js copies the resources to the specified locations within www/assets whenever the build is executed (such as when running npm start.

For more information see: Stencil Config – copy