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 
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 
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?
2 Likes
Sure! We should add a guide exactly for that. I will work on it.
1 Like
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
Hello @SantosGuillamot , I know itās been a while since someone has written in this thread, but I have some related problem. Can you, please, elaborate more on this sentence āNote that, once you want to deploy it, youāll have to configure both domains to point to the same Frontity server.ā?
Iāve been working on a multilingual (English and Spanish) site with two different package themes. Everything works ok in my localhost (I can switch between both versions ), but once I deploy I canāt access the Spanish version. Thanks in advance for your answer.
I am not sure, but I think what I meant is that you only need to deploy Frontity once. Could you share your frontity.setting.js file to see if we can help you somehow?
Thanks for your answer @SantosGuillamot ,
Hereās my frontity settings file:
const settings = [
//english site
{
"name": "andes-headless-english",
"match": [".*https://andes-alexfernando.vercel.app/"],
"state": {
"frontity": {
"url": "https://test.frontity.org",
"title": "Andes Website English",
"description": "A website for the ONG Andes English Version"
},
"theme":{
"lang": "en"
}
},
"packages": [
{
"name": "andes-theme",
},
{
"name": "@frontity/wp-source",
"state": {
"source": {
"api": "https://en.andescusco.info/wp-json/",
"params": {
per_page: 100,
},
"postTypes": [
{
type: "singlesearch",
endpoint: "singlesearch",
archive: "/search",
},
{
type: "cardimage",
endpoint: "cardimage",
archive: "cardimage"
},
{
type: "toolkitposts",
endpoint: "toolkitposts",
archive: "alltoolkit"
},
],
"taxonomies": [
{
taxonomy: "typeofpublication",
endpoint: "typeofpublication",
postTypeEndpoint: "singlesearch",
params: {
per_page: 100,
_embed: true
}
}
]
},
}
},
"@frontity/tiny-router",
"@frontity/html2react",
"frontity-contact-form-7"
]
},
//SPANISH SITE
{
"name": "andes-headless-spanish",
"match": [".*https://andes-alexfernando.vercel.app\/es-(.*)?$"],
"state": {
"frontity": {
"url": "https://test.frontity.org",
"title": "Andes Spanish",
"description": "Configuration for Spanish Site"
},
"theme":{
"lang": "es"
}
},
"packages": [
{
"name": "andes-theme",
},
{
"name": "@frontity/wp-source",
"state": {
"source": {
"api": "https://es.andescusco.info/wp-json",
"params": {
per_page: 100,
},
"postTypes": [
{
type: "singlesearch",
endpoint: "singlesearch",
archive: "/es-search"
},
{
type: "cardimage",
endpoint: "cardimage",
archive: "cardimage"
},
{
type: "toolkitposts",
endpoint: "toolkitposts",
archive: "alltoolkit"
},
],
"taxonomies": [
{
taxonomy: "typeofpublication",
endpoint: "typeofpublication",
postTypeEndpoint: "singlesearch",
params: {
_embed: true
}
}
]
},
}
},
"@frontity/tiny-router",
"@frontity/html2react",
"frontity-contact-form-7"
]
}
];
export default settings;
In the end, I decided to try the solution with one theme package āandes-themeā. Btw, Iām using 2 different WordPress Url (one to store the data, post in English, and the other for Spanish) and with the ālangā variable conditionally rendered components based on this. As I said before everything works fine in my localhost, but no when I deploy it. This is a provisional link: http://andes-alexfernando.vercel.app/ (before going to production). As you can see when you try to access the Spanish version, it seems like it canāt find the route http://andes-alexfernando.vercel.app/es-/, even if ā/es-ā itās declared in my root component. Not sure if something is wrong with the RegExp on the match settings or http://andes-alexfernando.vercel.app/es-/ has to be an actual domain, anyway. Thanks in advance, hope you can help me with this.
I am not sure but the issue you are having could be that in the RegExp, you should escape the different slashes. Apart from that, you could also make the https optional. It could be something similar to this:
.*https?:\/\/andes-alexfernando.vercel.app\/es-(.*)?$
You also have to make sure that the first site doesnāt match. You could even not include a match in the first site. Frontity automatically loads the first one if no other site matches.
You can test your RegExp using this tool.
Apart from that, you should change the state.frontity.url to point to your frontend url (right now is pointing to test.frontity.org.
Let us know if that works
Thank you so much @SantosGuillamot, your solution worked fine. I guess when Iāll go to production I need to change the match and URL keys object again.
I have a couple of more questions/ observations.
1.- Now, since Iām using one theme package I wanted to delete the other that Iām not using, so I just need to delete the folder of the package, or Do I need to run a command to delete it completely?
2.- When I switch between both versions Iām using a <a><a/> tag. For some reason, I canāt use a <Link><Link /> component routing. That only fails with the English, Spanish buttons on the top navbar https://andes-alexfernando.vercel.app/, then Iām using without any problem the same component around the application.
Thanks again for your help.
Cheers,
Iām glad to hear it was solved
It should be enough if you delete it and remove it from the package.json.
Itās difficult to know without having a repo, but maybe you arenāt importing the Link component properly. Make sure you have this line at the top of the file where you are using it:
import Link from "@frontity/components/link";
Please, for further questions, or to go deeper in these ones, open a new topic, as they are not related to the original question of this one. Thanks!
Hi
What if I have three sites with match string in all of themā¦ I can see it still loads first site if any matches not found. I think it should not load first one as well if match key given and matches not found. ???
Can you share your frontity settings file?