{"id":336855,"date":"2021-03-25T07:15:00","date_gmt":"2021-03-25T14:15:00","guid":{"rendered":"https:\/\/css-tricks.com\/?p=336855"},"modified":"2021-03-25T12:15:34","modified_gmt":"2021-03-25T19:15:34","slug":"building-a-full-stack-geo-distributed-serverless-app-with-macrometa-gatsbyjs-github-pages","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/building-a-full-stack-geo-distributed-serverless-app-with-macrometa-gatsbyjs-github-pages\/","title":{"rendered":"Building a Full-Stack Geo-Distributed Serverless App with Macrometa, GatsbyJS, & GitHub Pages"},"content":{"rendered":"\n
In this article, we walk through building out a full-stack real-time and completely serverless application that allows you to create polls! All of the app\u2019s static bits (HTML, CSS, JS, & Media) will be hosted and globally distributed via the GitHub Pages CDN (Content Delivery Network). All of the data and dynamic requests for data (i.e., the back end) will be globally distributed and stateful via the Macrometa GDN (Global Data Network).<\/p>\n\n\n\n
Macrometa<\/a> is a geo-distributed stateful serverless platform designed from the ground up to be lightning-fast no matter where the client is located, optimized for both reads and writes, and elastically scalable. We will use it as a database for data collection and maintaining state and stream to subscribe to database updates for real-time action.<\/p>\n\n\n\n We will be using Gatsby to manage our app and deploy it to Github Pages. Let\u2019s do this!<\/p>\n\n\n\n\n\n\n This demo uses the Macrometa<\/a> c8db-source-plugin to get some of the data as markdown and then transform it to HTML to display directly in the browser and the Macrometa JSC8 SKD to keep an open socket for real-time fun and manage working with Macrometa\u2019s API.<\/p>\n\n\nIntro<\/h3>\n\n\n
Getting started<\/h3>\n\n\n
npm install -g gatsby-cli<\/code><\/li>
document collection<\/code> called
markdownContent<\/code>. Then create a single document with
title<\/code> and
content<\/code> fields in markdown format. This creates your data model the app will be using for its static content.<\/li><\/ol>\n\n\n\n