DEV Community

Dashpilot
Dashpilot

Posted on • Updated on

How to save your app's data to a Github repo without any server-side code (using Netlify's Git Gateway)

The advent of client-side Backend-as-a-service providers like Firebase and Supabase has made it possible to perform even complex database queries without requiring any server-side code. These convenient services do come with their own set of drawbacks: vendor lock-in, privacy concerns, unknown costs, ownership of the data, etc. What if you could authenticate users and save your app's data like json, markdown and/or images to your app's Github repo, without using any server-side code?

Hello Git Gateway

Well, with Netlify's Git gateway you can! Git Gateway was developed for Netlify CMS to allow authenticated Netlify Identity users to fetch and save data to a connected Github repo from the client-side. But what's less well-known is that you can use Git Gateway without Netlify CMS to fetch and save data. To make it even easier, I've created a tiny script that allows you to fetch and save data: Netlify Identity - Git Gateway. What's more: you can set it all up in one click!

One-click install and configuration

The easiest way to set it all up, is to press the "Deploy to Netlify" button below. This will clone the repo, set up and configure Netlify, Netlify Identity and Git Gateway:

If you prefer to set it up manually, check out the project's README for full instructions.

How to use it?

To fetch the contents of a file from the repo, call getData:

getData(path='')

If no parameter is provided, this function lists the contents of the repo. If you provide a path, it returns the contents of that one file.

getData('data.json').then(function(result) {
    console.log(result.content);
});
Enter fullscreen mode Exit fullscreen mode

To save any string (text, stringified JSON, base64 image), use the saveData function:

saveData(path, data);

Saves the data to the provided path. If the file already exists, it overwrites it, else it creates a new file. The data can be any string: text, stringified json or a base64 image.

saveData('data.json', JSON.Stringify({title: 'Lorem Ipsum'})).then(function(result) {
    console.log(result);
});
Enter fullscreen mode Exit fullscreen mode

That's how easy it is!

Limitations

Of course, this doesn't replace a full-blown backend-as-a-service like Firebase, but if your app's requirements can be satisfied by simply saving some markdown, json or images to a Github repo, this can be a great solution for making a simple CMS for your SPA, or prototyping a web-app! Do keep in mind that AFAIK there's currenty no way of adding server-side validation of the data. You should either validate the data client-side, or create a build-script that validates the data before pushing it live. If anyone knows a way to hook into Git Gateway via a serverless function, please let me know in the comments.

Conclusion

In this article I outlined how you can use Netlify Identity and Git Gateway to easily create a serverless backend-as-a-service for your app. Have fun creating your own apps, and dont't forget to star the project on Github:

GitHub logo dashpilot / netlify-identity-git-gateway

Example of how to use Netlify Identity and Git Gateway to save files to Github (without using Netlify CMS)

Top comments (0)