# Directory Layout

## Suggested Directory Layout

The following shows a recommended directory layout for a Polarity integration called `sample-integration`

```
sample-integration/
├── components/
│   └── sample-integration-block.js
├── config/
│   └── config.js
├── styles/
|   └── sample-integration.less
├── templates/
|   └── sample-integration.hbs
├── test/
|   └── sample-integration-test.js
├── vendor/
|    └── google.js
├── integration.js    
├── package.json    
└── README.md
```

## Subdirectories

### /components

The components directory contains a component file that allows logic to be implemented and data to be manipulated on the client side of the integration (i.e., within the notification window). Components are typically used to format data on the client, or to receive user actions from the notification window.

[Learn more about components](/integrations/build-an-integration/customizing-the-overlay-window/component-file.md)

### /config

The config file allows you to specify a large range of properties for your integration including logging and user options. **The config filename and path cannot be modified** (the config file must always be `/config/config.js`).

[Learn more about configuration](/integrations/build-an-integration/configuration-file.md)

### /styles

The styles directory is where you place your CSS or LESS file that can be used to apply custom styles to your integration template.

[Learn more about styles](/integrations/build-an-integration/customizing-the-overlay-window/styles.md)

### /templates

The templates directory contains your integration template written using the Handlebars templating language. Handlebars enhances HTML by providing intuitive syntax for mixing static HTML content with dynamic integration content inside curly braces `{{ }}`. Handlebars also provides basic programming logic such as `if/then/else` statements and `loops`.

[Learn more about templates](/integrations/build-an-integration/customizing-the-overlay-window/templates.md)

### /test

The test directory is where unit, integration, and acceptance tests should be placed. The `test` directory name should not be modified (i.e., it should always be called `test`).

### /vendor

The vendor directory is where you should place any javascript files you want loaded with the integration. Any files placed here should be listed under the `javascript` property of the configuration file as specified in the [configuration guide](/integrations/build-an-integration/configuration-file.md).

[Learn more about vendor javascript files](/integrations/build-an-integration/vendor.md)

### integration.js

The `integration.js` file is the main module file and entry point for your integration. The name of this file must match the `main` property set in your [`package.json`](/integrations/build-an-integration/package_json.md) file.

[Learn more about the main module (integration.js)](/integrations/build-an-integration/main.md)

### package.json

The `package.json` file is used to configure the dependencies of your integration. The `package.json` file follows the same rules and conventions followed by the NPM `package.json` file (integration dependencies are actually installed using NPM). You can learn more about NPM `package.json` files on the official [NPM site.](https://docs.npmjs.com/files/package.json)

For the Polarity specific guide [learn more about the `package.json` file here.](/integrations/build-an-integration/package_json.md)

### README.md

The `README.md` file is a markdown file that documents your integration. You should provide an overview of what your integration does and the different configuration options. The markdown file should be written using GitHub flavored markdown. You can learn more about the markdown syntax by reading the "[Mastering Markdown](https://guides.github.com/features/mastering-markdown/)" guide on GitHub.

[Learn more about the `README.md` file](/integrations/build-an-integration/readme-guide.md)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.polarity.io/integrations/build-an-integration/directory-layout.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.