Make frontity.settings.js dynamically configurable

[Hussein]

Hi, I’m trying to make the frontity.settings.js dynamic and download all the options from an external source. I have been looking around the forum and found these two posts recommending an asynchronous call:

here The RECNATION project

@luisherranz

// frontity.settings.js
import { db } from "some-db-library";

export default async () => {
  await db.connect();
  const settings = await db.getSettings();
  return settings;
};

and here: Multisite with new domains on the fly - #2 by luisherranz

@luisherranz

import wpSettings from "@frontity/wp-settings";

export default async () => {
  const settings = await wpSettings({
    api: "https://mywp.com/wp-json"
  });
  return settings;
}

I was trying this (just to check if it works with async()) but doesn’t work:

export default async () => {
  const settings = {
    "name": "hello-frontity",
    "state": {
      "frontity": {
        "url": "https://test.frontity.org",
        "title": "Test Frontity Blog",
        "description": "WordPress installation for Frontity development"
      }
    },
    "packages": [
      {
        "name": "@frontity/mars-theme",
        "state": {
          "theme": {
            "menu": [
              [
                "Home",
                "/"
              ],
              [
                "Nature",
                "/category/nature/"
              ],
              [
                "Travel",
                "/category/travel/"
              ],
              [
                "Japan",
                "/tag/japan/"
              ],
              [
                "About Us",
                "/about-us/"
              ]
            ],
            "featured": {
              "showOnList": false,
              "showOnPost": false
            }
          }
        }
      },
      {
        "name": "@frontity/wp-source",
        "state": {
          "source": {
            "url": "https://test.frontity.org"
          }
        }
      },
      "@frontity/tiny-router",
      "@frontity/html2react"
    ]
  };
  return settings;
}

I wanted to know, is there anything else I need to do or is Frontity just not ready for this yet?
It shows me this error:

[luisherranz]

@Hussein

is there anything else I need to do or is Frontity just not ready for this yet?

There’s nothing like that in Frontity yet.

If you are willing to do a PR to add this, we are open to merge it

This is the file were you need to add that functionality: frontity/importSettings.ts at dev · frontity/frontity · GitHub

We already support that for packages: frontity/merge-packages.ts at dev · frontity/frontity · GitHub

I haven’t tested this, but I guess something like this could work:

export default async (): Promise<NormalizedSettings[]> => {
  let { default: settings } = await import(
    process.env.CWD + "/frontity.settings"
  );

  // Support functions.
  if (typeof settings === "function") settings = settings();

  // Support async functions.
  if (settings instanceof Promise) settings = await settings;

  return normalizeSettings(settings);
};

[Hussein]

Thanks for the support! I will try this and let you know how it goes.