{"id":273497,"date":"2018-07-16T06:55:21","date_gmt":"2018-07-16T13:55:21","guid":{"rendered":"http:\/\/css-tricks.com\/?p=273497"},"modified":"2018-07-16T06:55:21","modified_gmt":"2018-07-16T13:55:21","slug":"create-your-own-serverless-api","status":"publish","type":"post","link":"https:\/\/css-tricks.com\/create-your-own-serverless-api\/","title":{"rendered":"Create your own Serverless API"},"content":{"rendered":"<p>If you don\u2019t already know of it, Todd Motto has <a href=\"https:\/\/github.com\/toddmotto\/public-apis\" rel=\"noopener\">this great list of public APIs<\/a>. It\u2019s awesome if you\u2019re trying out a new framework or new layout pattern and want to hit the ground running without fussing with the content.<\/p>\n<p>But what if you want or need to make your own API? Serverless can help create a nice one for data you\u2019d like to expose for use. <\/p>\n<p>Serverless really shines for this use case, and hopefully this post makes it clear why. In a non-serverless paradigm, we have to pick something like express, we have to set up endpoints, we have to give your web server secured access to your database server, you have to deploy it, etc. In contrast, here we&#8217;ll be able to create an API in a few button clicks, with minor modifications.<\/p>\n<p><!--more--><\/p>\n<p>Here\u2019s the inspiration for this tutorial: I&#8217;ve been building a finder to search for new cocktails and grab random one. I originally started using ae public API but realized quickly that I found the contents limiting and wanted to shape my own.<\/p>\n<p><video controls><source src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/07\/cocktail-finder.m4v\" type=\"video\/mp4\">Your browser does not support the video tag.<\/video><\/p>\n<p>I\u2019m going to use Azure for these examples but it is possible to accomplish what we&#8217;re doing here with other cloud providers as well.<\/p>\n<h3>Make the Function<\/h3>\n<p>To get started, if you haven&#8217;t already, create a <a href=\"https:\/\/aka.ms\/onru44\" rel=\"noopener\">free Azure trial account<\/a>. Then go to the portal: <a href=\"https:\/\/aka.ms\/p1ipt7\" rel=\"noopener\">preview.portal.azure.com<\/a>. <\/p>\n<p>Next, we&#8217;ll hit the plus sign at the top left and select <b>Serverless Function App<\/b> from the list. We can then fill in the new name of our function and some options. It will pick up our resource group, subscription, and create a storage account from defaults. It will also use the location data from the resource group. So, happily, it&#8217;s pretty easy to populate the data.<\/p>\n<p>Next, we&#8217;ll create a new function using HTTP Trigger, and go to the <strong>Integrate<\/strong> tab to perform some actions:<\/p>\n<p><video controls><source src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/07\/rename-hello-better.mp4\" type=\"video\/mp4\">Your browser does not support the video tag.<\/video><\/p>\n<p>What we did was:<\/p>\n<ul>\n<li>Give the route template a name<\/li>\n<li>Change the authorization level to &#8220;Anonymous&#8221;<\/li>\n<li>Change the allowed HTTP methods to &#8220;Selected Method&#8221;<\/li>\n<li>Select &#8220;GET&#8221; for the selected method and unchecked everything else<\/li>\n<\/ul>\n<p>Now, if we get the function URL from the top right of our function, we&#8217;ll get this:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">https:\/\/sdras-api-demo.azurewebsites.net\/api\/hello<\/code><\/pre>\n<p>The initial boilerplate testing code that we&#8217;re given is:<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">module.exports = function (context, req) {\r\n  context.log('JavaScript HTTP trigger function processed a request.');\r\n\r\n  if (req.query.name || (req.body &amp;&amp; req.body.name)) {\r\n    context.res = {\r\n      \/\/ status: 200, \/* Defaults to 200 *\/\r\n      body: \"Hello \" + (req.query.name || req.body.name)\r\n    };\r\n  }\r\n  else {\r\n    context.res = {\r\n      status: 400,\r\n       body: \"Please pass a name on the query string or in the request body\"\r\n    };\r\n  }\r\n  context.done();\r\n};<\/code><\/pre>\n<p>Now if we go to the URL below, we\u2019ll see this:<\/p>\n<pre rel=\"\"><code class=\"language-javascript\">https:\/\/sdras-api-demo.azurewebsites.net\/api\/hello\/?name=TacoFace<\/code><\/pre>\n<figure id=\"post-273504\" class=\"align-right media-273504\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/Screen-Shot-2018-06-30-at-6.58.59-PM.png?ssl=1\" alt=\"Says hello TacoFace\" data-recalc-dims=\"1\" \/><\/figure>\n<p>There\u2019s more information in <a href=\"https:\/\/aka.ms\/AA1pqwg\" rel=\"noopener\">this blog post<\/a>, including API unification with Function Proxies. You can also use custom domains, not covered here.<\/p>\n<p>OK, now that that initial part is all set up, let\u2019s find a place to host our data.<\/p>\n<h3>Storing the data with CosmosDB<\/h3>\n<p>There are a number of ways to store the data for our function. I wanted to use Cosmos because it has one-click integration, making for a pretty low-friction choice. Get a <a href=\"https:\/\/aka.ms\/AA1pqwh\" rel=\"noopener\">free account here<\/a>. Once you&#8217;re in the portal, we&#8217;ll go to the plus sign in the top left to create a new service and this time select &#8220;CosmosDB.&#8221; In this case, we chose the SQL version.<\/p>\n<p>We have a few options for how to create our documents in the database. We&#8217;re merely making a small example for demo purposes, so we can manually create them by going to <strong>Data Explorer<\/strong> in the sidebar. In there, I made a database called <em>CocktailFinder<\/em>, a collection called <em>Cocktails<\/em>, and added each document. For our Partition Key, we&#8217;ll use <em>\/id<\/em>.<\/p>\n<figure id=\"post-273505\" class=\"align-right media-273505\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/collection.png?ssl=1\" alt=\"creating a collection\" data-recalc-dims=\"1\" \/><\/figure>\n<p>In real practice, you\u2019d probably either want to upload a JSON file by clicking the &#8220;Upload JSON&#8221; button or <a href=\"https:\/\/aka.ms\/AA1q689\" rel=\"noopener\">follow this article<\/a> for how to create the files with the CLI. <\/p>\n<p>We can add something in JSON format like this:<\/p>\n<pre rel=\"JSON\"><code class=\"language-javascript\">{\r\n \"id\": \"1\",\r\n \"drink\": \"gin_and_tonic\",\r\n \"ingredients\": [\r\n   \"2 ounces gin\",\r\n   \"2 lime wedges\",\r\n   \"3\u20134 ounces tonic water\"\r\n   ],\r\n \"directions\": \"Add gin to a highball glass filled with ice. Squeeze in lime wedges to taste, then add them to glass. Add tonic water; stir to combine.\",\r\n \"glass\": [\r\n   \"highball\",\r\n   \"hurricane\"\r\n   ],\r\n \"image\": \"https:\/\/images.unsplash.com\/photo-1523905491727-d82018a34d75?ixlib=rb-0.3.5&amp;ixid=eyJhcHBfaWQiOjEyMDd9&amp;s=52731e6d008be93fda7f5af1145eac12&amp;auto=format&amp;fit=crop&amp;w=750&amp;q=80\"\r\n}<\/code><\/pre>\n<p>And here is the example with all three that we\u2019ve created, and what Cosmos adds in:<\/p>\n<p><video controls><source src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/07\/cosmos-data.mp4\" type=\"video\/mp4\">Your browser does not support the video tag.<\/video><\/p>\n<h3>Have the function surface the data<\/h3>\n<p>OK, now we\u2019ve got some dummy data to work with, so let\u2019s connect it to our serverless function so we can finish up our API! <\/p>\n<p>If we go back to our function in the portal and click <strong>Integrate<\/strong> in the sidebar again, there\u2019s a middle column that called <em>Inputs<\/em>. Here, we can click on the plus that says &#8220;+ New Inputs&#8221; and a few options come up. We\u2019ll click the CosmosDB option and &#8220;Create.&#8221;<\/p>\n<figure id=\"post-273513\" class=\"align-right media-273513\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/Screen-Shot-2018-06-30-at-9.32.30-PM.png?ssl=1\" alt=\"Showing in the portal the button to create a connection with CosmosDB\" data-recalc-dims=\"1\" \/><\/figure>\n<p>A prompt will come up that asks us to provide information about our Database and Collection. If you recall, the <code>databaseName<\/code> was <em>CocktailFinder<\/em> and the <code>collectionName<\/code> was <em>Cocktails<\/em>. We also want to use the same <code>partitionKey<\/code> which was <em>\/id<\/em>. We\u2019ll use all the other defaults.<\/p>\n<p>Now if we go to our <code>function.jso<\/code>, you can see that it\u2019s now been updated with:<\/p>\n<pre rel=\"JSON\"><code class=\"language-javascript\">{\r\n  \"type\": \"documentDB\",\r\n  \"name\": \"inputDocument\",\r\n  \"databaseName\": \"CocktailFinder\",\r\n  \"collectionName\": \"Cocktails\",\r\n  \"partitionKey\": \"\/id\",\r\n  \"connection\": \"sdrassample_DOCUMENTDB\",\r\n  \"direction\": \"in\"\r\n}<\/code><\/pre>\n<p>We\u2019re going to use that <code>inputDocument<\/code> to update our testing function to reflect that\u2019s what we\u2019re trying to access. I also add in the status and log frequently, but that\u2019s optional.<\/p>\n<pre rel=\"JavaScript\"><code class=\"language-javascript\">module.exports = function (context, req) {\r\n  context.log('JavaScript HTTP trigger function processed a request.');\r\n\r\n  if (context.bindings) {\r\n    context.log('Get ready');\r\n    context.res = {status: 200, body: context.bindings.inputDocument};\r\n    context.log(context.res);\r\n  }\r\n  else {\r\n    context.res = {\r\n      status: 400,\r\n      body: \"Something went wrong\"\r\n    };\r\n  }\r\n  context.done();\r\n};<\/code><\/pre>\n<p>Now you can see our function at work!<\/p>\n<p><video controls><source src=\"https:\/\/css-tricks.com\/wp-content\/uploads\/2018\/07\/running-api.mp4\" type=\"video\/mp4\">Your browser does not support the video tag.<\/video><\/p>\n<h4>CORS!<\/h4>\n<p>Can\u2019t forget the <abbr title=\"Cross-Origin Resource Sharing\">CORS<\/abbr>. Back in the portal, we\u2019ll click on the function name and click on <strong>Platform Features<\/strong>. CORS is listed under the API heading.<\/p>\n<figure id=\"post-273510\" class=\"align-right media-273510\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/Screen-Shot-2018-07-01-at-3.06.51-PM.png?ssl=1\" alt=\"Showing where CORS is in the dashboard\" data-recalc-dims=\"1\" \/><\/figure>\n<p>We can add any of the allowed origins here. Remember, this includes <code>localhost<\/code>.<\/p>\n<figure id=\"post-273511\" class=\"align-right media-273511\"><img decoding=\"async\" src=\"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/Screen-Shot-2018-07-01-at-3.07.05-PM.png?ssl=1\" alt=\"in the CORS template, you can add in the URL\" data-recalc-dims=\"1\" \/><\/figure>\n<h3>Serve it up!<\/h3>\n<p>Now to make sure the API is working and we can access it&#8217;s data from an application, we\u2019ll use an <a href=\"https:\/\/github.com\/axios\/axios\" rel=\"noopener\">axios call<\/a>. I have a really barebones CodePen implementation so that you can see how that might work. In Vue, we\u2019re hooking into the <code>created<\/code> <a href=\"https:\/\/scotch.io\/tutorials\/demystifying-vue-lifecycle-methods\" rel=\"noopener\">lifecycle method<\/a> and making the GET request, in order to output the JSON data to the page. <\/p>\n<p data-height=\"300\" style=\"height: 300px; display: flex; align-items: center; justify-content: center; border: 2px solid black; margin: 1rem 0; padding: 1rem; overflow: auto;\" data-theme-id=\"1\" data-slug-hash=\"7126776cf121c7f0c5f3f6bea85943c5\" data-default-tab=\"js,result\" data-user=\"sdras\" data-embed-version=\"2\" data-pen-title=\"Show API Output, beginning of Vue.js integration\" class=\"codepen\">See the Pen <a href=\"https:\/\/codepen.io\/sdras\/pen\/7126776cf121c7f0c5f3f6bea85943c5\/\" rel=\"noopener\">Show API Output, beginning of Vue.js integration<\/a> by Sarah Drasner (<a href=\"https:\/\/codepen.io\/sdras\" rel=\"noopener\">@sdras<\/a>) on <a href=\"https:\/\/codepen.io\" rel=\"noopener\">CodePen<\/a>.<\/p>\n<p>From here, you have all that data to play with, and you can store whatever you like in whatever form you fancy. You can use something like Vue, React, or Angular to create interfaces with the content we stored in our database, and our serverless function creates the API for us. The sky is the limit to what we can create! &#x1f389;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>If you don\u2019t already know of it, Todd Motto has this great list of public APIs. It\u2019s awesome if you\u2019re trying out a new framework or new layout pattern and want to hit the ground running without fussing with the content. But what if you want or need to make your own API? Serverless can [&hellip;]<\/p>\n","protected":false},"author":7699,"featured_media":273787,"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":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":[]},"categories":[4],"tags":[667,1342,1024],"jetpack_publicize_connections":[],"acf":[],"jetpack_featured_media_url":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/07\/serverless-api.png?fit=1200%2C600&ssl=1","jetpack-related-posts":[{"id":332200,"url":"https:\/\/css-tricks.com\/what-if-you-could-cut-your-hosting-costs-by-80-webiny-serverless-cms-makes-it-possible\/","url_meta":{"origin":273497,"position":0},"title":"What if you could cut your hosting costs by 80%? Webiny Serverless CMS makes it possible.","date":"January 21, 2021","format":false,"excerpt":"Are you hosting one or more websites and are using a headless CMS? Are you hosting your CMS on a virtual machine or a container, or using a SaaS solution? If so, then you're paying for the uptime, regardless if the server or service is serving requests or not. Essentially,\u2026","rel":"","context":"In &quot;Sponsored&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/01\/webiny-image2.png?fit=1200%2C677&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":340465,"url":"https:\/\/css-tricks.com\/serverless-functions-the-secret-to-ultra-productive-front-end-teams\/","url_meta":{"origin":273497,"position":1},"title":"Serverless Functions: The Secret to Ultra-Productive Front-End Teams","date":"May 31, 2021","format":false,"excerpt":"Modern apps place high demands on front-end developers. Web apps require complex functionality, and the lion's share of that work is falling to front-end devs: building modern, accessible user interfacescreating interactive elements and complex animationsmanaging complex application statemeta-programming: build scripts, transpilers, bundlers, linters, etc.reading from REST, GraphQL, and other APIsmiddle-tier\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/netlify-serverless-function-rest-api.jpg?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":263593,"url":"https:\/\/css-tricks.com\/creating-vue-js-serverless-checkout-part-one\/","url_meta":{"origin":273497,"position":2},"title":"Creating a Vue.js Serverless Checkout Form: Setup and Testing","date":"January 16, 2018","format":false,"excerpt":"There comes a time in any young app\u2019s life when it will have to monetize. There are a number of ways to become profitable, but accepting cash is a surefire way to make this more direct. In this four-part tutorial, we\u2019ll go over how to set up a serverless function,\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2018\/01\/vue-checkout.jpg?fit=1200%2C800&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":345744,"url":"https:\/\/css-tricks.com\/serverless-functions-as-proxies\/","url_meta":{"origin":273497,"position":3},"title":"Serverless Functions as Proxies","date":"August 3, 2021","format":false,"excerpt":"The first time cloud functions \/ serverless functions clicked for me was when I saw and tried Auth0's (now defunct) Webtask. It was a little CodePen-like IDE but you didn't really see anything aside from code and logs. The point was to write little bits of Node when you hit\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/07\/Screen-Shot-2021-07-31-at-8.53.28-AM.png?fit=1200%2C955&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":316097,"url":"https:\/\/css-tricks.com\/building-serverless-graphql-api-in-node-with-express-and-netlify\/","url_meta":{"origin":273497,"position":4},"title":"Building Serverless GraphQL API in Node with Express and Netlify","date":"July 6, 2020","format":false,"excerpt":"I\u2019ve always wanted to build an API, but was scared away by just how complicated things looked. I\u2019d read a lot of tutorials that start with \u201cfirst, install this library and this library and this library\u201d without explaining why that was important. I\u2019m kind of a Luddite when it comes\u2026","rel":"","context":"In &quot;Article&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2020\/07\/graphql-express-netlify.png?fit=1200%2C600&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]},{"id":341383,"url":"https:\/\/css-tricks.com\/creating-powerful-websites-with-serverless-driven-cms-development\/","url_meta":{"origin":273497,"position":5},"title":"Creating Powerful Websites with Serverless-Driven CMS Development","date":"May 25, 2021","format":false,"excerpt":"Choosing the right tools to build a website for your organization is essential, but it can be tough to find the right fit. Simple site builders like Wix and Squarespace are easy for marketers to use, but severely limit developers when it comes to customizing site functionality. WordPress is a\u2026","rel":"","context":"In &quot;Sponsored&quot;","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/05\/Developer-Header.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\/2018\/07\/serverless-api.png?fit=1024%2C512&ssl=1","_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/273497"}],"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\/7699"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=273497"}],"version-history":[{"count":19,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/273497\/revisions"}],"predecessor-version":[{"id":274192,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/posts\/273497\/revisions\/274192"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/273787"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=273497"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/categories?post=273497"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=273497"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}