Frontity Docs
  • ยป Welcome to Frontity
  • ๐Ÿš€Getting started
    • Quick start guide
  • ๐Ÿ“ƒAbout Frontity
    • Frontity features
    • Browser support
    • Get involved
  • ๐Ÿ“šCore Concepts
    • 1. Project
    • 2. Settings
    • 3. Packages
    • 4. Roots
    • 5. State
    • 6. Actions
    • 7. Libraries
    • 8. Namespaces
    • 9. Styles
  • ๐Ÿ—๏ธArchitecture
    • Decoupled Mode
    • Embedded Mode
  • ๐ŸŒŽDeployment
    • Deploy Frontity using Vercel
    • Deploy Frontity on Layer0
    • Deploy Frontity on Heroku
  • ๐ŸŒ—Isomorphic React
  • โšก๏ธ Perfomance
    • Caching
    • Link prefetching
    • Lazy Loading
    • Code Splitting
  • ๐Ÿ”ŽSEO
  • ๐Ÿ“–Guides
    • Setting the URL of the WordPress data source
    • Using Environment Variables in a Frontity project
    • WordPress requirements for Frontity
    • URLs in a Migration from WordPress to Frontity Decoupled Mode
    • Frontity Query Options
    • Redirections with Frontity
    • Understanding a Frontity project
    • Add a new Frontity package or theme to your project
    • How to share your Frontity project
    • Understanding Mars Theme
    • Working with processors
    • How to process page-builder content in Frontity
    • Keep Frontity Updated
    • Troubleshooting
    • JavaScript
    • React
  • ๐Ÿ‘Contributing
    • How to contribute?
    • Contributing Guide
Powered by GitBook
On this page
  • Site
  • Multiple Sites
  • Packages
  • State
  • state.frontity.url

Was this helpful?

  1. Core Concepts

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:

frontity.settings.js
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"
    ]
  }
]

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:

// 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.

A typical configuration of multisite with:

  • The main site linked directly to the main domain

  • The blog site linked to a /blog folder below the main domain

can be defined like this...

// ./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:

frontity.settings.js
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/"
          }
        }
      }
    ]
  }
]

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

frontity.settings.js
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/"
          }
        }
      }
    ]
  }
]

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.

frontity.settings.js
packages: [
  {
    name: "@frontity/tiny-router",
    state: {
      router: {
        autoFetch: true
      }
    }
  }
]

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.

Previous1. ProjectNext3. Packages

Last updated 3 years ago

Was this helpful?

Multisites are encouraged to be defined always with a match property so the internal links defined for the can be .

If you still have any questions about Settings in Frontity, please check out the , 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.

๐Ÿ“š
<Link> component
properly processed from one site to another
community forum