As users add more and more Buckets to their Cosmic Dashboards, billing management can become hairy. Thanks to requests from and collaboration with the Cosmic Community, we have rolled out a new feature to help you manage your Buckets and their billing
information for streamlined account management. Introducing Cosmic Receipt Downloads, now available in your Bucket Dashboard.&nbsp;<img src="https://www.cosmicjs.com/uploads/89c35ce0-600e-11e7-a11c-c75aa725cc8e-iAwCJb4SzR.gif" style="width: 100%;" class="fr-fic fr-dib">To access receipts for your Buckets, navigate to your Cosmic Bucket &gt; Settings &gt; Billing. You will see detailed items such as your credit card information on file, your current plan and products as well as your payments table (pictured above).&nbsp;<img src="https://www.cosmicjs.com/uploads/d95b7360-600d-11e7-9629-dfb79cbd530f-Screen Shot 2017-07-03 at 11.36.47 AM.png" style="width: 100%;" class="fr-fic fr-dib">If you have questions about the new Cosmic Receipt Downloads, <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://www.cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join our Slack community</a>.&nbsp;

Cosmic Receipt Downloads Now Available

<img src="https://cosmicjs.imgix.net/26b41d70-5f9a-11e7-b120-9f6bc26aeb8f-amazon-product-search.jpg" style="width: 100%;" class="fr-fic fr-dib">Cosmic just released their new Extension functionally, which enables anyone to embed their own custom app inside the Cosmic CMS!In this tutorial we&#39;ll be going through some of the steps required to make our Amazon Product Search Extension.<h2>TL;DR</h2><a href="https://github.com/cosmicjs/amazon-product-search" rel="noopener noreferrer" target="_blank">View the full codebase on GitHub</a> <a href="https://www.cosmicjs.com/login">Install the Extension in your Bucket in Your Bucket &nbsp;&gt; Extensions &gt; Browse Extensions</a><a data-href="https://www.cosmicjs.com/docs/extensions" href="https://www.cosmicjs.com/docs/extensions" rel="noopener" target="_blank"></a> <a data-href="https://www.cosmicjs.com/docs/extensions" href="https://www.cosmicjs.com/docs/extensions" rel="noopener" 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 building a simple Extension that allows you to search the Amazon Product Catalogue and add Objects to your bucket with products&#39; name, description, image, and an affiliate link.This is quite a simple app, built using react, and we won&#39;t be going into too many details on the parts that don&#39;t directly relate to the new Cosmic Extensions API.<h2>Getting access to the Cosmic API in your Extension</h2>Cosmic embeds extensions as an <code>&lt;iframe&gt;</code> inside its CMS interface, the extension is given a url with a querystring providing all the information needed for your app to access the relevant bucket like so:<code>https://43d32000-5ce7-11e7-8fc4-c1f6eec4f920.cosmicext.com/?bucket_slug=my-bucket-slug&amp;read_key=foo&amp;write_key=bar</code>Extracting these variables, is very easy, and even easier using a library like <code>qs</code>:<pre class="prism">import qs from &quot;qs&quot;;

const { bucket_slug, read_key, write_key, } = qs.parse(window.location.search.slice(1, Infinity));

console.log({
 bucket_slug,
 read_key,
 write_key,
});</pre>These keys can then be used to make API calls on the bucket your currently using the extension in:<pre class="prism">fetch(
 `https://api.cosmicjs.com/v1/${bucket_slug}/object/amazon-credentials${
 read_key
 ? &quot;?read_key=&quot; + read_key
 : &quot;&quot;
 }`,
 opts,
);</pre>In our app we use these keys to add new object for Amazon Products that we find.<h2>extension.json</h2>One file that must be included in your extension is the <code>extension.json</code> file. This tells Cosmic important metadata about your app, like it&#39;s name, icon, display image, and the default Objects and Object Types that should be created when the Extension is first installed. The <code>extension.json</code> for our app is as follows:<pre class="prism">{
 &quot;title&quot;: &quot;Amazon Product Search&quot;,
 &quot;font_awesome_class&quot;: &quot;fa-shopping-basket&quot;,
 &quot;image_url&quot;: &quot;http://fla.fg-a.com/shopping-cart/shopping-cart-black-3.png&quot;,
 &quot;objects&quot;: [
 {
 &quot;title&quot;: &quot;Amazon Credentials&quot;,
 &quot;slug&quot;: &quot;amazon-credentials&quot;,
 &quot;type&quot;: &quot;amazon-credentials&quot;,
 &quot;metafields&quot;: [
 {
 &quot;key&quot;: &quot;amz-key&quot;,
 &quot;title&quot;: &quot;Key&quot;,
 &quot;type&quot;: &quot;text&quot;,
 &quot;value&quot;: &quot;&quot;
 },
 {
 &quot;key&quot;: &quot;amz-secret&quot;,
 &quot;title&quot;: &quot;Secret&quot;,
 &quot;type&quot;: &quot;text&quot;,
 &quot;value&quot;: &quot;&quot;
 },
 {
 &quot;key&quot;: &quot;amz-tag&quot;,
 &quot;title&quot;: &quot;Tag&quot;,
 &quot;type&quot;: &quot;text&quot;,
 &quot;value&quot;: &quot;&quot;
 }
 ]
 }
 ],
 &quot;object_types&quot;: [
 {
 &quot;title&quot;: &quot;Amazon Products&quot;,
 &quot;slug&quot;: &quot;amazon-items&quot;,
 &quot;singular&quot;: &quot;Amazon Product&quot;,
 &quot;metafields&quot;:[
 {&quot;key&quot;:&quot;image_url&quot;,&quot;type&quot;:&quot;text&quot;,&quot;value&quot;:&quot;&quot;,&quot;title&quot;:&quot;image_url&quot;,&quot;parent&quot;:false,&quot;children&quot;:null},
 {&quot;key&quot;:&quot;affiliate_link&quot;,&quot;type&quot;:&quot;text&quot;,&quot;value&quot;:&quot;&quot;,&quot;title&quot;:&quot;affiliate_link&quot;,&quot;parent&quot;:false,&quot;children&quot;:null}
 ]
 }
 ]
}</pre>The <code>title</code> field is the name that your extension will display inside Cosmic The <code>font_awesome_class</code> field must be a valid <a href="http://fontawesome.io/icons/">Font Awesome</a> icon name the <code>image_url</code> field is a display image that will show with your extension.You also have space to specify a list of objects that will be created when your extension is installed, here we&#39;ve detailed an object that will store our Amazon Product Search credentials. This means that Cosmic will handle saving this information
for us!<h2>Deployment and Continuous Integration</h2>Uploading your extension to Cosmic is very easy, you just need to take a folder that contains you <code>extension.json</code>file, and an <code>index.html</code> file (and any other assets you need), zip it up, and upload it.Our build folder looks like this:<pre class="prism"><code>build
├── extension.json
├── index.html
└── static
 └── js
 └── main.a651cd8a.js
</code></pre>You can either upload your zip file through the Cosmic CMS, or by using the rest API.We use Bitbucket to host our code, which has a built in CI service called Pipelines. You can configure pipelines to run on every commit to the <code>master</code> branch of your git repo, and to upload the newest version of your app to Cosmic&#39;s servers.We&#39;ll configure our Bitbucket Pipeline like so:<pre class="prism">image: codogo/pipelines-universal:latest

pipelines:
 branches:
 master:
 - step:
 script:
 - yarn install 
 - yarn run lint
 - yarn run build
 - ./uploadNewExtension.sh</pre>Where <code>uploadNewExtension.sh</code> contains:<pre class="prism">#!/bin/bash

# $BUCKET_SLUG, $READ_KEY, and $WRITE_KEY are environment variables

EXTENSION_NAME=&quot;${EXTENSION_NAME:-Amazon Product Search}&quot;

echo &quot;geting previous version extension id...&quot;
PREVIOUS_EXTENSION_ID=&quot;$( curl --progress-bar &quot;https://api.cosmicjs.com/v1/extensions-2?hide_metafields=true&amp;read_key=foo&quot; | jq -r &quot;.bucket.extensions | map(select(.title == \&quot;$EXTENSION_NAME\&quot; )) | .[0].id&quot; )&quot;
# jq is a neat little program for extracting data from json, it is available here: https://jqplay.org/

if [ &quot;$PREVIOUS_EXTENSION_ID&quot; == &quot;null&quot; ] ; then
echo &quot;There is no &#39;$EXTENSION_NAME&#39; extension on cosmic to delete&quot;
else
echo &quot;Found id for &#39;$EXTENSION_NAME&#39;: $PREVIOUS_EXTENSION_ID&quot;
echo &quot;deleting old extension...&quot;
curl --progress-bar -X DELETE &quot;https://api.cosmicjs.com/v1/$BUCKET_SLUG/extensions/$PREVIOUS_EXTENSION_ID&quot; -d &quot;{\&quot;write_key\&quot;:\&quot;$WRITE_KEY\&quot;}&quot; -H &quot;Content-type: application/json&quot; &gt; /dev/null
fi

echo &quot;upload new version of extension...&quot;
curl --progress-bar --url &quot;https://api.cosmicjs.com/v1/$BUCKET_SLUG/extensions&quot; --header &quot;content-type: multipart/form-data&quot; --form &quot;write_key=$WRITE_KEY&quot; --form &quot;zip=@./build.zip&quot; &gt; /dev/null</pre>This script will remove any previously uploaded versions of our extension, then take our zipped Extension and upload it to our bucket.<h2>Summary</h2>In this tutorial we&#39;ve had an introduction to the way Cosmic hosts and integrates with your Extension, and an explanation of how to upload your Extension using Bitbucket&#39;s Continuous integration. If you&#39;ve learnt something, please <a href="https://twitter.com/intent/tweet?text=Building and Publishing a Cosmic Extension Using Bitbucket Pipelines @cosmic_js: https://www.cosmicjs.com/blog/building-and-publishing-a-cosmic-js-extension-using-bitbucket-pipelines" rel="noopener noreferrer" target="_blank">share this article</a>!If you&#39;re making an extension, or anything else, with Cosmic <a href="https://www.cosmicjs.com/community">get in touch on our Slack</a> or <a href="https://twitter.com/cosmic_js">Twitter</a>, we&#39;d love to see what you&#39;re making.This post was written by <a href="https://consulting.codogo.io/">Codogo</a>, an award-winning digital agency with a passion for creating amazing digital experiences.

Building and Publishing a Cosmic Extension Using Bitbucket Pipelines

<img src="https://www.cosmicjs.com/uploads/4a99de00-5f36-11e7-944c-c77fe6f4c1e0-1499025228_Web_Development.png" style="width: 100%;" class="fr-fic fr-dib">Another Developer Hero joins us in our new installment of the <a href="https://www.cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> Developer Spotlight Series. We sat down with Abe Hendricks, a hybrid Developer / Interactive Manager / Content-Editor leading a government agency in California. &nbsp;Check him out on <a href="https://github.com/pcwa-ahendricks" rel="noopener noreferrer" target="_blank">GitHub</a>, and enjoy the Q/A. How long have you been building software? I&rsquo;ve been building websites and single page applications for a little over a year now. &nbsp;Prior to that, most development was in the form of database development, business intelligence, and some basic server side scripting for task automation. What is your preferred development stack? Currently I&rsquo;m working for a mid size Local/Regional Government Agency. &nbsp;A long term goal is to keep any custom development in a tight stack. &nbsp;We are trying not pick up a myriad of different technologies and tools with differing life cycles
and diverging paths. I currently try to do as much development as I can in the front-end using Angular. &nbsp;For servers we fill in the gaps using JavaScript / Typescript as well, with the aide of frameworks like Express. (If I were a freelance developer
I&rsquo;m certain my approach would be different). When I need to reach for something like a database I gravitate towards Firebase which fits in nicely with Angular. What past projects are you most proud of and why? It&rsquo;s difficult for me to gloat about any projects in particular. I&rsquo;m satisfied at the speed of which I&rsquo;ve picked up new frameworks, tools, etc. and have been able to develop and deploy using these new tools. &nbsp;Effectively I&rsquo;m
a bit more impressed from the quantity and speed of which I&rsquo;ve developed applications, more so than the quality of them (smiling emoji). But ironically, now that I write that, I&rsquo;m not really proud of that at all (sad emoji). Talk a little bit more about your process for building apps in your world and vertical. How has Cosmic sped up your time to market for project delivery deadlines? Cosmic fits in perfectly with our organization and needs. Before <a href="https://www.cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> we were using a popular Blogging / CMS platform for managing content, in the most headless way it could be implemented and used. &nbsp;However, the end result always felt awkward, I&rsquo;d say &quot;pear-shaped&quot; on a good day. &nbsp;Trying to explain to non-technical people that they need to add content to WordPress, while at the same time you are telling them that we are not really using WordPress, never really even made sense to me, let alone them. When <a href="https://www.cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> came along it really rocked off some socks that we didn&rsquo;t want to wear to begin with. &nbsp;Cosmic&rsquo;s API-first CMS was really what we needed all along. &nbsp;Moving forward, Cosmic will allow and enable many individuals in our organization to build out our applications. What are some technologies you are excited about that you are using today, or want to learn more about? I feel like I&rsquo;m always learning so it&rsquo;s starting to not feel very exciting at all. &nbsp;(Thank you JavaScript community). But do to the nature of my current role at my organization I&rsquo;m expected to put on a few different hats on a day
to day basis. &nbsp;I&rsquo;m not just the developer, but I&rsquo;m also a content editor and designer. &nbsp;I&rsquo;ve been wearing the developer hat for quite some time over the course of the last year. In the near future, I&rsquo;m hoping to spend
more time using Cosmic to add content to our existing applications, and spend more time in Sketch working creatively on design. I mean, what&rsquo;s the point of all this JavaScript if it doesn&rsquo;t have any HTML or CSS buddies right?&nbsp;Somewhat related: I&rsquo;m eager to see how certain projects such as Material2 for Angular develop and mature over the course of the next year. &nbsp;Additionally I&rsquo;m hoping to put together a native app or two using the Ionic Framework. Cosmic Developer Spotlight Series<a href="https://www.cosmicjs.com/blog/developer-spotlight-brian-mullis" rel="noopener noreferrer" target="_blank"></a> <a href="https://www.cosmicjs.com/blog/developer-spotlight-brian-mullis" rel="noopener noreferrer" target="_blank">Developer Spotlight: Brian Mullis</a> <a href="https://www.cosmicjs.com/blog/developer-spotlight-micah-walter" rel="noopener noreferrer" target="_blank">Developer Spotlight: Micah Walter</a> <a href="https://www.cosmicjs.com/blog/developer-spotlight-joe-tuson" rel="noopener noreferrer" style=" background-color: transparent; color: rgb(0, 175, 215);" target="_blank">Developer Spotlight: Joe Tuson</a> <a href="https://www.cosmicjs.com/blog/developer-spotlight-coding-dojo" rel="noopener noreferrer" style=" background-color: transparent; color: rgb(0, 175, 215);" target="_blank">Developer Spotlight: Coding Dojo</a> <a href="https://www.cosmicjs.com/blog/developer-spotlight-simple-media" rel="noopener noreferrer" style=" background-color: transparent; color: rgb(0, 175, 215);" target="_blank">Developer Spotlight: Simple Media</a> <a href="https://www.cosmicjs.com/blog/developer-spotlight-jon-kalfayan" rel="noopener noreferrer" style=" background-color: transparent; color: rgb(0, 175, 215);" target="_blank">Developer Spotlight: Jon Kalfayan</a> <a href="https://www.cosmicjs.com/blog/developer-spotlight-jon-bloomer" rel="noopener noreferrer" style=" background-color: transparent; color: rgb(0, 175, 215);" target="_blank">Developer Spotlight: Jon Bloomer</a><a href="https://www.cosmicjs.com/" rel="noopener noreferrer" style=" background-color: transparent; color: rgb(0, 175, 215);" target="_blank">Cosmic</a> is an API-first cloud-based content management platform that makes it easy to manage applications and content. If you have questions about the <a href="https://www.cosmicjs.com/" rel="noopener noreferrer" style=" background-color: transparent; color: rgb(0, 175, 215);" target="_blank">Cosmic API</a>, please reach out to us on <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" style=" background-color: transparent; color: rgb(0, 175, 215);" target="_blank">Twitter</a> or join the community on <a href="https://www.cosmicjs.com/community" rel="noopener noreferrer" style=" background-color: transparent; color: rgb(0, 175, 215);" target="_blank">Slack</a>.

Developer Spotlight: Abe Hendricks

How to Build a Real Estate Website Using Ember.js

<img src="https://cosmicjs.imgix.net/2ca6e910-5a27-11e7-b391-297f686fd25c-cosmicjs-slack.jpg" style="width: 1005px;" class="fr-fic fr-dib">You can now connect your Cosmic Buckets to Slack to be notified when any changes occur in your Bucket. &nbsp;Installing the app to your Slack account is easy.Follow these steps: 1. Install the Cosmic Slack app to your Slack account <a href="https://slack.com/oauth/authorize?&client_id=11020550018.203122635188&scope=incoming-webhook" rel="noopener noreferrer" target="_blank">by clicking here</a>. 2. Select which channel you would like to receive the notifications and click &quot;Install&quot;.<img src="https://www.cosmicjs.com/uploads/ff6f5440-5a27-11e7-b391-297f686fd25c-Screen Shot 2017-06-25 at 11.27.55 PM.png" style="width: 100%;" class="fr-fic fr-dib">3. After you install the Slack app, copy the webhook link provided and paste it into the Endpoint input field for each Webhook in your Cosmic Bucket and click &quot;Save Webhooks&quot;.<img src="https://www.cosmicjs.com/uploads/8a0a04b0-5a2d-11e7-87c6-13710bb7d4a0-Screen Shot 2017-06-26 at 12.08.21 AM.png" style="width: 100%;" class="fr-fic fr-dib">Now whenever content is edited in your Cosmic Bucket, your team will be notified in Slack.<img src="https://www.cosmicjs.com/uploads/eb7c8e10-5a33-11e7-a33a-a9e1bde9cf9a-screenshot.jpg" style="width: 100%; max-width: 500px;" class="fr-fic fr-dib">This is another way that Cosmic is making it easier for teams to collaborate to build apps faster. &nbsp;We also have a <a href="https://www.cosmicjs.com/integrations">new Integrations page</a> to help keep track of all of the Cosmic integrations with your favorite services. &nbsp;If you have any questions, feel free to <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://www.cosmicjs.com/community">join the Slack community</a>.

Connect Your Cosmic Buckets to Slack

How to Make a Simple Twitter Clone with React Native

<a href="https://www.cosmicjs.com/docs/extensions"><img src="https://cosmicjs.imgix.net/dbec7000-55b0-11e7-9725-3701f7db93c5-extensions-screenshot.jpg" style="width: 100%;" class="fr-fic fr-dib"></a>We&rsquo;re excited to announce Extensions, a powerful new way to create custom experiences within Cosmic. &nbsp;With Cosmic Extensions, you can now build applications directly into your Bucket Dashboard giving you the power to create customized views and communicate with third party APIs to extend the functionality of Cosmic.<a href="https://www.cosmicjs.com/docs/extensions"></a> <a href="https://www.cosmicjs.com/docs/extensions"></a> <a href="https://www.cosmicjs.com/docs/extensions">Check out the Extensions documentation</a>. This is another step in providing you with the best way to collaborate to create amazing products. &nbsp;I hope you enjoy the new freedom you have to create and customize your Cosmic experience. &nbsp;Take a look through the <a href="https://www.cosmicjs.com/docs/extensions">Cosmic Extensions documentation</a> for more information on how to get started. &nbsp; If you have any questions please <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://www.cosmicjs.com/community">join our community on Slack</a>.

Introducing Cosmic Extensions

<img src="https://www.cosmicjs.com/uploads/eda2db70-4fa9-11e7-a3cb-99e17c45d637-Screen Shot 2017-06-12 at 1.28.11 PM.png" style="width: 100%" class="fr-fic fr-dib">A new Developer Hero joins us in our latest installment of the Cosmic Developer Spotlight Series. We sat down with Brian Mullis, a developer working for an interactive agency in Portland. &nbsp;Check him out on <a href="https://github.com/bmullis" rel="noopener noreferrer" target="_blank">GitHub</a>, and enjoy the Q/A. How long have you been building software?I have been building websites and applications for around 2 years now. Before learning web development I was in the Marines, did private security, and drove tractor trailers across the country. Though incredibly challenging, web development has seriously changed my life, and allowed me to pursue a career I never could have imagined. What is your preferred development stack?I learned development using a PHP/MySQL stack. However, lately I&rsquo;ve been more interested in building front end applications with React and Vue. The shift towards using language-agnostic API&rsquo;s to access data is interesting to me, and I plan on implementing it more in my future projects. What past projects are you most proud of and why?To be honest, I&rsquo;d have to pick some of my earlier projects where I was learning so much as I went, and creating things in ways nobody would recommend duplicating. I remember making some truly &ldquo;Frankenstein&rdquo; applications and getting them to work somehow, it was so much fun. We know you&rsquo;ve developed a lot in WordPress and are now going API-first. What&#39;s your process for building apps for your clients?&nbsp;I have been building WordPress sites for over a year at a small agency. As I became a better developer, I grew increasingly frustrated with WordPress. I prefer to develop locally with modern build tools, which means I&rsquo;m constantly syncing databases
between my local server and development servers, and if that&rsquo;s not enough of a headache, trying to collaborate with another developer on a project is complete misery. One solution I toyed with was the &ldquo;headless WordPress&rdquo; approach, which
is just using the WordPress API to deliver the content to a separate front end application. This worked to an extent, but it&rsquo;s really forcing the platform to behave in a way it wasn&rsquo;t intended to be used. This also adds unnecessary confusion
for the client.This is where Cosmic picks up the ball and runs with it. The simple interface is perfect for clients, and familiar enough for them to feel comfortable editing content. Collaborating with a fellow developer is now so simple with the one-click deployments from our GitHub repositories. I will not miss the days of syncing WordPress databases across multiple environments. Cosmic has allowed me to create more efficient development processes that reduce headaches and time in getting products to market. What are some technologies you are excited about that you are using today, or want to learn more about?I&rsquo;m really enjoying React with Redux. It pairs perfectly with Cosmic as the backend, and allows me to create cool applications in a much shorter time-period. Cosmic Developer Spotlight Series<a href="https://www.cosmicjs.com/blog/developer-spotlight-micah-walter" rel="noopener noreferrer" target="_blank">Micah Walter</a> <a href="https://www.cosmicjs.com/blog/developer-spotlight-joe-tuson" rel="noopener noreferrer" target="_blank">Joe Tuson</a> <a href="https://www.cosmicjs.com/blog/developer-spotlight-coding-dojo" rel="noopener noreferrer" target="_blank">Coding Dojo</a> <a href="https://www.cosmicjs.com/blog/developer-spotlight-simple-media" rel="noopener noreferrer" target="_blank">Simple Media</a> <a href="https://www.cosmicjs.com/blog/developer-spotlight-jon-kalfayan" rel="noopener noreferrer" target="_blank">Jon Kalfayan</a> <a href="https://www.cosmicjs.com/blog/developer-spotlight-jon-bloomer" rel="noopener noreferrer" target="_blank">Jon Bloomer</a><a href="https://www.cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a> is an API-first cloud-based content management platform that makes it easy to manage applications and content. If you have questions about the <a href="https://www.cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic API</a>, please reach out to us on <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">Twitter</a> or join the community on <a href="https://www.cosmicjs.com/community" rel="noopener noreferrer" target="_blank">Slack</a>.

Start building today