Client Side Scripts

To add scripts to a component, create a script.js file within the individual component folder. This file will be automatically compiled to the theme’s dist folder using Babel.

In this file, you can write your scripts however you wish. Flynt does not enforce any further requirements on your scripts. However, we have created a collection of best practices for client side scripting which we strongly recommend following.

Add Third Party Dependencies

Third party dependencies must be copied to the theme’s dist folder before they can be enqueued. This is done within the script of the component, using the Webpack File Loader.

At the top of the component script, a file can be imported in the following format:

import `file-loader?name=vendor/${fileName.js}!${fileNameInNodeModules.js}'`

The Webpack file loader will automatically find all files installed via npm or Yarn. For example:

In the terminal, navigate to the flynt theme directory and use Yarn to add slick-carousel:

yarn add slick-carousel

In the script file, it is then possible to add this dependency:

import 'file-loader?name=vendor/slick.js!slick-carousel/slick/slick.min'
import 'file-loader?name=vendor/slick.css!csso-loader!slick-carousel/slick/slick.css'