How to Configure the Component Library

Importing from Github and Importing using Locofy CLI both require you to create a locofy.config.json file.

How to structure locofy.config.json file

There are four sections to the configuration file.

1. Components
This is an array with the relative path to all the component files which need to be imported.

2. Wrapper Component
Add the path to the wrapper component for your component library.

3. Custom Webpack
Add the path to your custom webpack file.

4. Public Path
Add the path to the assets you use in the component library.

Note: All the paths in locofy.config.json need to be relative paths from the root folder.

Sample of locofy.config.json

{
  "components": [
    "./src/components/ArrowRightIcon.tsx",
    "./src/components/DestinationCard.tsx",
    "./src/components/FlightMainContainer.tsx",
    "./src/components/Footer.tsx",
    "./src/components/Header.tsx",
    "./src/components/HolidayCard.tsx",
    "./src/components/HotelCard.tsx",
    "./src/components/NavigationLink.tsx",
    "./src/components/TripItem.tsx",
    "./src/components/SubscribeSection.tsx",
    "./src/components/Button.tsx"
  ],
  "wrapper": "./src/Wrapper.tsx",
  "webpack": "./webpack.locofy.js",
  "publicPath": "./public/assets"
}

Note: See how to create a Wrapper Component.