# 2. Settings

The first thing you should do when you start a new **Frontity** project is to configure your `frontity.settings.js` file. Let's take a look at each concept you need to understand in order to use it properly.

## Site

A **site** is a set of packages and settings. For example, this is a site:

{% code title="frontity.settings.js" %}

```javascript
export default [
  {
    name: "my-site", // The name of your site.
    state: {
      frontity: {
        url: "https://www.site.com", // Some settings.
      }
    },
    packages: [
      "@frontity/mars-theme",  // And the packages of that site.
      "@frontity/tiny-router",
      "@frontity/wp-source"
    ]
  }
]
```

{% endcode %}

## Multiple Sites

One **Frontity** installation can serve content for multiple sites. This is useful if you have severals blogs and want to manage all of them with the same installation. Both the packages and settings of each site are independent.

To distinguish between different sites, you must use a `match` setting. Each time a new request is received by **Frontity**, it tests the URL against the `match` field to know which site it should load:

```javascript
// frontity.settings.js

export default [
  {
    name: "site-1",
    match: ["https://www.site-1.com"],
    packages: [...]
  },
  {
    name: "site-2",
    match: ["https://www.site-2.com"],
    packages: [...]
  }
]
```

For example, if the URL is `https://www.site-1.com/my-post` the `"site-1"` settings are loaded and if the URL is `https://www.site-2.com/category/some-cat` the `"site-2"` settings are loaded.

**Multisites are encouraged to be defined always with a `match` property** so the internal links defined for the [`<Link>` component](https://api.frontity.org/frontity-packages/collections-packages/components#link) can be [properly processed from one site to another](https://github.com/frontity/frontity/pull/625#pullrequestreview-550228515).

A typical configuration of multisite with:

* The main site linked directly to the main domain&#x20;
* The blog site linked to a `/blog` folder below the main domain&#x20;

can be defined like this...

```javascript
// ./frontity.settings.js

export default [
  {
    name: "base", // main site
    match: "(?!\/blog)",  // whatever URL that doesn't match with "/blog" 
    ... 
  },
   {
    name: "blog", // blog site
    match: "\/blog", // whatever URL matches with "/blog" 
    ... 
  },
]
```

In development, you can access a specific site using the `?frontity_name=` query, which should match the `name` specified for your site. For example, using the `frontity.settings.js` file above, to access `site-2`, you should use:

```
https://localhost:3000/?frontity_name=site-2
```

## Packages

You can specify a different set of **packages** for each site. They can be either strings or objects:

{% code title="frontity.settings.js" %}

```javascript
export default [
  {
    packages: [
      "@frontity/mars-theme",
      "@frontity/tiny-router",
      {
        name: "@frontity/wp-source",
        active: true,
        state: {  // Some settings for this package.
          source: {
            url: "https://wp.site.com/"
          }
        }
      }
    ]
  }
]
```

{% endcode %}

As you can see, they have an `active` prop. That means you can deactivate a package without having to delete it from your settings file.

In **Frontity**, all the code is contained in packages. In a sense it is more similar to WordPress, where all the code is contained in your theme and plugins, than to other JavaScript frameworks. This is obviously on purpose, but we will explain the reasons later when we talk about packages and namespaces :)

## State

The `settings` of a Frontity project are written in the `state`.

If you come from a WordPress background, you can think of **Frontity** `state` as the database of your application. And if you come from a React background, well... it's the `state` that you usually find in Redux or MobX. That `state` is accessible by your packages at runtime.

The initial *settings* of a Frontity site can be set in the `frontity.settings.js` file

{% code title="frontity.settings.js" %}

```javascript
export default [
  {
    name: "my-site",
    state: {
      frontity: {
        url: "https://www.site.com", // Some settings of the site.
      }
    },
    packages: [
      "@frontity/mars-theme",
      "@frontity/tiny-router",
      {
        name: "@frontity/wp-source",
        state: {  // Some settings for this package.
          source: {
            url: "https://wp.site.com/"
          }
        }
      }
    ]
  }
]
```

{% endcode %}

The state is compartmentalized though namespaces. Each namespace usually corresponds to a Frontity package.

For example, our `wp-source` package uses the `source` namespace to store its settings. And our `tiny-router` package uses the `router` namespace:

In this way, we keep organized the settings of each package.

{% code title="frontity.settings.js" %}

```javascript
packages: [
  {
    name: "@frontity/tiny-router",
    state: {
      router: {
        autoFetch: true
      }
    }
  }
]
```

{% endcode %}

There's also a special namespace called `frontity` that is the place to set the general properties of our site. There's a mandatory property we need to set under the `frontity` namespace: `state.frontity.url`

### `state.frontity.url`

The important takeaway here is: *in the settings file you have the opportunity to change the `state` of **Frontity**. Most of the time you will use this to configure the settings of each package.*

{% hint style="info" %}
If you still have any questions about Settings in Frontity, please check out the [**community forum**](https://community.frontity.org), which is packed full of answers and solutions to all sorts of Frontity questions. If you don't find what you're looking for, feel free to start a new post.
{% endhint %}


---

# 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://gitbook-docs.frontity.org/learning-frontity/settings.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.