<a href="https://www.gatsbyjs.org/" rel="noopener noreferrer" target="_blank">Gatsby</a> is the new hotness for static sites, and <a href="https://www.netlify.com/" rel="noopener noreferrer" target="_blank">Netlify</a> is an amazing service that helps you deploy static sites with some brilliant automation capabilities. &nbsp;Combine these with the new <a href="https://github.com/cosmicjs/gatsby-source-cosmicjs" rel="noopener noreferrer" target="_blank">Cosmic source plugin for Gatsby</a> and you have a technology stack that scales well and is highly performant.In this tutorial, I&#39;ll show you how to deploy your Gatsby Blog to Netlify and trigger automatic builds on content edits using Cosmic Webhooks.<h3> Install the App</h3>Check out the <a href="https://cosmicjs.com/apps/gatsby-blog" rel="noopener noreferrer" target="_blank">Gatsby Blog available on Cosmic</a>. &nbsp;Install the app: 1. Create a <a href="https://app.cosmicjs.com/add-bucket">new Bucket</a> 2. Choose the option to start with an App 3. Install the Gatsby Blog<img src="https://cdn.cosmicjs.com/47de6bd0-37a2-11ea-bfe8-5b62c3bdf959-Screen-Shot-2020-01-15-at-8.20.55-AM.png" style="width: 100%;" class="fr-fic fr-dib"><h3> </h3><h3>Deploy to Netlify</h3>After you install the Gatsby Blog app, install the <a href="https://www.cosmicjs.com/extensions/deploy-to-web">Deploy to Web Extension</a>.<img src="https://cdn.cosmicjs.com/f8f073d0-37a9-11ea-bfe8-5b62c3bdf959-Screen-Shot-2020-01-15-at-9.15.49-AM.png" style="width: 100%;" class="fr-fic fr-dib">Find the Netlify option and add the Gatsby Blog GitHub URL: <a href="https://github.com/cosmicjs/gatsby-blog-cosmicjs">https://github.com/cosmicjs/gatsby-blog-cosmicjs</a> <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/083d09f0-69c2-11e8-93d9-07e88fbd23be-Screen Shot 2018-06-06 at 2.39.20 PM.png" style="width: 100%;" class="fr-fic fr-dib"><h3>Set Environment Variables</h3>In Netlify, go to Your Netlify Site &gt; Settings &gt; Build and Deploy &gt; Build environment variables. &nbsp;Set a COSMIC_BUCKET environment variable to your Cosmic Bucket slug. &nbsp;Add your COSMIC_READ_KEY &nbsp;(Optional) if you&#39;ve set this in Your Cosmic Bucket &gt; Settings.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/f7f91160-69c1-11e8-bb4b-bb841c6f890e-Screen Shot 2018-06-06 at 2.42.20 PM.png" style="width: 100%;" class="fr-fic fr-dib"> <h3>Do It Live!</h3>Your site should now be live and look like this:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/be934ba0-69c8-11e8-a7c7-51f210bd26e5-Screen Shot 2018-06-06 at 3.31.49 PM.png" style="width: 100%;" class="fr-fic fr-dib"> <h3>Set Up Hooks</h3>Now let&#39;s make sure to tell Netlify to rebuild our site whenever content is edited in Cosmic. &nbsp;To do this, first go into Netlify&#39;s deploy settings area located in Your Netlify Site &gt; Settings &gt; Build and Deploy &gt; Build Hooks and add a Build Hook:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/39af68a0-69c9-11e8-a629-b9b01087edc9-Screen Shot 2018-06-06 at 3.34.49 PM.png" style="width: 100%;" class="fr-fic fr-dib">Save, then copy and paste the generated build hook URL into your Cosmic Bucket &gt; Webhooks<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/53f1f930-69c9-11e8-bb4b-bb841c6f890e-Screen Shot 2018-06-06 at 3.35.13 PM.png" style="width: 100%;" class="fr-fic fr-dib"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/856f3180-69c9-11e8-aa5e-899f1914d7b2-Screen Shot 2018-06-06 at 3.37.45 PM.png" style="width: 100%;" class="fr-fic fr-dib">This will trigger a rebuild whenever content is created, edited or deleted in Cosmic.<h3> </h3><h3>Now Edit Content!</h3>Now you&#39;ll notice whenever you add / edit / remove content in your Cosmic Bucket, a magic message is sent to Netlify to tell it to rebuild your awesome Gatsby site!<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/53daf1f0-69cd-11e8-a7c7-51f210bd26e5-Screen Shot 2018-06-06 at 4.03.58 PM.png" style="width: 100%;" class="fr-fic fr-dib"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/5e1ef760-69cd-11e8-a629-b9b01087edc9-Screen Shot 2018-06-06 at 4.04.50 PM.png" style="width: 100%;" class="fr-fic fr-dib"><h3>In Conclusion</h3>With Gatsby, Netlify and Cosmic, building fast, scalable and highly performant websites has never been easier. With webhooks and Netlify&#39;s built-in continuous deployment, you can enjoy an amazing automated developer experience.Let me know if you have any questions! &nbsp;<a href="https://twitter.com/tonyspiro" rel="noopener noreferrer" target="_blank">Reach out to me on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">message me on Slack</a>.

Netlify + Gatsby + Cosmic + Automatic builds with Webhooks

In this tutorial, I&#39;m going to show you how to create a simple but blazing fast blog using React, <a href="https://gatsbyjs.org" rel="noopener noreferrer" target="_blank">Gatsby JS</a>, and <a href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a>. Let&rsquo;s get started.<h2>TL;DR</h2><a href="https://github.com/cosmicjs/gatsby-blog-cosmicjs" rel="noopener noreferrer" target="_blank">Download the GitHub repo.</a> <a href="https://gatsby-blog-cosmicjs.netlify.com/" rel="noopener noreferrer" target="_blank">Check out the demo.</a><h2>Prerequisites</h2>You will be required to install Node JS, npm, and Gastby CLI before starting. Make sure you already have them installed.<h2>What is Gatsby?</h2><a href="https://gatsbyjs.org" rel="noopener noreferrer" target="_blank">Gatsby</a> is a blazing-fast website framework for React. It allows developers to build React based websites within minutes. Whether you want to develop a blog or a business website, Gatsby will be a good option.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/b372be00-68b9-11e8-931a-bbaa2f5b97ea-34450329-a494355a-ed06-11e7-9d0a-30aefeb2fd57.jpg" style="width: 300px;" class="fr-fic fr-dib">Because it is based on React, the website pages are never reloaded and also it will generate static pages which make the generated website super fast. &nbsp;<h2>Blog Development</h2>We have to set up the environment in order to start working on the blog.<h3>Install Gatsby</h3>First, install Gatsby CLI:<pre><code>npm install --global gatsby-cli</code></pre><h3>Scaffold a Gatsby Template</h3><pre><code> gatsby new gatsby-blog-cosmicjs</code></pre>Enter in your project&#39;s folder:<pre><code>cd <code>gatsby-blog-cosmicjs</code></code></pre>Start the server:<pre><code>gatsby develop</code></pre>At this point, you should already be able to get access to your Gatsby JS blog website at this address: <a href="http://localhost:8000" rel="noopener noreferrer" target="_blank">http://localhost:8000</a>.<h3>Install the Cosmic Source Plugin</h3>In Static Blog, your data can be consumed from different sources: Markdown files, HTML files, External API (WordPress, Cosmic, etc).Therefore, Gatsby implemented independent layer: the data layer. Which is powered by GraphQL. Very exciting stuff!To connect this Data Layer with different Data Providers, you need to integrate Source Plugin. Fortunately, there are many Source Plugins available to fulfil most of the needs.In our case, we are using <a href="https://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a>. Obviously, we need to integrate Source Plugin for Cosmic. Good news: Cosmic has implemented their <a href="https://www.gatsbyjs.org/packages/gatsby-source-cosmicjs/" rel="noopener noreferrer" target="_blank">Source Plugin</a>!Let&#39;s install:<pre><code>npm install --save gatsby-source-cosmicjs</code></pre>We need to install some other plugins also. Let&#39;s do that also<pre><code>npm install --save gatsby-plugin-offline gatsby-source-filesystem</code></pre>These plugins need some configurations. So, replace the content of <code>gatsby-config.js</code>with:Path: <code>gatsby-config.js</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/jazibsawar/de6450ac76bd813f6e883a7ec24bc511' class='embedly-card'></a>"><a href="https://gist.github.com/jazibsawar/de6450ac76bd813f6e883a7ec24bc511" class="embedly-card"></a></div>Then, restart the server to let Gatsby consider these updates.<h3>Posts List &amp; Settings</h3>First, we want to display the list of posts on the homepage. To do so, add the following content to the existing homepage file:Path: <code>src/pages/index.js</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/jazibsawar/1a188fa022afe601d60831c1cc1b8872' class='embedly-card'></a>"><a href="https://gist.github.com/jazibsawar/1a188fa022afe601d60831c1cc1b8872" class="embedly-card"></a></div><h4>Explanation:</h4>At the end of <code>index.js</code>file, we exported pageQuery. These are GraphQl queries which are used to fetch important information about settings and list of posts.Then, we pass the <code>{ data }</code> destructed object as parameter of <code>IndexPage</code> and loop on its <code>allCosmicjsPosts</code> &amp; <code>cosmicjsSettings</code> object to display the data. <a href="https://gatsby-blog-cosmicjs.netlify.com" rel="noopener noreferrer" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/0477cdd0-68c0-11e8-b9b3-bb83b1de12e3-Screenshot-5.png" style="width: 656px;" class="fr-fic fr-dib fr-shadow"></a> <h3>Single Post Layout</h3>Till now we have integrated Cosmic source plugin with Gatsby and it&#39;s look like a Blog. Now we will work on blog post&#39;s details page.Let&#39;s create the template:Path: <code>src/templates/blog-post.js</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/jazibsawar/753f9fc0a58c220b55843032ca87648e' class='embedly-card'></a>"><a href="https://gist.github.com/jazibsawar/753f9fc0a58c220b55843032ca87648e" class="embedly-card"></a></div>That looks fine, but at this point, Gatsby does not know when this template should be displayed. Each post needs a specific URL. So, we are going to inform Gatsby about the new URLs we need thanks to the <code>createPage</code> function.Path: <code>gatsby-node.js</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/jazibsawar/26e6a4eb34aca0d7e24389ba89b562e0' class='embedly-card'></a>"><a href="https://gist.github.com/jazibsawar/26e6a4eb34aca0d7e24389ba89b562e0" class="embedly-card"></a></div>Restart the Gatsby server.From now on, you should be able to visit the detail page by clicking on URLs displayed on the homepage. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/a6dd54e0-68c1-11e8-937a-d53747834e1d-Screenshot-1.png" style="width: 658px;" class="fr-fic fr-dib fr-shadow"> <h3>Extra Stuff!</h3>In addition to this, We also implemented <code>src/components/Bio.js</code> to display Author information &amp; <code>src/layouts/index.js</code> to create a generic layout for the blog.&nbsp;The <a href="https://github.com/cosmicjs/gatsby-blog-cosmicjs" rel="noopener noreferrer" target="_blank">source code is available on GitHub</a>. To see it live, clone the repository, and run (<code>cd gatsby-blog-cosmicjs &amp;&amp; npm i &amp;&amp; npm run develop</code>).Finally, restart the server and visit the website. It will look awesome!The static website generated by Gatsby can <a href="https://www.gatsbyjs.org/docs/deploy-gatsby/" target="_blank">easily be published on storage providers</a>: Netlify, S3/Cloudfront, GitHub pages, GitLab pages, Heroku, etc.Note: Our <a href="https://gatsby-blog-cosmicjs.netlify.com/" rel="noopener noreferrer" target="_blank">demo</a> is deployed on Netlify. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/d6276410-68c2-11e8-9105-b16ce5fe6091-Screenshot-4.png" style="width: 655px;" class="fr-fic fr-dib fr-shadow"> <h3>Conclusion&nbsp;</h3>Congrats! You&rsquo;ve successfully built a super fast and easy-to-maintain blog! Feel free to continue this project to discover both Gatsby and Cosmic advantages.&nbsp;

Build a Gatsby Blog using the Cosmic source plugin

<a data-href="https://cosmicjs.com/" href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a> provides an excellent backend for blogs. It is a fully-featured content management system (CMS) with an intuitive user interface that a non-technical client can use to manage their site content.<h3 name="448a">TL;DR:</h3><a href="https://cosmicjs.com/apps/cosmic-react-blog" rel="noopener noreferrer" target="_blank">React + Next.js Blog App</a> <a href="https://cosmicblog.chriso.io" rel="noopener noreferrer" target="_blank">React + Next.js Blog Demo</a> <a href="https://github.com/chrisoverstreet/cosmic-blog" rel="noopener noreferrer" target="_blank">React + Next.js Blog Codebase&nbsp;</a>&nbsp;IntroEvery blog needs a solid CMS. This allows content owners to control their content without having to hire a developer to make every single change to their site. Many developers immediately think WordPress when considering a CMS. I&rsquo;d like to suggest Cosmic as an alternative, though. It&rsquo;s extremely simple to integrate from the developer&rsquo;s viewpoint and to manage from the client&rsquo;s. In this how-to article, we&rsquo;ll connect a <a data-href="https://reactjs.org/" href="https://reactjs.org/" rel="noopener" target="_blank">React</a> + <a data-href="https://nextjs.org/" href="https://nextjs.org/" rel="noopener" target="_blank">Next.js</a> app to <a data-href="https://cosmicjs.com/" href="https://cosmicjs.com/" rel="noopener" target="_blank">Cosmic</a> and go over some of the features.Getting StartedFist you&rsquo;ll need to create a free account with Cosmic. Navigate to <a data-href="https://cosmicjs.com" href="https://cosmicjs.com" rel="noopener" target="_blank"></a><a href="https://cosmicjs.com">https://cosmicjs.com</a>. Click the &lsquo;Create Free Account&rsquo; button in the header.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/15346ee0-5ea6-11e8-bd00-5b0277b2795c-Screenshot-2018-5-23 Goodbye Cosmic.png" style="width: 160px;" class="fr-fic fr-dib">Then fill in your information or simply click &lsquo;Sign up using GitHub&rsquo;.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/2542b170-5ea6-11e8-83e8-cd9f4c70414e-Screenshot-2018-5-23 Sign Up Cosmic.png" style="width: 300px;" class="fr-fic fr-dib"> The first step in creating a backend with Cosmic is to create a Bucket. &nbsp;A Bucket can be thought of as a container of Objects. Objects are any piece of data that you want to store. An Object&nbsp;could be a blog post, an image, any kind of metadata, or really any kind of anything. We&rsquo;ll discuss Objects more in the next section. For now, just know that you need a Bucket to hold all of your project data. You should now be at <a data-href="https://cosmicjs.com/buckets." href="https://cosmicjs.com/buckets." rel="noopener" target="_blank"></a><a href="https://cosmicjs.com/buckets">https://cosmicjs.com/buckets</a>. Click &lsquo;Add New Bucket&rsquo;. Type in a name for your project and click &lsquo;Save Bucket&rsquo;. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/3892d890-5ea6-11e8-a9af-7593270a80e6-Screenshot-2018-5-23 Create Bucket Cosmic.png" style="width: 300px;" class="fr-fic fr-dib"> The Dashboard and SetupYou should now be at <a data-href="https://cosmicjs.com/****/dashboard," href="https://cosmicjs.com/****/dashboard," rel="noopener" target="_blank"></a>https://cosmicjs.com/****/dashboard, **** being a unique string of characters that identifies your bucket (also called a slug). All of your site&rsquo;s data can be managed in the Dashboard. The first thing we&rsquo;re going to do is define an Object Type. An Object Type defines a data structure. For this tutorial, we&rsquo;re going to define 4 different Object Types:&nbsp;Globals, Posts, Authors, and Social Links. Let&rsquo;s start with Posts. Post
Objects will hold all of the information needed to display a blog post on our site. Click the &lsquo;Add Object Type&rsquo; button. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/4da37460-5ea6-11e8-b62c-8d3b550463a2-Screenshot-2018-5-23 Dashboard.png" style="width: 160px;" class="fr-fic fr-dib"> Type &lsquo;Post&rsquo; in the &lsquo;Singular Name&rsquo; field. The &lsquo;Plural Name&rsquo; and &lsquo;API Endpoint&rsquo; fields should auto-populate. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/5ade72b0-5ea6-11e8-b59c-4fb2834b2073-Screenshot-2018-5-23 Posts.png" style="width: 700px;" class="fr-fic fr-dib">Then click the &lsquo;Metafields Template&rsquo; tab. Click &lsquo;Add Metafield&rsquo;.&nbsp;<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/68bda040-5ea6-11e8-b62c-8d3b550463a2-Screenshot-2018-5-23 Objects.png" style="width: 700px;" class="fr-fic fr-dib">Choose &lsquo;Image / File&rsquo;.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/74ae9260-5ea6-11e8-bd00-5b0277b2795c-Screenshot-2018-5-23 Objects(1).png" style="width: 150px;" class="fr-fic fr-dib">Type &lsquo;Hero&rsquo; in the &lsquo;Title&rsquo; field. The &lsquo;Key&rsquo; field should auto-populate with &lsquo;hero&rsquo;.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/7e97cda0-5ea6-11e8-b62c-8d3b550463a2-Screenshot-2018-5-23 Objects(2).png" style="width: 700px;" class="fr-fic fr-dib">Let&rsquo;s add one more metafield. Click &lsquo;Add Metafield&rsquo; again. This time select &lsquo;HTML Text Area&rsquo;.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/874888e0-5ea6-11e8-bd00-5b0277b2795c-Screenshot-2018-5-23 Objects(3).png" style="width: 150px; height: 150px;" class="fr-fic fr-dib">Give it the title &lsquo;Teaser&rsquo;. Then click &lsquo;Save Object Type&rsquo;.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/91a4d140-5ea6-11e8-83e8-cd9f4c70414e-Screenshot-2018-5-23 Objects(4).png" style="width: 160px;" class="fr-fic fr-dib">Awesome! you&rsquo;ve created your first Object Type. Let&rsquo;s do it three more times!<ol><li name="e3bd">Create an Object Type, Author. This represents a blog post author. Add an &lsquo;Image / File&rsquo; metafield and call it &lsquo;Image&rsquo;.</li><li name="3df1">Create an Object Type, Global. This is how we&rsquo;ll store meta data about our blog, like it&rsquo;s title, tag, and logo. Don&rsquo;t add any metafields.</li><li name="22b4">Create an Object Type, Social Link. We&rsquo;ll use this to store data about external social links. Add a &lsquo;Plain Text Input&rsquo; metafield and call it &lsquo;Url&rsquo;. Add an &lsquo;Image / File&rsquo; metafield and
call it &lsquo;Icon&rsquo;.</li></ol>We&rsquo;re almost done with the setup. Let&rsquo;s go back to our Post
Object Type and add one more metafield. We just defined another Object Type, Author. Wouldn&rsquo;t it be great if we could connect each Post to it&rsquo;s Author? Click &lsquo;Add Metafield&rsquo;
again. This time choose &lsquo;Single Object Relationship&rsquo;. In the dialog that appears, type &lsquo;Author&rsquo; for the &lsquo;Title&rsquo;. Then select &lsquo;Limit Search By Object Type&rsquo; and choose &lsquo;Authors&rsquo;. Then click &lsquo;Save&rsquo;.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/9f65ef80-5ea6-11e8-b62c-8d3b550463a2-Screenshot-2018-5-23 Edit Post.png" style="width: 500px;" class="fr-fic fr-dib">Setup complete! You&rsquo;ve just created an entire backend for your project. No configuring databases or servers required! 😀&nbsp; 🎉<h3 name="fd9b">Add some content</h3>Before we move on to connecting Cosmic&nbsp;to our app, let&rsquo;s add some data first. Click &lsquo;Globals&rsquo; in the Dashboard menu. Then click &lsquo;Add Global&rsquo;.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/b3034c40-5ea6-11e8-b62c-8d3b550463a2-Screenshot-2018-5-23 Globals.png" style="width: 121px;" class="fr-fic fr-dib">In the &lsquo;Title&rsquo; field, type &lsquo;Header&rsquo;. We&rsquo;ll then add 3 metafields.<ol><li name="48a8">Add a &lsquo;Plain Text Input&rsquo; metafield. Type &lsquo;Site Title&rsquo; for the &lsquo;Title&rsquo; and &lsquo;My Cosmic Blog&rsquo; for the &lsquo;Value&rsquo;. Check the &lsquo;Required&rsquo; checkbox.</li><li name="4cbe">Add another &lsquo;Plain Text Input&rsquo; metafield. Type &lsquo;Site Tag&rsquo; for the &lsquo;Title&rsquo; and &lsquo;A clean, minimalist, content-first blog powered by Cosmic&rsquo; for the &lsquo;Value&rsquo;.</li><li name="fdb4">Add an &lsquo;Image / File&rsquo; metafield. Type &lsquo;Site Logo&rsquo; for the &lsquo;Title&rsquo; and then select an image from your computer.</li></ol>Click &lsquo;Publish&rsquo;.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/bf9f7280-5ea6-11e8-83e8-cd9f4c70414e-Screenshot-2018-5-23 Edit Global.png" style="width: 212px;" class="fr-fic fr-dib">Now, lets add an Author. Click &lsquo;Authors&rsquo;, then &lsquo;Add Author&rsquo;. Enter your name for the &lsquo;Title&rsquo;. Add a brief bio for yourself in the &lsquo;Content&rsquo; section. Select an image. Then click &lsquo;Publish&rsquo;.Then, we&rsquo;ll add a Post. Click &lsquo;Posts&rsquo;, then &lsquo;Add Post&rsquo;. Enter a Title, some Content, a Teaser, &nbsp;add a Hero image, then select your name from the Author dropdown menu.&nbsp;Hopefully, you&rsquo;re getting the hang of using the Dashboard now. It&rsquo;s pretty intuitive.The last thing we&rsquo;ll do is add some Social Links. Repeat the same process as with the other Object Types. Add at least two Social Links.<h3 name="5d28">Content ✔️, Let&rsquo;s write some&nbsp;code</h3>Now we can get to the code! Clone, download, or just check out the source code at <a data-href="https://github.com/chrisoverstreet/cosmic-blog" href="https://github.com/chrisoverstreet/cosmic-blog" rel="nofollow noopener" target="_blank"></a><a href="https://github.com/chrisoverstreet/cosmic-blog">https://github.com/chrisoverstreet/cosmic-blog</a>.This isn&rsquo;t a React or Next.js tutorial, so I&rsquo;m just going to focus on the <code>/server.js</code> file. Next.js allows you to implement your own server by creating a server.js file in the root directory of your project. We&rsquo;re going to create an <a data-href="https://expressjs.com/" href="https://expressjs.com/" rel="noopener" target="_blank">express server</a>.The simplest way to connect to your Cosmic backend is with the <a data-href="https://www.npmjs.com/package/cosmicjs" href="https://www.npmjs.com/package/cosmicjs" rel="noopener" target="_blank">offical Cosmic JavaScript client</a>. To install
the client, in your terminal, type:<pre name="389e">npm i -S cosmicjs</pre>Back in server.js, import and initialize cosmicjs:<pre name="b39a">const Cosmic = require(&#39;cosmicjs&#39;);
const api = Cosmic();</pre>Now we&rsquo;re going to implement our own API to connect to Cosmic. We&rsquo;re doing this to create a layer between our App and our data. We could use the cosmicjs client whenever we wanted to fetch data in our app, but then our sensitive bucket data would be exposed to the client (like an API Write Access Key). Find your bucket slug by going back to the Cosmic Dashboard. Under the Settings menu, choose &lsquo;Basic Settings&rsquo;. Your &lsquo;Bucket slug&rsquo; should be visible. Copy it.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/2db20170-5ea7-11e8-b62c-8d3b550463a2-Screenshot-2018-5-23 Settings.png" style="width: 700px;" class="fr-fic fr-dib">Back in server.js, we&rsquo;ll create a bucket object that our API can use.<pre name="ec87">const bucket = api.bucket({ slug: 5b7536d0-59f8-11e8-8958-e7a8aba9942d });</pre>With that bucket object, we can fetch and return our data in the following way:<div class="fr-embedly " data-original-embed="<a href='' class='embedly-card'></a>"><a href="" class="embedly-card"></a></div><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/chrisoverstreet/f999f874bc1a6b868cf6e06711a8a736' class='embedly-card'></a>"><a href="https://gist.github.com/chrisoverstreet/f999f874bc1a6b868cf6e06711a8a736" class="embedly-card"></a></div><figure name="22ca"> </figure>The slug in <code>bucket.getObject()</code> is the slug used to define your Object. You can also fetch a list of Objects.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/chrisoverstreet/0a07ff8f33dad2d26cad8f3594775161' class='embedly-card'></a>"><a href="https://gist.github.com/chrisoverstreet/0a07ff8f33dad2d26cad8f3594775161" class="embedly-card"></a></div>Here&rsquo;s the complete server.js code:<div class="fr-embedly " data-original-embed="<a href='Here's the complete server.js code:' class='embedly-card'></a>"><a href="Here" s="" the="" complete="" server.js="" code:'="" class="embedly-card"></a></div><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/chrisoverstreet/4b4c946b4bad2e6d95fd454f0304ddfb' class='embedly-card'></a>"><a href="https://gist.github.com/chrisoverstreet/4b4c946b4bad2e6d95fd454f0304ddfb" class="embedly-card"></a></div>Now we can hit our API endpoint inside our App to retrieve our data. For example, to retrieve a single post, we can use the following code:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/chrisoverstreet/63ed8ce858d30cde3d837ad65a13f509' class='embedly-card'></a>"><a href="https://gist.github.com/chrisoverstreet/63ed8ce858d30cde3d837ad65a13f509" class="embedly-card"></a></div>It&rsquo;s that simple!<h3 name="ec85">Outro</h3>This was just a high level overview of using Cosmic with React + Next.js. If you&rsquo;re like me, the best way to learn something is to jump right in and experiment with things. I invite you to download the source code for this project and tinker with it. Cosmic has much more to offer than what was mentioned in this post. Check out the articles and other information available on their site under the &lsquo;Developers&rsquo; tab.Thanks for reading! Happy coding!

Powering a React + Next.js blog with Cosmic JS

This is a quick example to show some of the powerful things you can do with the <a href="https://www.npmjs.com/package/cosmicjs" rel="noopener noreferrer" target="_blank">Cosmic NPM Module</a>. &nbsp;This script adds a Bucket to your Cosmic account, adds
a Pages Object Type and adds a few Pages.To run the code:1. Copy the <code>bucketSetupExample.js</code> file locally into a new folder. 2. <code>cd your-folder; npm i cosmicjs</code> 3. Add your secret authentication token to the code found in Account Settings &gt; Authentication 4. <code>node bucketSetupExample.js</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/tonyspiro/9edb8b87312de8395a9b9eb6a77c8bce' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/9edb8b87312de8395a9b9eb6a77c8bce" class="embedly-card"></a></div>

Quick Bucket setup code sample using the Cosmic NPM module

There is a powerful trend happening in application development. &nbsp;It is a shift from building and managing application services to leveraging APIs for focused application services. &nbsp;Cosmic is taking this empowering concept to data and file management and allowing cross-functional teams to build quality apps faster, together. To further illustrate this point, <a href="https://cosmicjs.com/tony" rel="noopener noreferrer" target="_blank">Tony Spiro</a>, co-founder and CEO of Cosmic, presented &quot;Building for Team Success with Content-Powered Apps&quot; at the React JS Dallas Meetup on Tuesday May 8, 2018.&nbsp;<a href="https://www.meetup.com/ReactJS-Dallas/" rel="noopener noreferrer" target="_blank">React JS Dallas</a> is an innovative bunch of front end developers comprised of corporate in-house developers, community leaders in the Dev Bootcamp verticals as well as freelancers, agency devs and technical evangelists. Last night&#39;s meetup was held at <a href="http://www.pearlsolutions.com" rel="noopener noreferrer" target="_blank">Pearl Technology Holdings</a> and featured speakers from <a href="https://devmountain.com" rel="noopener noreferrer" target="_blank">DevMountain</a> and <a href="https://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a>. The full video is embedded below and runs approximately 43 minutes.&nbsp; <div class="fr-embedly " data-original-embed="<a href='https://twitter.com/ashley_troggio/status/994039721763528714' class='embedly-card'></a>"><a href="https://twitter.com/ashley_troggio/status/994039721763528714" class="embedly-card"></a></div><h4> </h4><h4>Building for Team Success with Content-Powered Apps&nbsp;</h4><ul><li>Who is Tony Spiro?</li><li>What&#39;s the &quot;old workflow&quot; look like for teams building content-powered apps?&nbsp;</li><li>Cloud / API Microservices shifts in Payment Gateways, Email Platforms and the Content Management Space</li><li>Cosmic Demo: GraphQL / React Blog installation from the Cosmic CLI</li><li>Cosmic Demo: Debut of new Augmented Reality application with dynamic content changes</li></ul> <div class="fr-embedly " data-original-embed="<a href='https://youtu.be/IcJ5hkReEko' class='embedly-card'></a>"><a href="https://youtu.be/IcJ5hkReEko" class="embedly-card"></a></div> I hope that you&#39;ve found this tutorial helpful. If you have questions or comments about Content Editor Features in the Cosmic system, I&#39;d love to hear about them. You can refer to my <a href="https://cosmicjs.com/carsongibbons" rel="noopener noreferrer" target="_blank">Cosmic Profile</a> for additional content on how to intuitively navigate the Cosmic Dashboard.&nbsp; <div class="fr-embedly " data-original-embed="<a href='https://twitter.com/ReactJSDallas/status/994022173084962817' class='embedly-card'></a>"><a href="https://twitter.com/ReactJSDallas/status/994022173084962817" class="embedly-card"></a></div><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a>

Building for Team Success with Content-Powered Apps

<a href="https://cosmicjs.com/docs/extensions" rel="noopener noreferrer" target="_blank">Cosmic Extensions</a> make it possible to extend the functionality of Cosmic for both the developer and editor. Developers are given a canvas to create interactive views, connect to third-party APIs and customize the editor experience.&nbsp;A recent example built by the <a href="https://cosmicjs.com/developers" rel="noopener noreferrer" target="_blank">Cosmic Community</a> is the <a href="https://cosmicjs.com/extensions/google-analytics" rel="noopener noreferrer" target="_blank">Google Analytics Extension</a>, which allows team members to easily see analytics insights directly in their Cosmic Bucket Dashboard. In this blog I&#39;ll show you how to install and integrate the Google Analytics Extension into your Cosmic Dashboard in 3 easy steps.TL;DR: <a data-href="https://cosmicjs.com/extensions/google-analytics" href="https://cosmicjs.com/extensions/google-analytics" rel="nofollow noopener" target="_blank">Google Analytics Extension </a><a data-href="https://github.com/cosmicjs/google-analytics-extension" href="https://github.com/cosmicjs/google-analytics-extension" rel="nofollow noopener" target="_blank">Google Analytics Extension Codebase </a><a data-href="https://cosmicjs.com/articles/google-analytics-extension-jgntlka0" href="https://cosmicjs.com/articles/google-analytics-extension-jgntlka0" rel="nofollow noopener" target="_blank">Google Analytics Extension Article</a><h4> </h4>Step 1: Install the Google Analytics Extension to your Cosmic Bucket<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/b81e1030-4ee7-11e8-b4df-9b304cc9bad1-ice_screenshot_20180503-103556.png" style="width: 100%;" class="fr-fic fr-dib"> Step 2: Connect Your Extension to Google Analytics via your View ID<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/f98a4340-4ee7-11e8-8d0a-3b2fd9b80645-ice_screenshot_20180503-103714.png" style="width: 100%;" class="fr-fic fr-dib"> Your Google Analytics View ID is found in GA &gt; Settings &gt; View Settings &gt; View ID<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/30a72640-4ee8-11e8-aec0-479d41fa8add-31c8abb0-4d4f-11e8-a927-a51792689ecd-view id.png" style="width: 100%;" class="fr-fic fr-dib"> Step 3: View Insights and Analytics all from your Cosmic Dashboard 🚀<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/41e0dcc0-4f25-11e8-a843-154556956a12-ezgif-2-87590c267e.gif" style="width: 100%;" class="fr-fic fr-dib"> The entire process of installing the extension and accessing your Google Analytics with your View ID Key is demonstrated in this 30-second video.&nbsp;<video class="fr-draggable fr-fvc fr-dvi" controls="" src="https://i.froala.com/download/16487e300502bd6f9ab82a84518afd2e855744a5.mp4?1525388096" style="width: 100%;">Your browser does not support HTML5 video.</video> I hope that you&#39;ve found this tutorial helpful. If you have questions or comments about Content Editor Features in the Cosmic system, I&#39;d love to hear about them. You can refer to my <a href="https://cosmicjs.com/carsongibbons" rel="noopener noreferrer" target="_blank">Cosmic Profile</a> for additional content on how to intuitively navigate the Cosmic Dashboard.&nbsp;<a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com">carson@cosmicjs.com</a>&nbsp;

How to Add Google Analytics Insights in Cosmic

At Cosmic, we&#39;re all about building apps faster on blended teams of developers and content editors. In the past, editors using third-party stock photography sites have been encouraged to utilize <a href="https://cosmicjs.com/articles/how-to-add-quick-links-to-your-cosmic-js-bucket-jd5dailj?ref=search" rel="noopener noreferrer" target="_blank">Cosmic Quick Links</a> to save these third-party tools to their Cosmic Dashboard. Now editors can use the new <a href="https://cosmicjs.com/extensions/unsplash-photos" rel="noopener noreferrer" target="_blank">Unsplash Photos Extension</a> to find and add stock photography to their media library, all from the comfort of their Bucket Dashboard without having to interface with a third-party website like Unsplash.&nbsp;<h3>TL;DR:</h3><a href="https://cosmicjs.com/extensions/unsplash-photos" rel="noopener noreferrer" target="_blank">Unsplash Photos Extension</a> <a href="https://github.com/cosmicjs/unsplash-extension" rel="noopener noreferrer" target="_blank">Unsplash Photos Extension Codebase</a> <a href="https://www.producthunt.com/posts/unsplash-photos-extension" rel="noopener noreferrer" target="_blank">Unsplash Photos Extension on Product Hunt</a>You can now Search and Add Unsplash Photos to your Cosmic Bucket, all from your Bucket Dashboard. Simply navigate to the <a href="https://cosmicjs.com/extensions/" rel="noopener noreferrer" target="_blank">Cosmic Extensions Page</a> and click to install the <a href="https://cosmicjs.com/extensions/unsplash-photos" rel="noopener noreferrer" target="_blank">Photos Extension</a>.&nbsp; <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/584b6420-4e31-11e8-8641-39049a857e02-ice_screenshot_20180502-125029.png" style="width: 100%;" class="fr-fic fr-dib"> Once installed, you will see the &quot;Photos&quot; tab on your left hand navigation bar within your Dashboard. Click the &quot;Photos&quot; tab and start typing in your query to find and add photos to your Cosmic Media Library for immediate or later use.&nbsp; <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/5288e170-4e2c-11e8-bfd8-e5e79cf16acc-unsplash-extension.gif" style="width: 100%;" class="fr-fic fr-dib"> I hope that you&#39;ve found this tutorial helpful. If you have questions or comments about Content Editor Features in the Cosmic system, I&#39;d love to hear about them. You can refer to my <a href="https://cosmicjs.com/carsongibbons" rel="noopener noreferrer" target="_blank">Cosmic Profile</a> for additional content on how to intuitively navigate the Cosmic Dashboard.&nbsp;<a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com">carson@cosmicjs.com</a>&nbsp;

How to Search and Add Unsplash Photos to your Cosmic Bucket

With the Cosmic Extension functionally, anyone can embed their own custom app inside the Cosmic Dashboard!In this article I will show you how to configure and use this Google Analytics Extension to view Google Analytics insights directly in your Cosmic Bucket Dashboard.&nbsp;<h2>TL;DR</h2><a href="https://cosmicjs.com/extensions/google-analytics" rel="noopener noreferrer" target="_blank">Go to the Google Analytics Extension page</a> <a href="https://github.com/cosmicjs/google-analytics-extension" rel="noopener noreferrer" target="_blank">View the full codebase on GitHub</a> <a href="https://cosmicjs.com/login" rel="noopener noreferrer" target="_blank">Install the Extension in your Bucket in Your Bucket &nbsp;&gt; Extensions &gt; Browse Extensions</a> <a data-href="https://cosmicjs.com/docs/extensions" href="https://cosmicjs.com/docs/extensions" rel="noopener noreferrer" target="_blank">View the Extension documentation</a> for more information on building an Extension<h2>The Extension we&#39;re building</h2>We&#39;re integrating a simple Extension that allows you to view your Google Analytics data in your Cosmic Bucket. All you need to do is login with your Google Account and add your VIEW_ID.<h2>Usage</h2><ol><li>Go to your google analytics dashboard. Select the project which you want to use. Go to the admin settings &gt; View Settings and copy the view ID. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/31c8abb0-4d4f-11e8-a927-a51792689ecd-view id.PNG" style="width: 508px;" class="fr-fic fr-dib"> </li><li>Click on the Analytics menu on the left nav in your cosmic dashboard. Authorize using your google account. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/98069210-4d50-11e8-86d8-d7fbaaaa60e5-access.PNG" style="width: 456px;" class="fr-fic fr-dib"> </li><li>Enter the View ID you copied above and submit. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/d8593ed0-4d50-11e8-86d8-d7fbaaaa60e5-IMG_01052018_190708_0.png" style="width: 507px;" class="fr-fic fr-dib"> </li><li>You will see your Analytics here :) <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/9d72f040-4edb-11e8-b4df-9b304cc9bad1-Screen Shot 2018-05-03 at 8.54.59 AM.png" style="width: 300px;" class="fr-fic fr-dib"></li></ol>

Google Analytics Extension

We just released the <a href="https://cosmicjs.com/blog/cosmic-cli-apps-release" rel="noopener noreferrer" target="_blank">Cosmic CLI version 1.1.0</a> and it&#39;s pretty awesome. &nbsp;It includes new commands to search, install and deploy <a href="https://cosmicjs.com/apps" rel="noopener noreferrer" target="_blank">Cosmic-powered Apps</a>.In this video tutorial, I show you how to use the Cosmic CLI to install and deploy a Cosmic GraphQL-powered App in 5 minutes.<iframe width="640" height="360" src="//www.youtube.com/embed/OHQX1iIT-I0?wmode=opaque" frameborder="0" allowfullscreen=""></iframe>

Start building today