How to use baseCollectionPath with Firestore hierarchy?

[rickpasetto]

Greetings. This has been something that I've been stuck on for a while. I am hoping someone can please help.

I have my Firebase Firestore CMS storage set up such that the base collections are not at the top level, but under a hierarchy. In my case, for example, I have the following:

/cms/app1/collectionA/...
/cms/app1/collectionB/...
/cms/app2/collectionC/...
/cms/app2/collectionD/...

Each app has its own set of collections, so they aren't mixed (and in fact have their own CMS instances). In other words, I just need FireCMS to operate under a non-top-level root. So, to achieve this, I tried setting up FireCMS, say for app1, like this:

...
  return <FirebaseCMSApp
    name={"app1"}
    baseCollectionPath={"/cms/app1"} 
    collections={[collectionA, collectionB]}
    firebaseConfig={firebaseConfig}
  />
...

...and each collection defines it subpath, e.g.

export const collectionA = buildCollection {
  path: "collectionA",
...
 }
...
export const collectionB = buildCollection {
  path: "collectionB",
...
 }

...etc.

Now, the problem is, this doesn't work when I descend into one of these sub collections. I get the following error:

Error fetching data from the data source
Missing or insufficient permissions.

But, if I ignore baseCollection, and set each of my collections with an absolute path, like this:

...
  return <FirebaseCMSApp
    name={"app1"}
    collections={[collectionA, collectionB]}
    firebaseConfig={firebaseConfig}
  />
...

...and each collection defines it subpath, e.g.

export const collectionA = buildCollection {
  path: "/cms/app1/collectionA",
...
 }
...
export const collectionB = buildCollection {
  path: "/cms/app1/collectionB",
...
 }

...then, it works.... EXCEPT, now routing (deep-linking, i.e. trying to open http://.../cms/app1/collectionA directly) no longer works.

I have tried using basePath instead of baseCollectionPath, or setting both, and nothing seems to work. Unfortunately the documentation isn't that informative:

baseCollectionPath: Default path under the collection routes of the CMS will be created
basePath: Default path under the navigation routes of the CMS will be created

Can someone please help? Maybe I'm doing something wrong?

[fgatti675]

Hi @rickpasetto
We are updating the docs to better reflect the inner working of this feature, hope it helps:

• basePath Path under the navigation routes of the CMS will be created. Defaults to /.
  Internally FireCMS uses react-router to create the routes, the base path is attached to the
  BrowserRouter component. If you are using FireCMS in a subpath of your website, you can use
  this prop to specify the base path.

• baseCollectionPath Path under the collection routes of the CMS will be created.
  Defaults to /c.

  In your case, I think basePath is the prop you need

[rickpasetto]

Thank you for the quick reply!

Unfortunately, just using basePath alone does not work, either. This results in a blank page, with the console error:

<Router basename="/cms/app1"> is not able to match the URL "/" because it does not start with the basename, so the <Router> won't render anything.
warning @ history.ts:487

Any other hints? I am using FireCMS v2.0.4, by the way.

[rickpasetto]

Maybe another way to put it is this:

My (FireCMS-based) CMS app is standalone, so it is rooted at "/". So, unless I misunderstand basePath, I don't need to change that.

However, the way I have Firestore set up, the CMS items in there are in a subcollection under /cms/app1. Does this help?

I was thinking of trying to go the route of making a custom DataSource, just to insert this base Firestore path, but I was hoping for an easier solution :).

[fgatti675]

Got it, in that case you can just set the complete path in the collection config, and ignore basePath and baseCollectionPath.
You can set the path in collections in any collection level, so you can do:

path: "cms/app1/subcol"

Path need to have an odd number of segments

[rickpasetto]

Got it, in that case you can just set the complete path in the collection config, and ignore basePath and baseCollectionPath.

You can set the path in collections in any collection level, so you can do:

path: "cms/app1/subcol"

Yep, that's exactly what I'm doing. But when I do that, deep-linking (or simply page refresh) fails (gets a 404) when CMS is inside that collection. Note it only happens on production builds (not when developing and pointing at localhost). Could it be a bug, or perhaps still user error on my part?

[fgatti675]

Hi Rick, that sounds like a bug then. So the error is only happening when deep linking?

…

On Thu, Aug 17, 2023 at 3:01 AM Rick Pasetto ***@***.***> wrote: Got it, in that case you can just set the complete path in the collection config, and ignore basePath and baseCollectionPath. You can set the path in collections in any collection level, so you can do: path: "cms/app1/subcol" Yep, that's exactly what I'm doing. But when I do that, deep-linking (or simply page refresh) fails (gets a 404) when CMS is inside that collection. Note it only happens on production builds (not when developing and pointing at localhost). Could it be a bug, or perhaps still user error on my part? — Reply to this email directly, view it on GitHub <#537 (reply in thread)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABHCCD24EEHJRWIGF5IQNMLXVVUP3ANCNFSM6AAAAAA3KTYWZY> . You are receiving this because you commented.Message ID: ***@***.***>

-- Camberi - Madrid, Munich, Milan

[rickpasetto]

Yes, either when you refresh the page or copy/paste a URL to another browser tab.