Headless CMS with Coda


#1

Hey, I wanted to share a project with you that I’m on right now.

I work on a php and js library that allows front-end devs to quickly publish Coda content in the web.

I created a test website with React. This is far from the library I’m thinking of, but it shows at least, how a website can be filled with Coda data.

Next step is a reusable PHP class that can be used to quickly combine template files with Coda data.

Frontend: https://codacms-js-demo.zettl.io/ (currently offline due to security risks, thanks @oleg for looking into it :slight_smile: )
Backend: https://drive.google.com/open?id=1GK7a9Lf8Xn5NjUbxxt6w1JD6HHmpDlGV
Github: https://github.com/danielstieber/codacms-react
(the blog articles on the page are just random text from Craft, don’t waste your time reading them :slight_smile: )

Known Issues:

  • On mobile, the navigation does work and change the site, but you need to close the navigation manually to see the newly opened page.

#2

Hey Daniel, just took a look, and that’s awesome stuff! I like how you’re caching the API responses to keep the site responsive after initial load, and of course it’s cool to see Coda being used as a backend for a user-facing site.

I worked on our API, so to give some feedback:

  • Your GitHub repo is set up well to omit the API token, but the actual token still made it into your compiled demo. I was able to get your API key by looking at the compiled source/network requests tab in the Chrome dev console, so your docs were an open library for some time. (To keep your account secure, we revoked that token on our end, so your site won’t load until it’s updated.)
  • The ideal thing to do is to have your own backend service that makes requests to the Coda API. That way your Coda token won’t get exposed to users, and you can also cache responses on your end. Note that our API does enforce some limits (currently 1000 requests/minute), so this wouldn’t scale for a super popular site for now until we look into raising the limit for use cases like this one
  • One thing we’d need to do on our end to let you use the token in React directly is support configuring “scopes” on a per-token basis. Currently Coda tokens grant access to your entire account, but you can imagine a world where a token grants read-only access to only certain tables in a certain doc, and not any of your other docs - perfect for something like this CMS

Anyway, nice work! Really stoked to see someone make this with our API. :slight_smile:


#3

Thank you so much for you feedback @oleg and for closing the gap from your side! :raised_hands:t4:

I was using react without ‘create-react-app’ before and already had a hard time to implement a .env. I was so happy when I realized this is part of create-react-app and I can hide the key, but it does not help if the request itself is visible :man_facepalming:t4:

Yeah I guess scopes would make sense. Would it also work with some kind of ‘domain-restrictions’ where only allowed domains can use the token, or could people easily fake domains at the request?

So next step will totally be making a secure backend service with some caching there. 1000 requests/minute are still a lot for experiments right now (and with a wise caching system).

Will keep you upated here :slight_smile:


#4

Hehe, no problem! There are a lot of parts here and it’s tough to make sure everything’s watertight, so to speak.

With regards to domain restrictions, there is something called CORS that would come in handy. We could in theory have our API server return a header that says that only codacms-js-demo.zettl.io is allowed to make requests using that token. But note that this is merely a header respected by popular browsers like Chrome – it wouldn’t stop someone from using that token outside of a browser, such as in their own Python or shell script or other environment that doesn’t respect web headers.

The 1000 requests/minute is something we set up on our end to help prevent someone accidentally overloading our servers with a ton of requests, i.e., writing a script that makes hundreds of requests a second. But again, if you (or anyone else) is thinking of taking the API further, we’re happy to evaluate requests to raise that limit for your account.