How Support for multiple sites with a single installation

How to configure the frontity for multiple sites in a single installation, I have introduced two blogs in one configuration, only the first one works correctly, the second works if I add the name of the blog at the end of the url, for example ?name = “name- blog” how to do not have to write that variable at the end of the urls, or do it automatically.

Hi @rbatistaleguen, welcome to the community :slight_smile:

In order to manage different sites in one Frontity configuration, you just have to configure them at frontity.settings.js file. You should create an array of objects, one for each site, specifying the match property to distinguish between them.

You have more info at docs, but here you have a complete example of how it would be for two blogs:

const settings = 
[
  //FIRST BLOG
  {
    "name": "blog-1",
    "match": ["https://blog-1.com"],
    "state": {
      "frontity": {
        "url": "https://blog-1.com",
        "title": "Blog 1",
        "description": "This is the configuration of blog 1"
      }
    },
    "packages": [
      {
        //Customize your theme for blog 1
        "name": "@frontity/mars-theme",
        "state": {
          "theme": {
            "menu": [...],
            "featured": {
              "showOnList": true,
              "showOnPost": true
            }
          }
        }
      },
      {
        //Point to the api for blog 1
        "name": "@frontity/wp-source",
        "state": {
          "source": {
            "api": "https://blog-1.com/wp-json"
          }
        }
      },
      //Add as many package as blog 1 will need
      "@frontity/tiny-router",
      "@frontity/html2react"
    ]
  },
  //SECOND BLOG
  {
    "name": "blog-2",
    "match": ["https://blog-2.com"],
    "state": {
      "frontity": {
        "url": "https://blog-2.com",
        "title": "Blog 2",
        "description": "This is the configuration of blog 2"
      }
    },
    "packages": [
      {
        //Customize your theme for blog 2
        "name": "@frontity/mars-theme",
        "state": {
          "theme": {
            "menu": [...],
            "featured": {
              "showOnList": false,
              "showOnPost": false
            }
          }
        }
      },
      {
        //Configure the api for blog 2
        "name": "@frontity/wp-source",
        "state": {
          "source": {
            "api": "https://blog-2.com/wp-json"
          }
        }
      },
      //Add as many package as blog 2 will need
      "@frontity/tiny-router",
      "@frontity/html2react"
    ]
  },
];

export default settings;

Note that, once you want to deploy it, you’ll have to configure both domains to point to the same Frontity server.

Please, let us know if this works in your case :slightly_smiling_face: If not, it would be really useful to know how are your frontity.settings to check it.

Thank you!

You can add more matches. For example, you could add localhost with different ports

"match": ["blog-1.com", "localhost:3000"]

and the other one:

"match": ["blog-2.com", "localhost:3001"]

Then start with port 3001 when you want to work with the second blog:

> npx frontity dev --port 3001

Or start frontity twice one in 3000 and one in 3001.

By the way, "match" it is actually a regexp.

If you are using a subdirectory for one of them, you can configure the directory instead:

"match": ["blog\\.com\\/directory"]

Use double escape characters (\\ instead of \).

Finally, if you are using a subdirectory you can add localhost as well:

"match": ["(blog\\.com|localhost:3000)\\/directory"]

By the way, if you don’t add a "match" field to a site, that site would be the “default” one. If none of the matches match, Frontity load that site.

@SantosGuillamot maybe we should add more documentation about how to work with multiple sites. What do you think?

Sure! We should add a guide exactly for that. I will work on it.

Yes, great idea, i think will be very good get more documentation about this, there is many options of work with it

The multi-site configuration works for the first blog without adding anything to the url, however to correctly access the pages of the second blog I have to add “?name=site-name” at the end of url, you can make the urls already have the “?name=site-name” added by default?. Or make the urls of the second blog work?

Hey @rbatistaleguen, could you post the content of your frontity.settings.js file? Maybe that way we can help you better.

Sorry for my late reply, here is the configuration of my file frontity.settings.js

const settings = [{
  "name": "arribalacocina",
  "match": ["https://www.arribalacocina.com","localhost:3000"],
  "state": {
    "frontity": {
      "url": "https://www.arribalacocina.com",
      "title": "Arriba La Cocina",
      "description": "Arriba La Cocina"
    }
  },
  "packages": [
    {
      "name": "@frontity/mars-theme",
      "state": {
        "theme": {
            "featured": {
            "showOnList": false,
            "showOnPost": false
          }
        }
      }
    },
    {
      "name": "@frontity/wp-source",
      "state": {
        "source": {
          "api": "https://www.arribalacocina.com/wp-json"
        }
      }
    },
    "@frontity/tiny-router",
    "@frontity/html2react"
  ]
},
{
  "name": "vivelavida",
  "match": ["https://www.vivelavida.com","localhost:3001"],
  "state": {
    "frontity": {
      "url": "https://www.vivelavida.com",
      "title": "Vive la Vida",
      "description": "Vive la Vida"
    }
  },
  "packages": [
    {
      "name": "@frontity/mars-theme",
      "state": {
        "theme": {
            "featured": {
            "showOnList": false,
            "showOnPost": false
          }
        }
      }
    },
    {
      "name": "@frontity/wp-source",
      "state": {
        "source": {
          "api": "https://www.vivelavida.com/wp-json"
        }
      }
    },
    "@frontity/tiny-router",
    "@frontity/html2react"
  ]
}];

export default settings;

The settings seem correct to me.

As Luis said, if you want to access the second site (vivalavida), you should run this command:
> npx frontity dev --port 3001

instead of just
> npx frontity dev.

Could you confirm us that after adding --port 3001 it is still not working? This way you wouldn’t need to use ?name=site-name.

1 Like