{"id":326538,"date":"2020-12-03T12:55:13","date_gmt":"2020-12-03T20:55:13","guid":{"rendered":"https:\/\/css-tricks.com\/?p=326538"},"modified":"2020-12-03T12:55:16","modified_gmt":"2020-12-03T20:55:16","slug":"how-to-create-a-client-serverless-jamstack-app-using-netlify-gatsby-and-fauna","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/how-to-create-a-client-serverless-jamstack-app-using-netlify-gatsby-and-fauna\/","title":{"rendered":"How to create a client-serverless Jamstack app using Netlify, Gatsby and Fauna"},"content":{"rendered":"\n<p>The <a href=\"https:\/\/jamstack.org\/\" rel=\"noopener\">Jamstack<\/a> is a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.<\/p>\n\n\n\n<p>The key aspects of a Jamstack application are the following:<\/p>\n\n\n\n<ul><li>The entire app runs on a CDN (or ADN). CDN stands for Content Delivery Network and an ADN is an Application Delivery Network.<\/li><li>Everything lives in Git.<\/li><li>Automated builds run with a workflow when developers push the code.<\/li><li>There&#8217;s Automatic deployment of the prebuilt markup to the CDN\/ADN.<\/li><li>Reusable APIs make hasslefree integrations with many of the services. To take a few examples, Stripe for the payment and checkout, Mailgun for email services, etc. We can also write custom APIs targeted to a specific use-case. We will see such examples of custom APIs in this article.<\/li><li>It&#8217;s practically Serverless. To put it more clearly, we do not maintain any servers, rather make use of already existing services (like email, media, database, search, and so on) or serverless functions.<\/li><\/ul>\n\n\n\n<!--more-->\n\n\n\n<p>In this article, we will learn how to build a Jamstack application that has:<\/p>\n\n\n\n<ul><li>A global data store with GraphQL support to store and fetch data with ease. We will use <a href=\"https:\/\/synd.co\/39AAI73\" rel=\"noopener\">Fauna<\/a> to accomplish this.<\/li><li>Serverless functions that also act as the APIs to fetch data from the Fauna data store. We will use <a href=\"https:\/\/www.netlify.com\/products\/functions\/\" rel=\"noopener\">Netlify serverless functions<\/a> for this.<\/li><li>We will build the client side of the app using a <a href=\"https:\/\/blog.greenroots.info\/what-is-a-static-site-generator-and-how-to-select-one-cke9xtx5g006p58s11dzg2j16\" rel=\"noopener\">Static Site Generator<\/a> called <a href=\"https:\/\/www.gatsbyjs.com\/\" rel=\"noopener\">Gatsbyjs<\/a>.<\/li><li>Finally we will deploy the app on a CDN configured and managed by <a href=\"https:\/\/www.netlify.com\/products\/edge\/\" rel=\"noopener\">Netlify CDN<\/a>.<\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-so-what-are-we-building-today\">So, what are we building today?<\/h3>\n\n\n<p>We all love shopping. How cool would it be to manage all of our shopping notes in a centralized place? So we\u2019ll be building an app called \u2018shopnote\u2019 that allows us to manage shop notes. We can also add one or more items to a note, mark them as done, mark them as urgent, etc.<\/p>\n\n\n\n<p>At the end of this article, our shopnote app will look like this,<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"919\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/shopnote.png?resize=1600%2C919&#038;ssl=1\" alt=\"\" class=\"wp-image-326539\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/shopnote.png?w=1600&amp;ssl=1 1600w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/shopnote.png?resize=300%2C172&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/shopnote.png?resize=1024%2C588&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/shopnote.png?resize=768%2C441&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/shopnote.png?resize=1536%2C882&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/shopnote.png?resize=1000%2C574&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-tl-dr\">TL;DR<\/h3>\n\n\n<p>We will learn things with a step-by-step approach in this article. If you want to jump into the source code or demonstration sooner, here are links to them.<\/p>\n\n\n\n<ul><li>You can access the shop note demo from here: <a href=\"https:\/\/shopnote.netlify.app\/\" rel=\"noopener\">https:\/\/shopnote.netlify.app\/<\/a><\/li><li>All the source code used in this article is in my GitHub repo. Feel free to follow it, as I keep updating the source code frequently. <a href=\"https:\/\/github.com\/atapas\/shopnote\" rel=\"noopener\">https:\/\/github.com\/atapas\/shopnote<\/a><\/li><\/ul>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-set-up-fauna\">Set up Fauna<\/h3>\n\n\n<p><a href=\"https:\/\/synd.co\/39AAI73\" rel=\"noopener\">Fauna<\/a> is the data API for client-serverless applications. If you are familiar with any traditional RDBMS, a major difference with Fauna would be, it is a relational NOSQL system that gives all the capabilities of the legacy RDBMS. It is very flexible without compromising scalability and performance.<\/p>\n\n\n\n<p>Fauna supports multiple APIs for data-access,<\/p>\n\n\n\n<ul><li>GraphQL: An open source data query and manipulation language. If you are new to the GraphQL, you can find more details from here, <a href=\"https:\/\/graphql.org\/\" rel=\"noopener\">https:\/\/graphql.org\/<\/a><\/li><li>Fauna Query Language (FQL): An API for querying Fauna. FQL has language specific drivers which makes it flexible to use with languages like JavaScript, Java, Go, etc. Find more details of FQL <a href=\"https:\/\/docs.fauna.com\/fauna\/current\/api\/fql\/\" rel=\"noopener\">from here<\/a>.<\/li><\/ul>\n\n\n\n<p>In this article we will explain the usages of GraphQL for the ShopNote application.<\/p>\n\n\n\n<p>First thing first, <a href=\"https:\/\/synd.co\/39AAI73\" rel=\"noopener\">sign up using this URL<\/a>. Please select the free plan which is with a generous daily usage quota and more than enough for our usage.<\/p>\n\n\n\n<p>Next, create a database by providing a database name of your choice. I have used shopnotes as the database name.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/create_db.png?resize=628%2C596&#038;ssl=1\" alt=\"\" class=\"wp-image-326540\" width=\"628\" height=\"596\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/create_db.png?w=837&amp;ssl=1 837w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/create_db.png?resize=300%2C285&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/create_db.png?resize=768%2C729&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>After creating the database, we will be defining the GraphQL schema and importing it into the database. A GraphQL schema defines the structure of the data. It defines the data types and the relationship between them. With schema we can also specify what kind of queries are allowed.<\/p>\n\n\n\n<p>At this stage, let us create our project folder. Create a project folder somewhere on your hard drive with the name, shopnote. Create a file with the name, <code>shopnotes.gql<\/code> with the following content:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">type ShopNote {\n  name: String!\n  description: String\n  updatedAt: Time\n  items: [Item!] @relation\n}\n \ntype Item {\n  name: String!\n  urgent: Boolean\n  checked: Boolean\n  note: ShopNote!\n}\n \ntype Query {\n  allShopNotes: [ShopNote!]!\n}<\/code><\/pre>\n\n\n\n<p>Here we have defined the schema for a shopnote list and item, where each <code>ShopNote<\/code> contains name, description, update time and a list of Items. Each <code>Item<\/code> type has properties like, name, urgent, checked and which shopnote it belongs to.&nbsp;<\/p>\n\n\n\n<p>Note the <code>@relation<\/code> directive here. You can annotate a field with the <code>@relation<\/code> directive to mark it for participating in a bi-directional relationship with the target type. In this case, <code>ShopNote<\/code> and <code>Item<\/code> are in a one-to-many relationship. It means, one <code>ShopNote<\/code> can have multiple Items, where each Item can be related to a maximum of one ShopNote.<\/p>\n\n\n\n<p>You can read more about the <code>@relation<\/code> directive <a href=\"https:\/\/docs.fauna.com\/fauna\/current\/api\/graphql\/directives\/d_relation\" rel=\"noopener\">from here<\/a>. More on the GraphQL relations can be found <a href=\"https:\/\/docs.fauna.com\/fauna\/current\/tutorials\/graphql\/relations\" rel=\"noopener\">from here<\/a>.<\/p>\n\n\n\n<p>As a next step, upload the <code>shopnotes.gql<\/code> file from the Fauna dashboard using the IMPORT SCHEMA button,<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/Import_schema.png?resize=653%2C274&#038;ssl=1\" alt=\"\" class=\"wp-image-326541\" width=\"653\" height=\"274\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/Import_schema.png?w=1305&amp;ssl=1 1305w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/Import_schema.png?resize=300%2C126&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/Import_schema.png?resize=1024%2C430&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/Import_schema.png?resize=768%2C323&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/Import_schema.png?resize=1000%2C420&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Upon importing a GraphQL Schema, FaunaDB will automatically create, maintain, and update, the following resources:<\/p>\n\n\n\n<ul><li>Collections for each non-native GraphQL Type; in this case, ShopNote and Item.<\/li><li>Basic CRUD Queries\/Mutations for each Collection created by the Schema, e.g. <code>createShopNote<\/code> <code>allShopNotes<\/code>; each of which are powered by FQL.<\/li><li>For specific GraphQL directives: custom Indexes or FQL for establishing relationships (i.e. <code>@relation<\/code>), uniqueness (<code>@unique<\/code>), and more!<\/li><\/ul>\n\n\n\n<p>Behind the scene, Fauna will also help to create the documents automatically. We will see that in a while.<\/p>\n\n\n\n<p>Fauna supports a schema-free object relational data model. A database in Fauna may contain a group of collections. A collection may contain one or more documents. Each of the data records are inserted into the document. This forms a hierarchy which can be visualized as:<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"900\" height=\"500\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/Fauna.png?resize=900%2C500&#038;ssl=1\" alt=\"\" class=\"wp-image-326542\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/Fauna.png?w=900&amp;ssl=1 900w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/Fauna.png?resize=300%2C167&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/Fauna.png?resize=768%2C427&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Here the data record can be arrays, objects, or of any other supported types. With the Fauna data model we can create indexes, enforce constraints. Fauna indexes can combine data from multiple collections and are capable of performing computations.&nbsp;<\/p>\n\n\n\n<p>At this stage, Fauna already created a couple of collections for us, ShopNote and Item. As we start inserting records, we will see the Documents are also getting created. We will be able view and query the records and utilize the power of indexes. You may see the data model structure appearing in your Fauna dashboard like this in a while,<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1530\" height=\"707\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/pasted-image-0.png?resize=1530%2C707&#038;ssl=1\" alt=\"\" class=\"wp-image-326543\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/pasted-image-0.png?w=1530&amp;ssl=1 1530w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/pasted-image-0.png?resize=300%2C139&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/pasted-image-0.png?resize=1024%2C473&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/pasted-image-0.png?resize=768%2C355&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/pasted-image-0.png?resize=1000%2C462&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Point to note here, each of the documents is identified by the unique <code>ref<\/code> attribute. There is also a <code>ts<\/code> field which returns the timestamp of the recent modification to the document. The data record is part of the <code>data<\/code> field. This understanding is really important when you interact with collections, documents, records using FQL built-in functions. However, in this article we will interact with them using GraphQL queries with Netlify Functions.<\/p>\n\n\n\n<p>With all these understanding, let us start using our Shopenotes database that is created successfully and ready for use.&nbsp;<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-let-us-try-some-queries\">Let us try some queries<\/h4>\n\n\n<p>Even though we have imported the schema and underlying things are in place, we do not have a document yet. Let us create one. To do that, copy the following GraphQL mutation query to the left panel of the GraphQL playground screen and execute.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">mutation {\n  createShopNote(data: {\n    name: \"My Shopping List\"\n    description: \"This is my today's list to buy from Tom's shop\"\n    items: {\n      create: [\n        { name: \"Butther - 1 pk\", urgent: true }\n        { name: \"Milk - 2 ltrs\", urgent: false }\n        { name: \"Meat - 1lb\", urgent: false }\n      ]\n    }\n  }) {\n    _id\n    name\n    description\n    items {\n      data {\n        name,\n        urgent\n      }\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<p>Note, as Fauna already created the GraphQL mutation classes in the background, we can directly use it like, <code>createShopNote<\/code>. Once successfully executed, you can see the response of a ShopNote creation at the right side of the editor.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1549\" height=\"925\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/crate_query.png?resize=1549%2C925&#038;ssl=1\" alt=\"\" class=\"wp-image-326545\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/crate_query.png?w=1549&amp;ssl=1 1549w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/crate_query.png?resize=300%2C179&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/crate_query.png?resize=1024%2C611&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/crate_query.png?resize=768%2C459&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/crate_query.png?resize=1536%2C917&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/crate_query.png?resize=1000%2C597&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>The newly created <code>ShopNote<\/code> document has all the required details we have passed while creating it. We have seen <code>ShopNote<\/code> has a one-to-many relation with <code>Item<\/code>. You can see the shopnote response has the item data nested within it. In this case, one shopnote has three items. This is really powerful. Once the schema and relation are defined, the document will be created automatically keeping that relation in mind.<\/p>\n\n\n\n<p>Now, let us try fetching all the shopnotes. Here is the GraphQL query:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">query {\n    allShopNotes {\n    data {\n      _id\n      name\n      description\n      updatedAt\n      items {\n        data {\n          name,\n          checked,\n          urgent\n        }\n      }\n    }\n  }\n}<\/code><\/pre>\n\n\n\n<p>Let\u2019s try the query in the playground as before:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1547\" height=\"916\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/query.png?resize=1547%2C916&#038;ssl=1\" alt=\"\" class=\"wp-image-326547\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/query.png?w=1547&amp;ssl=1 1547w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/query.png?resize=300%2C178&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/query.png?resize=1024%2C606&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/query.png?resize=768%2C455&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/query.png?resize=1536%2C909&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/query.png?resize=1000%2C592&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Now we have a database with a schema and it is fully operational with creating and fetch functionality. Similarly, we can create queries for adding, updating, removing items to a shopnote and also updating and deleting a shopnote. These queries will be used at a later point in time when we create the serverless functions.<\/p>\n\n\n\n<p>If you are interested to run other queries in the GraphQL editor, you can <a href=\"https:\/\/github.com\/atapas\/shopnote\/tree\/main\/queries\" rel=\"noopener\">find them from here<\/a>,<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-create-a-server-secret-key\">Create a Server Secret Key<\/h4>\n\n\n<p>Next, we need to create a secured server key to make sure the access to the database is authenticated and authorized.<\/p>\n\n\n\n<p>Click on the SECURITY option available in the FaunaDB interface to create the key, like so,<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/dnbZmi7WBmwOUTSJlWmP8ZYZpOh-T9LUTMI4D4JrAlZ3kGMOh6uRgyIgKeScAHzZ60jjCyBsSW4Y4y6OcdTpEzfd7KoIm4nt-WxKPjmC4FAK09-ua2GP24eWAcLy8vgT3u4aoAJd\" alt=\"\"\/><\/figure>\n\n\n\n<p>On successful creation of the key, you will be able to view the key\u2019s secret. Make sure to copy and save it somewhere safe.<\/p>\n\n\n\n<figure class=\"wp-block-image\"><img decoding=\"async\" src=\"https:\/\/lh6.googleusercontent.com\/U-Yd5eSSRcSAVGNbKY-1H-kfq5F-EPCAKWgp8QZrNcCCFRVLoz1Jh_bMT8bzKS62MBVEiwB00-diljHfOULJZ58XeqT6jAgEbTo-m96a_Qo8Rqmr1kDd-T6d9z7QlUhRpDVk3O9k\" alt=\"\"\/><\/figure>\n\n\n\n<p>We do not want anyone else to know about this key. It is not even a good idea to commit it to the source code repository. To maintain this secrecy, create an empty file called <code>.env<\/code> at the root level of your project folder.<\/p>\n\n\n\n<p>Edit the <code>.env<\/code> file and add the following line to it (paste the generated server key in the place of, <code>&lt;YOUR_FAUNA_KEY_SECRET&gt;<\/code>).<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">FAUNA_SERVER_SECRET=&lt;YOUR_FAUNA_KEY_SECRET><\/code><\/pre>\n\n\n\n<p>Add a <code>.gitignore<\/code> file and write the following content to it. This is to make sure we do not commit the .env file to the source code repo accidentally. We are also ignoring node_modules as a best practice.<\/p>\n\n\n\n<pre rel=\".gitignore\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">.env<\/code><\/pre>\n\n\n\n<p>We are done with all that had to do with Fauna\u2019s setup. Let us move to the next phase to create serverless functions and APIs to access data from the Fauna data store. At this stage, the directory structure may look like this,<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" decoding=\"async\" width=\"461\" height=\"347\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/Dir_structure_1.png?resize=461%2C347&#038;ssl=1\" alt=\"\" class=\"wp-image-326548\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/Dir_structure_1.png?w=461&amp;ssl=1 461w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/Dir_structure_1.png?resize=300%2C226&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-set-up-netlify-serverless-functions\">Set up Netlify Serverless Functions<\/h3>\n\n\n<p><a href=\"https:\/\/www.netlify.com\/\" rel=\"noopener\">Netlify<\/a> is a great platform to create hassle-free serverless functions. These functions can interact with databases, file-system, and in-memory objects.<\/p>\n\n\n\n<p><a href=\"https:\/\/www.netlify.com\/products\/functions\/\" rel=\"noopener\">Netlify functions<\/a> are powered by AWS Lambda. Setting up <a href=\"https:\/\/aws.amazon.com\/lambda\/\" rel=\"noopener\">AWS Lambdas<\/a> on our own can be a fairly complex job. With Netlify, we will simply set a folder and drop our functions. Writing simple functions automatically becomes APIs.&nbsp;<\/p>\n\n\n\n<p>First, <a href=\"https:\/\/app.netlify.com\/signup\" rel=\"noopener\">create an account<\/a> with Netlify. This is free and just like the FaunaDB free tier, Netlify is also very flexible.<\/p>\n\n\n\n<p>Now we need to install a few dependencies using either npm or yarn. Make sure you have <a href=\"https:\/\/nodejs.org\/en\/download\/\" rel=\"noopener\">nodejs<\/a> installed. Open a command prompt at the root of the project folder. Use the following command to initialize the project with node dependencies,<\/p>\n\n\n\n<pre rel=\"Terminal\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">npm init -y<\/code><\/pre>\n\n\n\n<p>Install the netlify-cli utility so that we can run the serverless function locally.<\/p>\n\n\n\n<pre rel=\"Terminal\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">npm install netlify-cli -g<\/code><\/pre>\n\n\n\n<p>Now we will install two important libraries, axios and dotenv. axios will be used for making the HTTP calls and dotenv will help to load the <code>FAUNA_SERVER_SECRET<\/code> environment variable from the <code>.env<\/code> file into <code>process.env<\/code>.<\/p>\n\n\n\n<pre rel=\"Terminal\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">yarn add axios dotenv<\/code><\/pre>\n\n\n\n<p>Or:<\/p>\n\n\n\n<pre rel=\"Terminal\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">npm i axios dotenv<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-create-serverless-functions\">Create serverless functions<\/h4>\n\n\n<p>Create a folder with the name, <code>functions<\/code> at the root of the project folder. We are going to keep all serverless functions under it.<\/p>\n\n\n\n<p>Now create a subfolder called <code>utils<\/code> under the <code>functions<\/code> folder. Create a file called <code>query.js<\/code> under the <code>utils<\/code> folder. We will need some common code to query the data store for all the serverless functions. The common code will be in the <code>query.js<\/code> file.<\/p>\n\n\n\n<p>First we import the axios library functionality and load the <code>.env<\/code> file. Next, we export an async function that takes the query and variables. Inside the async function, we make calls using axios with the secret key. Finally, we return the response.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ query.js\n \nconst axios = require(\"axios\");\nrequire(\"dotenv\").config();\n \nmodule.exports = async (query, variables) => {\n  const result = await axios({\n      url: \"https:\/\/graphql.fauna.com\/graphql\",\n      method: \"POST\",\n      headers: {\n          Authorization: `Bearer ${process.env.FAUNA_SERVER_SECRET}`\n      },\n      data: {\n        query,\n        variables\n      }\n });\n \n return result.data;\n};<\/code><\/pre>\n\n\n\n<p>Create a file with the name, <code>get-shopnotes.js<\/code> under the <code>functions<\/code> folder. We will perform a query to fetch all the shop notes.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/ get-shopnotes.js\n \nconst query = require(\".\/utils\/query\");\n \nconst GET_SHOPNOTES = `\n   query {\n       allShopNotes {\n       data {\n         _id\n         name\n         description\n         updatedAt\n         items {\n           data {\n             _id,\n             name,\n             checked,\n             urgent\n         }\n       }\n     }\n   }\n }  \n`;\n \nexports.handler = async () => {\n  const { data, errors } = await query(GET_SHOPNOTES);\n \n  if (errors) {\n    return {\n      statusCode: 500,\n      body: JSON.stringify(errors)\n    };\n  }\n \n  return {\n    statusCode: 200,\n    body: JSON.stringify({ shopnotes: data.allShopNotes.data })\n  };\n};<\/code><\/pre>\n\n\n\n<p>Time to test the serverless function like an API. We need to do a one time setup here. Open a command prompt at the root of the project folder and type:<\/p>\n\n\n\n<pre rel=\"Terminal\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">netlify login<\/code><\/pre>\n\n\n\n<p>This will open a browser tab and ask you to login and authorize access to your Netlify account. Please click on the Authorize button.<\/p>\n\n\n\n<p>Next, create a file called, <code>netlify.toml<\/code> at the root of your project folder and add this content to it,<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">[build]\n    functions = \"functions\"\n \n[[redirects]]\n   from = \"\/api\/*\"\n   to = \"\/.netlify\/functions\/:splat\"\n   status = 200<\/code><\/pre>\n\n\n\n<p>This is to tell Netlify about the location of the functions we have written so that it is known at the build time.<\/p>\n\n\n\n<p>Netlify automatically provides the APIs for the functions. The URL to access the API is in this form, <code>\/.netlify\/functions\/get-shopnotes<\/code> which may not be very user-friendly. We have written a redirect to make it like, <code>\/api\/get-shopnotes<\/code>.<\/p>\n\n\n\n<p>Ok, we are done. Now in command prompt type,<\/p>\n\n\n\n<pre rel=\"Terminal\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">netlify dev<\/code><\/pre>\n\n\n\n<p>By default the app will run on localhost:8888 to access the serverless function as an API.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"974\" height=\"394\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/netlify_dev.png?resize=974%2C394&#038;ssl=1\" alt=\"\" class=\"wp-image-326550\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/netlify_dev.png?w=974&amp;ssl=1 974w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/netlify_dev.png?resize=300%2C121&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/netlify_dev.png?resize=768%2C311&amp;ssl=1 768w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Open a browser tab and try this URL, <code>http:\/\/localhost:8888\/api\/get-shopnotes<\/code>:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full is-resized\"><img loading=\"lazy\" decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/get_netlify_function.png?resize=629%2C638&#038;ssl=1\" alt=\"\" class=\"wp-image-326551\" width=\"629\" height=\"638\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/get_netlify_function.png?w=839&amp;ssl=1 839w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/get_netlify_function.png?resize=296%2C300&amp;ssl=1 296w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/get_netlify_function.png?resize=768%2C778&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/get_netlify_function.png?resize=100%2C100&amp;ssl=1 100w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Congratulations!!! You have got your first serverless function up and running.<\/p>\n\n\n\n<p>Let us now write the next serverless function to create a <code>ShopNote<\/code>. This is going to be simple. Create a file named, <code>create-shopnote.js<\/code> under the <code>functions<\/code> folder. We need to write a mutation by passing the required parameters.&nbsp;<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/create-shopnote.js\n \nconst query = require(\".\/utils\/query\");\n \nconst CREATE_SHOPNOTE = `\n  mutation($name: String!, $description: String!, $updatedAt: Time!, $items: ShopNoteItemsRelation!) {\n    createShopNote(data: {name: $name, description: $description, updatedAt: $updatedAt, items: $items}) {\n      _id\n      name\n      description\n      updatedAt\n      items {\n        data {\n          name,\n          checked,\n          urgent\n        }\n      }\n    }\n  }\n`;\n \nexports.handler = async event => {\n  \n  const { name, items } = JSON.parse(event.body);\n  const { data, errors } = await query(\n    CREATE_SHOPNOTE, { name, items });\n \n  if (errors) {\n    return {\n      statusCode: 500,\n      body: JSON.stringify(errors)\n    };\n  }\n \n  return {\n    statusCode: 200,\n    body: JSON.stringify({ shopnote: data.createShopNote })\n  };\n};<\/code><\/pre>\n\n\n\n<p>Please give your attention to the parameter, <code>ShopNotesItemRelation<\/code>. As we had created a relation between the <code>ShopNote<\/code> and <code>Item<\/code> in our schema, we need to maintain that while writing the query as well.<\/p>\n\n\n\n<p>We have de-structured the payload to get the required information from the payload. Once we got those, we just called the query method to create a <code>ShopNote<\/code>.<\/p>\n\n\n\n<p>Alright, let\u2019s test it out. You can use postman or any other tools of your choice to test it like an API. Here is the screenshot from postman.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1460\" height=\"783\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/create_shopnote.png?resize=1460%2C783&#038;ssl=1\" alt=\"\" class=\"wp-image-326553\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/create_shopnote.png?w=1460&amp;ssl=1 1460w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/create_shopnote.png?resize=300%2C161&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/create_shopnote.png?resize=1024%2C549&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/create_shopnote.png?resize=768%2C412&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/create_shopnote.png?resize=1000%2C536&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Great, we can create a <code>ShopNote<\/code> with all the items we want to buy from a shopping mart. What if we want to add an item to an existing <code>ShopNote<\/code>? Let us create an API for it. With the knowledge we have so far, it is going to be really quick.<\/p>\n\n\n\n<p>Remember, <code>ShopNote<\/code> and <code>Item<\/code> are related? So to create an item, we have to mandatorily tell which <code>ShopNote<\/code> it is going to be part of. Here is our next serverless function to add an item to an existing <code>ShopNote<\/code>.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\/\/add-item.js\n \nconst query = require(\".\/utils\/query\");\n \nconst ADD_ITEM = `\n  mutation($name: String!, $urgent: Boolean!, $checked: Boolean!, $note: ItemNoteRelation!) {\n    createItem(data: {name: $name, urgent: $urgent, checked: $checked, note: $note}) {\n      _id\n      name\n      urgent\n      checked\n      note {\n        name\n      }\n    }\n  }\n`;\n \nexports.handler = async event => {\n  \n  const { name, urgent, checked, note} = JSON.parse(event.body);\n  const { data, errors } = await query(\n    ADD_ITEM, { name, urgent, checked, note });\n \n  if (errors) {\n    return {\n      statusCode: 500,\n      body: JSON.stringify(errors)\n    };\n  }\n \n  return {\n    statusCode: 200,\n    body: JSON.stringify({ item: data.createItem })\n  };\n};<\/code><\/pre>\n\n\n\n<p>We are passing the item properties like, name, if it is urgent, the check value and the note the items should be part of. Let\u2019s see how this API can be called using postman,<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1461\" height=\"693\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/add_item.png?resize=1461%2C693&#038;ssl=1\" alt=\"\" class=\"wp-image-326555\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/add_item.png?w=1461&amp;ssl=1 1461w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/add_item.png?resize=300%2C142&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/add_item.png?resize=1024%2C486&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/add_item.png?resize=768%2C364&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/add_item.png?resize=1000%2C474&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>As you see, we are passing the <code>id<\/code> of the note while creating an item for it.<\/p>\n\n\n\n<p>We won\u2019t bother writing the rest of the API capabilities in this article,&nbsp; like updating, deleting a shop note, updating, deleting items, etc. In case, you are interested, you can look into those functions from the <a href=\"https:\/\/github.com\/atapas\/shopnote\/tree\/main\/functions\" rel=\"noopener\">GitHub Repository<\/a>.<\/p>\n\n\n\n<p>However, after creating the rest of the API, you should have a directory structure like this,<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"453\" height=\"786\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/Dir_structure_2.png?resize=453%2C786&#038;ssl=1\" alt=\"\" class=\"wp-image-326556\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/Dir_structure_2.png?w=453&amp;ssl=1 453w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/Dir_structure_2.png?resize=173%2C300&amp;ssl=1 173w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>We have successfully created a data store with Fauna, set it up for use, created an API backed by serverless functions, using Netlify Functions, and tested those functions\/routes.<\/p>\n\n\n\n<p>Congratulations, you did it. Next, let us build some user interfaces to show the shop notes and add items to it. To do that, we will use Gatsby.js (aka, Gatsby) which is a super cool, React-based static site generator.<\/p>\n\n\n\n<p>The following section requires you to have basic knowledge of ReactJS. If you are new to it, <a href=\"https:\/\/reactjs.org\/tutorial\/tutorial.html\" rel=\"noopener\">you can learn it from here<\/a>. If you are familiar with any other user interface technologies like, Angular, Vue, etc feel free to skip the next section and build your own using the APIs explained so far.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-set-up-the-user-interfaces-using-gatsby\">Set up the User Interfaces using Gatsby<\/h3>\n\n\n<p>We can set up a Gatsby project either using the <a href=\"https:\/\/www.gatsbyjs.com\/docs\/quick-start\/\" rel=\"noopener\">starter projects<\/a> or initialize it manually. We will build things from scratch to understand it better.<\/p>\n\n\n\n<p>Install gatsby-cli globally.&nbsp;<\/p>\n\n\n\n<pre rel=\"Terminal\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">npm install -g gatsby-cli<\/code><\/pre>\n\n\n\n<p>Install gatsby, react and react-dom<\/p>\n\n\n\n<pre rel=\"Terminal\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">yarn add gatsby react react-dom<\/code><\/pre>\n\n\n\n<p>Edit the scripts section of the <code>package.json<\/code> file to add a script for <code>develop<\/code>.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">\"scripts\": {\n  \"develop\": \"gatsby develop\"\n }<\/code><\/pre>\n\n\n\n<p>Gatsby projects need a special configuration file called, <code>gatsby-config.js<\/code>. Please create a file named, <code>gatsby-config.js<\/code> at the root of the project folder with the following content,<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">module.exports = {\n  \/\/ keep it empty    \n}<\/code><\/pre>\n\n\n\n<p>Let\u2019s create our first page with Gatsby. Create a folder named, <code>src<\/code> at the root of the project folder. Create a subfolder named <code>pages<\/code> under <code>src<\/code>. Create a file named, <code>index.js<\/code> under <code>src\/pages<\/code> with the following content:<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">import React, { useEffect, useState } from 'react';    \n \nexport default () => {    \n  const [loading, setLoading ] = useState(false);    \n  const [shopnotes, setShopnotes] = useState(null);    \n \n  return (\n    &lt;>    \n      &lt;h1>Shopnotes to load here...&lt;\/h1>\n    &lt;\/>        \n  )    \n}\n<\/code><\/pre>\n\n\n\n<p>Let&#8217;s run it. We generally need to use the command <code>gatsby<\/code> develop to run the app locally. As we have to run the client side application with netlify functions, we will continue to use, <code>netlify dev<\/code> command.<\/p>\n\n\n\n<pre rel=\"Terminal\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">netlify dev<\/code><\/pre>\n\n\n\n<p>That&#8217;s all. Try accessing the page at <code>http:\/\/localhost:8888<\/code>. You should see something like this,<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"630\" height=\"250\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/initial_screen.png?resize=630%2C250&#038;ssl=1\" alt=\"\" class=\"wp-image-326558\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/initial_screen.png?w=630&amp;ssl=1 630w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/initial_screen.png?resize=300%2C119&amp;ssl=1 300w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Gatsby project build creates a couple of output folders which you may not want to push to the source code repository. Let us add a few entries to the <code>.gitignore<\/code> file so that we do not get unwanted noise.<\/p>\n\n\n\n<p>Add <code>.cache<\/code>, <code>node_modules<\/code> and <code>public<\/code> to the <code>.gitignore<\/code> file. Here is the full content of the file:<\/p>\n\n\n\n<pre rel=\".gitignore\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">.cache\npublic\nnode_modules\n*.env<\/code><\/pre>\n\n\n\n<p>At this stage, your project directory structure should match with the following:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"405\" height=\"685\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/Dir_structure_3.png?resize=405%2C685&#038;ssl=1\" alt=\"\" class=\"wp-image-326559\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/Dir_structure_3.png?w=405&amp;ssl=1 405w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/Dir_structure_3.png?resize=177%2C300&amp;ssl=1 177w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-thinking-of-the-ui-components\">Thinking of the UI components<\/h4>\n\n\n<p>We will create small logical components to achieve the <code>ShopNote<\/code> user interface. The components are:<\/p>\n\n\n\n<ul><li><strong>Header:<\/strong> A header component consists of the Logo, heading and the create button to create a shopnote.<\/li><li><strong>Shopenotes:<\/strong> This component will contain the list of the shop note (<code>Note<\/code> component).<\/li><li><strong>Note:<\/strong> This is individual notes. Each of the notes will contain one or more items.<\/li><li><strong>Item:<\/strong> Each of the items. It consists of the item name and actions to add, remove, edit an item.<\/li><\/ul>\n\n\n\n<p>You can see the sections marked in the picture below:<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"919\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/shopnote_sections.png?resize=1600%2C919&#038;ssl=1\" alt=\"\" class=\"wp-image-326560\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/shopnote_sections.png?w=1600&amp;ssl=1 1600w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/shopnote_sections.png?resize=300%2C172&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/shopnote_sections.png?resize=1024%2C588&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/shopnote_sections.png?resize=768%2C441&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/shopnote_sections.png?resize=1536%2C882&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/shopnote_sections.png?resize=1000%2C574&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-install-a-few-more-dependencies\">Install a few more dependencies<\/h4>\n\n\n<p>We will install a few more dependencies required for the user interfaces to be functional and look better. Open a command prompt at the root of the project folder and install these dependencies,<\/p>\n\n\n\n<pre rel=\"Terminal\" class=\"wp-block-csstricks-code-block language-none\" data-line=\"\"><code markup=\"tt\">yarn add bootstrap lodash moment react-bootstrap react-feather shortid<\/code><\/pre>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-lets-load-all-the-shop-notes\">Lets load all the Shop Notes<\/h4>\n\n\n<p>We will use the Reactjs <code>useEffect<\/code> hook to make the API call and update the shopnotes state variables. Here is the code to fetch all the shop notes.&nbsp;<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">useEffect(() => {\n  axios(\"\/api\/get-shopnotes\").then(result => {\n    if (result.status !== 200) {\n      console.error(\"Error loading shopnotes\");\n      console.error(result);\n      return;\n    }\n    setShopnotes(result.data.shopnotes);\n    setLoading(true);\n  });\n}, [loading]);<\/code><\/pre>\n\n\n\n<p>Finally, let us change the return section to use the shopnotes data. Here we are checking if the data is loaded. If so, render the <code>Shopnotes<\/code> component by passing the data we have received using the API.<\/p>\n\n\n\n<pre rel=\"JavaScript\" class=\"wp-block-csstricks-code-block language-javascript\" data-line=\"\"><code markup=\"tt\">return (\n  &lt;div className=\"main\">\n    &lt;Header \/>\n    {\n      loading ? &lt;Shopnotes data = { shopnotes } \/> : &lt;h1>Loading...&lt;\/h1>\n    }\n  &lt;\/div>\n); \n<\/code><\/pre>\n\n\n\n<p>You can find the entire index.js file code <a href=\"https:\/\/github.com\/atapas\/shopnote\/blob\/main\/src\/pages\/index.js\" rel=\"noopener\">from here<\/a> The <code>index.js<\/code> file creates the initial route(<code>\/<\/code>) for the user interface. It uses other components like, <code>Shopnotes<\/code>, <code>Note<\/code> and <code>Item<\/code> to make the UI fully operational. We will not go to a great length to understand each of these UI components. You can create a folder called components under the <code>src<\/code> folder and copy the component files <a href=\"https:\/\/github.com\/atapas\/shopnote\/tree\/main\/src\/components\" rel=\"noopener\">from here<\/a>.<\/p>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-finally-the-index-css-file\">Finally, the <code>index.css<\/code> file<\/h4>\n\n\n<p>Now we just need a css file to make things look better. Create a file called <code>index.css<\/code> under the <code>pages<\/code> folder. Copy the content <a href=\"https:\/\/github.com\/atapas\/shopnote\/blob\/main\/src\/pages\/index.css\" rel=\"noopener\">from this CSS file<\/a> to the <code>index.css<\/code> file.<\/p>\n\n\n\n<pre rel=\"HTML\" class=\"wp-block-csstricks-code-block language-markup\" data-line=\"\"><code markup=\"tt\">import 'bootstrap\/dist\/css\/bootstrap.min.css';\nimport '.\/index.css'<\/code><\/pre>\n\n\n\n<p>That\u2019s all. We are done. You should have the app up and running with all the shop notes created so far. We are not getting into the explanation of each of the actions on items and notes here not to make the article very lengthy. You can find all the code in the GitHub repo. At this stage, the directory structure may look like this,<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1600\" height=\"919\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/shopnote_sections-1.png?resize=1600%2C919&#038;ssl=1\" alt=\"\" class=\"wp-image-326562\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/shopnote_sections-1.png?w=1600&amp;ssl=1 1600w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/shopnote_sections-1.png?resize=300%2C172&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/shopnote_sections-1.png?resize=1024%2C588&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/shopnote_sections-1.png?resize=768%2C441&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/shopnote_sections-1.png?resize=1536%2C882&amp;ssl=1 1536w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/shopnote_sections-1.png?resize=1000%2C574&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n<h4 class=\"wp-block-heading\" id=\"h-a-small-exercise\">A small exercise<\/h4>\n\n\n<p>I have not included the Create Note UI implementation in the GitHib repo. However, we have created the API already. How about you build the front end to add a shopnote? I suggest implementing a button in the header, which when clicked, creates a shopnote using the API we\u2019ve already defined.&nbsp;Give it a try!<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-let-s-deploy\">Let\u2019s Deploy<\/h3>\n\n\n<p>All good so far. But there is one issue. We are running the app locally. While productive, it\u2019s not ideal for the public to access. Let&#8217;s fix that with a few simple steps.<\/p>\n\n\n\n<p>Make sure to commit all the code changes to the Git repository, say, shopnote. You have an account with Netlify already. Please login and click on the button, New site from Git.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1162\" height=\"157\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/deploy_1.png?resize=1162%2C157&#038;ssl=1\" alt=\"\" class=\"wp-image-326563\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/deploy_1.png?w=1162&amp;ssl=1 1162w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/deploy_1.png?resize=300%2C41&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/deploy_1.png?resize=1024%2C138&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/deploy_1.png?resize=768%2C104&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/deploy_1.png?resize=1000%2C135&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Next, select the relevant Git services where your project source code is pushed. In my case, it is GitHub.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1340\" height=\"681\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/deploy_2.png?resize=1340%2C681&#038;ssl=1\" alt=\"\" class=\"wp-image-326564\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/deploy_2.png?w=1340&amp;ssl=1 1340w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/deploy_2.png?resize=300%2C152&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/deploy_2.png?resize=1024%2C520&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/deploy_2.png?resize=768%2C390&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/deploy_2.png?resize=1000%2C508&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Browse the project and select it.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1254\" height=\"814\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/deploy_3.png?resize=1254%2C814&#038;ssl=1\" alt=\"\" class=\"wp-image-326565\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/deploy_3.png?w=1254&amp;ssl=1 1254w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/deploy_3.png?resize=300%2C195&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/deploy_3.png?resize=1024%2C665&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/deploy_3.png?resize=768%2C499&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/deploy_3.png?resize=1000%2C649&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>Provide the configuration details like the build command, publish directory as shown in the image below. Then click on the button to provide advanced configuration information. In this case, we will pass the <code>FAUNA_SERVER_SECRET<\/code> key value pair from the .env file. Please copy paste in the respective fields. Click on deploy.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"1153\" height=\"1042\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/deploy_4.png?resize=1153%2C1042&#038;ssl=1\" alt=\"\" class=\"wp-image-326566\" srcset=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/deploy_4.png?w=1153&amp;ssl=1 1153w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/deploy_4.png?resize=300%2C271&amp;ssl=1 300w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/deploy_4.png?resize=1024%2C925&amp;ssl=1 1024w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/deploy_4.png?resize=768%2C694&amp;ssl=1 768w, https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/11\/deploy_4.png?resize=1000%2C904&amp;ssl=1 1000w\" sizes=\"(min-width: 735px) 864px, 96vw\" data-recalc-dims=\"1\" \/><\/figure>\n\n\n\n<p>You should see the build successful in a couple of minutes and the site will be live right after that.<\/p>\n\n\n<h3 class=\"wp-block-heading\" id=\"h-in-summary\">In Summary<\/h3>\n\n\n<p>To summarize:<\/p>\n\n\n\n<ul><li>The Jamstack is a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup.<\/li><li>70% &#8211; 80% of the features that once required a custom back-end can now be done either on the front end or there are APIs, services to take advantage of.<\/li><li><a href=\"https:\/\/synd.co\/39AAI73\" rel=\"noopener\">Fauna<\/a> provides the data API for the client-serverless applications. We can use GraphQL or Fauna\u2019s FQL to talk to the store.<\/li><li>Netlify serverless functions can be easily integrated with Fauna using the GraphQL mutations and queries. This approach may be useful when you have the need of&nbsp; custom authentication built with Netlify functions and a flexible solution like Auth0.<\/li><li>Gatsby and other static site generators are great contributors to the Jamstack to give a fast end user experience.<\/li><\/ul>\n\n\n\n<p>Thank you for reading this far! Let\u2019s connect. You can @ me on <a href=\"https:\/\/twitter.com\/tapasadhikary\" rel=\"noopener\">Twitter (@tapasadhikary)<\/a> with comments, or feel free to follow.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>The Jamstack is a modern web development architecture based on client-side JavaScript, reusable APIs, and prebuilt Markup. The key aspects of a Jamstack application are the following: The entire app runs on a CDN (or ADN). CDN stands for Content Delivery Network and an ADN is an Application Delivery Network. Everything lives in Git. Automated [&hellip;]<\/p>\n","protected":false},"author":279979,"featured_media":326622,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":"","jetpack_publicize_message":"How to create a client-serverless Jamstack app using Netlify, Gatsby and @fauna by @tapasadhikary","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[508],"tags":[],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/list-app.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":288467,"url":"https:\/\/css-tricks.com\/jamstack-more-like-shamstack\/","url_meta":{"origin":326538,"position":0},"title":"JAMstack? More like SHAMstack.","date":"June 5, 2019","format":false,"excerpt":"I'm a fan of the whole JAMstack thing. It seems like a healthy web movement. I'm looking forward to both of the upcoming conferences. Of any web trend, #jamstack seems like it will be the least regrettable.\u2014 Chris Coyier (@chriscoyier) May 22, 2019 I feel like the acronym might not\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/jam-stack.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":301553,"url":"https:\/\/css-tricks.com\/jamstack-vs-jamstack\/","url_meta":{"origin":326538,"position":1},"title":"JAMstack vs. Jamstack","date":"January 21, 2020","format":false,"excerpt":"It's just a word to evoke the idea that serving as much as you can statically while using client-side code and hitting serverless APIs for any needs after that. The \"official website\" changed their language from JAMstack (evoking the JavaScript, APIs, and Markup acronym) to Jamstack. It's nothing to be\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/jam-stack.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":298280,"url":"https:\/\/css-tricks.com\/jamstack-fugu-and-houdini\/","url_meta":{"origin":326538,"position":2},"title":"JAMstack, Fugu, and Houdini","date":"November 19, 2019","format":false,"excerpt":"What has me really excited about building websites recently is the fact that we, as front-end developers, have the power to do so much more. Only a few years ago, I would need a whole team of developers to accomplish what can now be done with just a few amazing\u2026","rel":"","context":"In &quot;2019 End-of-Year Thoughts&quot;","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":353496,"url":"https:\/\/css-tricks.com\/the-semantics-of-jamstack\/","url_meta":{"origin":326538,"position":3},"title":"The Semantics of Jamstack","date":"October 25, 2021","format":false,"excerpt":"The past year has seen a healthy debate around the term 'Jamstack' as the definition gets stretched to include new use cases. I recently posted my take on a Jamstack definition in \u201cStatic vs. Dynamic vs. Jamstack: Where\u2019s The Line?\u201d In this article, I want to look at the evolution\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/10\/jamstack-logo.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":310812,"url":"https:\/\/css-tricks.com\/5-myths-about-jamstack\/","url_meta":{"origin":326538,"position":4},"title":"5 Myths About Jamstack","date":"June 9, 2020","format":false,"excerpt":"Jamstack isn't necessarily new. The term was officially coined in 2016, but the technologies and architecture it describes have been around well before that. Jamstack has received a massive dose of attention recently, with articles about it appearing in major sites and publications and new Jamstack-focused events, newsletters, podcasts, and\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/jam-stack.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":295944,"url":"https:\/\/css-tricks.com\/random-notes-from-a-jamstack-roundtable\/","url_meta":{"origin":326538,"position":5},"title":"Random Notes from a JAMstack Roundtable","date":"September 23, 2019","format":false,"excerpt":"I hosted a JAMstack roundtable discussion at Web Unleashed this past weekend. Just a few random notes from that experience. I was surprised at first that there really is confusion that the \"M\" in Jamstack stands for \"Markdown\" (the language that compiles to HTML) rather than \"Markup\" (the \"M\" in\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2019\/06\/jam-stack.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"featured_media_src_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/12\/list-app.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/326538"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/279979"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=326538"}],"version-history":[{"count":10,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/326538\/revisions"}],"predecessor-version":[{"id":330269,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/326538\/revisions\/330269"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/326622"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=326538"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=326538"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=326538"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}