What is a sales funnel? And why is it important? A sales funnel is a path that your website&#39;s visitors take before purchasing a product. If you don&rsquo;t understand your sales funnel, you can&rsquo;t optimize it. Building a great sales funnel can
influence how visitors move through the funnel and whether they eventually convert. In this little demo I will be showing you how to build a simple, one-page sales funnel using Node JS, Cosmic, and Stripe for handling credit card
payments.<h2>TL;DR</h2><ul><li><a href="https://cosmicjs.com/apps/single-page-sales-funnel" rel="noopener noreferrer" target="_blank">Demo</a></li><li><a href="https://github.com/cosmicjs/nodejs-sales-page" rel="noopener noreferrer" target="_blank">Source code</a></li><li><a href="https://stripe.com/docs/stripe-js/elements/quickstart/" rel="noopener noreferrer" target="_blank">Stripe</a></li><li><a href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a></li></ul> <h2>Why did I pick Cosmic</h2>If you need to build a sales page quickly and freely, you can simply sign up for a free Cosmic account, copy my app, customize it and you&#39;re done. You&#39;ll have you sale funnel page ready in minutes. If you need to add a section or features then
you can simply download the source-code and change any of the markup or the JavaScript behind this application.<h2>How to clone your own version of this app:</h2>In order for you to clone this application and have your own custom copy, you need to following these steps:<ul><li>Sign up for a free Cosmic account</li><li>Login into Cosmic account</li><li>Go to the <a href="https://cosmicjs.com/buckets" rel="nofollow">buckets</a> page</li><li>Click on <code>Add New Bucket</code> button on the top right of the page</li><li>Select <code>Choose an app below option</code> and scroll to the applications list</li><li>Try to find the <code>Sales Funnel</code> application</li><li>Once you open the application click on the <code>Install Free</code> button</li><li>You can keep the same title and hit the <code>Install App</code> button to confirm</li><li>Then you will be taken to the application bucket</li><li>Then you need to clone the github repo. Open the terminal window and type:</li></ul><pre><code>git clone <a href="https://github.com/cosmicjs/nodejs-sales-page" rel="noopener noreferrer" target="_blank">https://github.com/cosmicjs/nodejs-sales-page</a>
cd <a href="https://github.com/cosmicjs/nodejs-sales-page"></a>nodejs-sales-page
npm install
</code></pre><ul><li>edit and change Cosmic and Stripe API keys located in <code>/crowd-pitch/.env.local</code> file</li></ul><pre><code>COSMIC_BUCKET=your-bucket-slug
COSMIC_READ_KEY=your-cosmic-read-key
COSMIC_WRITE_KEY=your-cosmic-write-key
STRIPE_KEY=your-stripe-api-key
</code></pre><ul><li>Run the app server on your local machine</li></ul><pre><code># start the app
npm run server
</code></pre><ul><li>open the application from your browser on <a href="http://localhost:3000/" rel="nofollow">http://localhost:3000</a></li></ul><h2>How to customize the application content</h2>In order for you to change the text, images, and application content you need to follow these steps:<ul><li>Login to <a href="https://cosmicjs.com/buckets" rel="nofollow">Cosmic dashboard</a></li><li>Go to buckets --&gt; crowd-pitch</li><li>Go to Pages --&gt; Google cash machine</li><li>Change the pages section by editing the text for each part of the web page like the page title, header....</li><li>Change the page images by adding your own images. Make sure to keep the same image title and slug.</li><li>Hit save and publish</li></ul>This part works like any CMS system, where you make changes to the back-end and the site can change immediately.<h2>How to add new features to this application</h2>This part and below would be an explanation on how the application front-end was developed and how you can dig deeper to customize more options like the layout, css, colors, and which fields to collect from the user. This application was build mainly
using Node JS, and Stripe API. So let&#39;s take a look at the server.js file <div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/mtermoul/3ac8e7957a1edb9069a2dc8eff171798' class='embedly-card'></a>"><a href="https://gist.github.com/mtermoul/3ac8e7957a1edb9069a2dc8eff171798" class="embedly-card"></a></div>As you can see from the code above we are using the following Javascript components:<ul><li><a href="https://www.npmjs.com/package/express" rel="nofollow">Express:</a> a light weight web server for node</li><li><a href="https://www.npmjs.com/package/express-handlebars" rel="nofollow">Express-Handlebars:</a> This html templating library for <a href="http://handlebarsjs.com/" rel="nofollow">handlebars.js</a> syntax</li><li><a href="https://www.npmjs.com/package/cosmicjs" rel="nofollow">CosmicJs:</a> to handle interaction with Cosmic API from the server</li><li><a href="https://www.npmjs.com/package/stripe" rel="nofollow">Stripe:</a> to handle interaction with <a href="https://stripe.com/docs/payments" rel="nofollow">Stripe payment API</a></li></ul>Inside the server.js there is basically two function to handle server routing:<ul><li>app.get(&#39;/&#39;) to handle the get request when the user visits the application. Inside this function we simply call Cosmic to fetch all data from our bucket and inject it as a server response local variable. The second part is just rendering the
home view which is just an HTML/Handlebars template page.</li><li>app.post(&#39;/pay&#39;) to handle the payment form posting. Inside this function there is simply one call to Stripe charges API to add one charge to the specified credit card.</li></ul><h2>How to customize the layout and CSS for the application?</h2>As mentioned before, in this app we are using handlebars.js for the page templating. From the server get function we render <code>views/home.handlebars</code> page which is simply an html page with some handlebars tags to replace server variables with values from Cosmic CMS. Let&#39;s take a look: <div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/mtermoul/9cbf6fc2afaed53b37f82cd5f1acd111' class='embedly-card'></a>"><a href="https://gist.github.com/mtermoul/9cbf6fc2afaed53b37f82cd5f1acd111" class="embedly-card"></a></div>As you can see, we reference server variables within a double curly brackets. For instance <code>{{ cosmic.metadata.top_logo.url }}</code> means get the value of variable from Cosmic, which the logo image url and put it in the home view page. There are also similar syntax to handle if and loop using handlebars syntax. For a full syntax help, please refer to <a href="http://handlebarsjs.com/" rel="nofollow">Handlebars User Documentation</a>.You can also change some of the styling of the page from within home view page because we are simply using <a href="https://getbootstrap.com/docs/4.3/getting-started/introduction/" rel="nofollow">Bootstrap framework</a>. For some other styling properties you can change it directly from <code>/public/css/styles.css</code>For the application layout there the file <code>/views/layouts/main.handlebars</code> <div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/mtermoul/c236fb329dcb67a2d75841777c2a5ac0' class='embedly-card'></a>"><a href="https://gist.github.com/mtermoul/c236fb329dcb67a2d75841777c2a5ac0" class="embedly-card"></a></div>This is basically the main html template for every page in our application. It&#39;s worth mentioning that we are referencing a couple of libraries from the client side like:<ul><li>JQuery</li><li>Stripe</li><li>Bootstrap</li><li>Font-awesome</li><li>Axios.js to handle Ajax calls</li></ul><h2>Handling credit card payment with Stripe and Axios</h2>To accept credit card payments in our application we use three steps process.<ul><li>first we use <a href="https://stripe.com/docs/stripe-js/elements/quickstart" rel="nofollow">Stripe card elements</a> to inject the credit card input element inside our html form.</li></ul><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/mtermoul/e20ee070d2d49673e60af22be432e48b' class='embedly-card'></a>"><a href="https://gist.github.com/mtermoul/e20ee070d2d49673e60af22be432e48b" class="embedly-card"></a></div><ul><li>Validate the credit card info by calling <code>stripe.createToken</code> when the user hit the submit payment button. This function will simply send the info to Strip API and get a valid token if success. Otherwise it will return an invalid token.</li><li>Post the payment form form data to the server post method. This method will take data submitted from the client form and submit them again as a stripe charge by calling <code>stripe.charges.create</code>. Take a look:</li></ul><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/mtermoul/4e2c5adef4236256c1f907af2d100932' class='embedly-card'></a>"><a href="https://gist.github.com/mtermoul/4e2c5adef4236256c1f907af2d100932" class="embedly-card"></a></div>As you can see, once the charge is sent to stripe, we will return success to the client if no errors from Stripe. Otherwise we will emit Stripe errors back to the client.<ul><li>The last step is on the client side, we will display the payment result on the client form if success, or the error message if the payment fails.</li></ul><h2>How to add multiple page funnel to my application.</h2>Sometimes the application will need more than one page to capture the user final action. If you want to do that, you can simply add more pages to the server view, more routes, and handle the post from one page to the other either via javascript functions
or server post methods.<h2>What about the main.js file?</h2>This file contains one function right now to handle count down counter. However you can use it if you any other javascript interactions with your user. For the count down counter we store a variable on Cosmic server called<pre><code>const dealCountDown = {{ cosmic.metadata.deal_countdown }};
</code></pre>and then we calls the <code>initializeClock</code> function which will run the count down until this variable reaches zero.Take a look at the main.js file for the full implementation details. <img src="https://cosmic-s3.imgix.net/e8530730-7536-11e9-add3-5fb6959d341f-crowd-pitch-preview.gif" style="width: 665px;" class="fr-fic fr-dib"> <h2>Check user engagement with A/B testing</h2>As most marketers have come to realize, the cost of acquiring any quality traffic can be huge. A/B testing lets you make the most out of your existing traffic and helps you increase conversion without having to spend on acquiring new traffic. A/B testing can give you high ROI as sometimes, even the most minor changes can result in a significant increase in conversions. For the purpose of this app, I will add two <code>style.css</code> files and once the user visits the site I will be randomly selecting one stylesheet. The stylesheet selection will affect how the color theme will look like. So basically the user can see either version A of the site or version B. <div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/mtermoul/80e8afc5fcc30ae6e0b58abb0f2df6d2' class='embedly-card'></a>"><a href="https://gist.github.com/mtermoul/80e8afc5fcc30ae6e0b58abb0f2df6d2" class="embedly-card"></a></div>Then we load either style A or B on the `main.handlebars` file like this: <div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/mtermoul/7075eb49b89e17c327858a201b12a599' class='embedly-card'></a>"><a href="https://gist.github.com/mtermoul/7075eb49b89e17c327858a201b12a599" class="embedly-card"></a></div> We also have a javascript variable that will be used during the payment process to capture which page the user is coming from. This info will be stored along Stripe charge information. <pre><code>const pageSource = {{#if pageB}} &#39;pageB&#39; {{else}} &#39;pageA&#39; {{/if}};</code></pre> then we save the page source along the stripe charge on the server post method.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/mtermoul/92a1c9c9e50aded4c0e3d50afc25a996' class='embedly-card'></a>"><a href="https://gist.github.com/mtermoul/92a1c9c9e50aded4c0e3d50afc25a996" class="embedly-card"></a></div><h2>Conclusion</h2>In this application, I&#39;ve demonstrated how you can build a page that displays product info and handles credit card payments by leveraging the power of the Cosmic CMS plus a few other libraries that handle the payment function. You can add a function
that will send an email to the user after the payment is submitted. Or add a function to send a user to another secure page to all him to download the digital product. The Cosmic Community &nbsp;has a lot of examples on how to handle integration with
email functions, download functions, and third party platforms.As always, I really hope that you enjoyed this little app, and please do not hesitate to send me your thoughts or comments about what could I have done better.If you have any comments or questions about building apps with Cosmic, <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join the conversation on Slack</a>.

How to Build a Single-Page Sales Funnel App using Node.js, Cosmic and Stripe

<section name="4b56">It&rsquo;s been quite a while since I last created a demo application for <a data-href="https://cosmicjs.com/" href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a>, and it&rsquo;s been refreshing to see how much the platform has grown over the last year as it&rsquo;s taken on new endeavours and has solved new business challenges in the process. One of the improvements that&rsquo;s been added overtime are the substantial amount of new plugins and integrations, along with some nice hidden improvements to how Cosmic handles and manages localized content.</section><section name="3b6d"><hr><h3 name="b6e0">TL;DR:&nbsp;</h3><a href="https://cosmicjs.com/apps/gatsby-localization-app-starter" rel="noopener noreferrer" target="_blank">Gatsby Localization Starter App</a><a href="https://github.com/cosmicjs/gatsby-localization-app-starter" rel="noopener noreferrer" target="_blank">Download the codebase</a><h3 name="b6e0"> </h3><h3 name="b6e0">Before We Start</h3> <a data-href="https://cosmicjs.com/" href="https://cosmicjs.com/" rel="noopener" target="_blank">Cosmic&nbsp;</a>is a CMS platform that lets you leverage your content in a way that&rsquo;s agnostic to any specific platform. Essentially, it decouples you from having to lock your content down to a single framework, enabling you to implement and extend your own content as you wish. One of the most recent additions to the Cosmic toolbelt is the <code><a data-href="https://github.com/cosmicjs/gatsby-source-cosmicjs" href="https://github.com/cosmicjs/gatsby-source-cosmicjs" rel="noopener" target="_blank">gatsby-source-cosmicjs</a></code> plugin for <a data-href="https://www.gatsbyjs.org/" href="https://www.gatsbyjs.org/" rel="noopener" target="_blank">GatsbyJS</a>, allowing you to embed your Cosmic content into a statically generated React application. GatsbyJS is basically the effective way to leverage static hosting (for that sweet SEO gain), but still allowing you to leverage the abilities of a dynamic React environment.As a means of helping people like me who are into the essentials, and then building up from that, I&rsquo;ve created a minimalist Cosmic + Gatsby localisation starter application.<blockquote name="2b3d">What is localization anyways?</blockquote><blockquote name="2372">Localization is the act of making your content accessible to individuals outside of the language boundary you are typically used to, or simply put, the act of making websites comprehensive for people who don&rsquo;t speak the same language. Website localization is also a form of web accessibility, in the sense that by implementing it you are enabling a larger section of your preferred demographic to digest your content, which is great for everyone, including your add revenue, or just overall site traffic.</blockquote></section><section name="3fb4"><hr><h3 name="e5b0">Installing the demo (from Cosmic App&nbsp;Section)</h3> <a data-href="https://cosmicjs.com/apps" href="https://cosmicjs.com/apps" rel="noopener" target="_blank">Cosmic provides an easy-to-use means of creating your own clone of this starter application from their own web interface</a>. If you don&rsquo;t like getting your hands too dirty, or just would like to give the starter app a test drive, you can access it from here. The prompts will guide you in creating an account and creating the necessary items.</section><section name="96ad"><hr><h3 name="8749">Installing the demo (from&nbsp;source)</h3> The project source can be found here on GitHub. After cloning the repository, you should have something that loosely resembles the following structure.<pre><code>.gitignore
config.js
gatsby-config.js
gatsby-node.js
package.json
package-lock.json
LICENSE
src
├── components
│   ├── atoms
│   │   ├── HeaderNav.js
│   │   ├── HTMLContentArea.js
│   │   ├── LocaleSelector.js
│   │   └── PostTile.js
│   ├── layouts
│   │   ├── Blog.js
│   │   ├── common
│   │   │   ├── Container.js
│   │   │   ├── GlobalStyles.js
│   │   │   └── Head.js
│   │   └── Default.js
│   ├── modules
│   │   ├── BlogPost.js
│   │   ├── SitePage.js
│   │   ├── SitePostListing.js
│   │   └── withLocale.js
│   └── molecules
│   ├── Footer.js
│   ├── Header.js
│   └── PostList.js
└── pages
 └── index.js</code></pre>Also make sure you <code>npm install</code> so you have the needed repositories for running the Gatsby starter application. <h4 name="60b8">Configuring the base&nbsp;project</h4> The project itself has two main files that are intended to be configure. <code>gatsby-config.js</code> is responsible for specifying which Cosmic Bucket to source your content from, while the <code>config.js</code> file is used for configuring various front-end portions of your application.To ensure that Gatsby is able to read your Cosmic Bucket, you need to fill out the areas within <code>gatsby-config.js</code> that resemble the following:<pre>module.exports = {
 plugins: [
 &#39;gatsby-plugin-emotion&#39;,
 &#39;gatsby-plugin-react-helmet&#39;,
 {
 resolve: `gatsby-source-cosmicjs`,
 options: {
 bucketSlug: &#39;minimal-gatsby-localisation-site&#39;,
 objectTypes: [&#39;blog-posts&#39;, &#39;pages&#39;],
 apiAccess: {
 read_key: ``,
 }
 }
 }
 ],
}</pre>For the above, ensure that the <code>bucketSlug</code> values correlates with your own Cosmic Bucket, and that the <code>apiAccess.read_key</code> is present if you&#39;ve configured your bucket to require it. Also make sure you have <code>blog post</code> and <code>pages</code> Nodes within your Bucket, otherwise the <code>gatsby-source-cosmicjs</code> will not have the correct Gatsby GraphQL queries (preventing you from running the demo)<h3 name="5e8b">Running the&nbsp;demo</h3> To start the demo (in development mode) after all dependencies have been started, simply run <code>npm start</code>, or alternatively <code>npm run develop</code>. The project will then (by default) be accessible on port <code>8000</code> on <code>localhost</code>. The console output of the command will also let you know in case its been configured otherwise.The first thing you see should resemble this:<figure name="cbe0"><img data-image-id="1*pqAh4Lt_YRrU00fUr3eXbw.png" data-width="1107" data-height="970" src="https://cdn-images-1.medium.com/max/800/1*pqAh4Lt_YRrU00fUr3eXbw.png" class="fr-fic fr-dii"></figure></section><section name="ff94"><hr><h3 name="7463">How it&nbsp;works</h3> This localization starter app in particular relies heavily on the <code>locale</code> value that&#39;s bound to each Cosmic Object. While each Object would normally require each item to have a unique <code>slug</code> constraint (meaning that slug would need to be unique among all other nodes of a given type): because we&#39;d have localization enabled for this particular projection, we no longer need to worry about that. With localization, an Cosmic Object can have have the same <code>slug</code> value given that each variant also has a unique <code>locale</code> specified.The <code>withLocale</code> component from <code>src/components/modules/withLocale.js</code> contains login that&#39;s responsible that a connected Gatsby page, can resolve which locale a given Page or Blog Post should be shown with, and any alternative links based on a resources available locale variations. So for example, if a blog post with a slug of <code>example-post</code> has locale variants in <code>en-US</code> and <code>es-AR</code>, the correct page to show will be determined by:<ul><li name="4f83">The <code>locale</code> specified in the Gatsby <code>pageContext</code> value (if present)</li><li name="eb1a">The <code>locale</code> detected from the url</li><li name="651c">The first available <code>locale</code> value of the resource being presented</li></ul>Each of these values are compared against the value of <code>window.navigator.languages</code> and the value of <code>fallbackLocale</code> within <code>config.js</code>. This is helpful in situations where the content type being requested isn&#39;t actually available for a specific Page or Blog Post, or when the page has no contextually available <code>locale</code>, such in the case of <code>src/pages.index</code>, which will redirect to the most preferable locale based on browser config.<code>withLocale</code> is also responsible for resolving a value called <code>alternateResourceUrls</code>, which is a key-value mapping of alternate locales of the currently shown page. This is used by components such as the <code>src/components/atoms/LocaleSelector</code>.</section><section name="595c"><hr><h3 name="c31a">Project structure</h3> The overall design structure of this application is minimal, loosely following the Atomic Design principles, in the sense that:<ul><li name="ee25"><code>src/components/atoms</code> contains components that don&#39;t solely depend on other complex child components</li><li name="3eed"><code>src/components/layouts</code> contains components responsible for grouping various components together</li><li name="f4e3"><code>src/components/modules</code> contains components responsible for representing connected (dynamic values)</li><li name="d9cb"><code>src/components/molecules</code> contains components that are abstract configurations of <code>atoms</code></li></ul><code>src/pages</code> is responsible for storing static Gatsby pages that are usually mapped 1-1 like normal html pages. As such, files named <code>index</code> are treated as directory files, and files named anything represent a static path relative to the root.<h4 name="b6e2">Why does this starter project not have any static query&nbsp;pages?</h4> As a localized starter application, the content being rendered is inherently dynamic, since it&rsquo;s not capable of being mapped easily within a static application without requiring path subsets. Adding a static React page (i.e. <code>localhost:8000/pictures-of-cats</code>) would be the equivalent of making a <code>default export</code> React component in <code>src/pages/pictures-of-cats.js</code>.</section><section name="95df"><hr><h3 name="8fac">Where are the CSS&nbsp;files?</h3><figure name="cc57"> </figure><figure name="cc57"><figcaption>This starter application leverages a CSS-in-JS technology called <a data-href="https://emotion.sh/docs/introduction" href="https://emotion.sh/docs/introduction" rel="noopener" target="_blank">Emotion</a>, which removes the requirement of serving static CSS. &nbsp;In SSR this is beneficial since it&#39;s deterministic nature allows more predictable style hydration and preloading.</figcaption></figure> <h4 name="b2a9">Creating an styled component or usable CSS&nbsp;class</h4> Emotion provides two* main ways of generating reusable styles for components.One is via <code>@motion/styled</code>, which enables you to generate elements with bound <code>className</code> attributes.<pre>import React from &#39;react&#39;;
import styled from &#39;@emotion/styled&#39;;

// direct format
const yourCoolStyledComponent = styled.div`
 color: red;
`;

// component wrapping format
const SomeActualComponent = ({ className }) =&gt;
 <div>
</div>;

const yourCoolAlternateStyledComponent = styled(SomeActualComponent)`
 color: blue;
`;</pre>The second form is via the <code>{ css }</code> helper from <code>@emotion/core</code>. It allows you to generate deterministic (and reusable) class names;<pre>import React from &#39;react&#39;;
import { css } from &#39;@emotion/core&#39;;

const customCssClassName = css`
 color: green;
`;

const CoolDiv = () =&gt; (
 <div>
</div>
);</pre><blockquote name="2c5d">There are more advanced examples of what you can do from the emotion documentation <a data-href="https://emotion.sh/docs/introduction" href="https://emotion.sh/docs/introduction" rel="noopener" target="_blank">here</a>.</blockquote><h3 name="a121">Managing content</h3>In order for this starter application to work, a few assertions must be made.<ol><li name="d953">You should already have <code>Pages</code> and <code>Blog Posts</code> Objects configured for your bucket</li><li name="9177">Each Object needs to have localisation enabled</li><li name="dc37">Each <code>Page</code> and <code>Blog Post</code> should have the same <code>locales</code> available and should have each locale variant present.</li></ol>So your environment should look something like this:<figure name="eadf"><img data-image-id="1*aqmXXAEcZl82cJYgXuTNGw.png" data-width="1164" data-height="590" src="https://cdn-images-1.medium.com/max/800/1*aqmXXAEcZl82cJYgXuTNGw.png" class="fr-fic fr-dii"></figure><figure name="67f9"><img data-image-id="1*ZqYjt5DvddGf13JFteZMwA.png" data-width="1215" data-height="874" src="https://cdn-images-1.medium.com/max/800/1*ZqYjt5DvddGf13JFteZMwA.png" class="fr-fic fr-dii"></figure><h4 name="92be">Enabling localization for Cosmic Object Types</h4>On left left hand sidebar under <code>Dashboard</code> after creating each respective Object Type you should have <code>Blog Posts</code> and <code>Pages</code> as small folder icons visible under the dashboard. From that same interface, you should also see a small <code>cog</code> near the top of the listing. Clicking that will bring up an interface to enable localization.Toggle <code>Localisation</code> to <code>On</code> and then, add the locales you&#39;d like to support for your application. The Select Locales button can be used to select the correct locales for the application. These should be same same for both content types.<figure name="b27b"><img data-image-id="1*15gfMJyonYi76jTLLhdP3Q.png" data-width="1168" data-height="869" src="https://cdn-images-1.medium.com/max/800/1*15gfMJyonYi76jTLLhdP3Q.png" class="fr-fic fr-dii"></figure><h3 name="440b">Conclusion</h3><figure name="aaec"><figcaption>Cosmic is an incredibly powerful means of allowing your content to be made available to various locations across the web, and it&rsquo;s localization toolset lets to leverage this in a way where many people can benefit and appreciate your business or personal content, regardless of international barriers. Looking forward to see where the community will be able to take Cosmic to in the future.</figcaption> If you have any comments or questions about building apps with Cosmic, <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join the conversation on Slack</a>.</figure></section>

Create a Localized Website using Gatsby and Cosmic

* This article will assume some basic knowledge of Angular so it can focus on the specific task at hand. Feel free to ask me about any specifics on the implementation you may find unclear<h3 id="tldr">TL; DR</h3><a href="https://cosmicjs.com/apps/ecommerce-personalization" rel="noopener noreferrer" target="_blank">Angular Ecommerce Personalization</a><a href="https://github.com/cosmicjs/angular-ecommerce-personalization" rel="noopener noreferrer" target="_blank">Download the codebase</a> <h2 id="whatarewegoingtobuild">What are we going to build?</h2>This site will be a very simplistic representation of an ecommerce website and its purpose is to show how we can offer a customized experience for everyone. Our data will be stored and served by Cosmic and we will use Angular for our Front-End. <img src="https://cosmic-s3.imgix.net/bef19600-6ad6-11e9-85d0-9fa707d6dd21-Screenshot-2019-04-30-at-01.24.05.png" data-name="Screenshot 2019-04-30 at 01.24.05.png" style="width: 100%;" class="fr-fic fr-dib"><h3 id="howwillitwork">How will it work?</h3>Our storefront will be just a product listing page, showing all products stored in Cosmic, randomly sorted. The products will belong to a number of categories, and each product will show 3 buttons to mock the following behaviors:<ul><li>view -&gt; value: 1</li><li>add to cart -&gt; value: 2</li><li>buy -&gt; value: 3</li></ul>These will represent the different degrees of interest.The user will interact with the site and its interests will be stored in its profile, increasing the corresponding value of each product&#39;s categories.A full interaction would be something like: the user clicks on &quot;buy&quot; a &quot;swimwear&quot; product, increasing its profile score for products belonging to &quot;swimwear&quot;. The page then will sort the page showing more prominently the products
belonging to &quot;swimwear&quot;.<h2 id="preparingourbucket">Preparing our bucket</h2>The first thing we&#39;ll do is prepare our Cosmic bucket. We have to create an empty bucket and three object types:<ul><li>Categories</li><li>Products</li><li>Users</li></ul>Each <code>user</code> will store a <code>sessionID</code> and a JSON object for <code>interests</code>. Each <code>product</code> will have a <code>price</code>, a collection of <code>categories</code> and an <code>image</code>. Categories won&#39;t need any metadata, we will just use its <code>title</code>.If you are as lazy as I am, you can always replicate the demo bucket by <a href="https://cosmicjs.com/apps/xxxxx">installing the app</a>.<h2 id="preparingthesite">Preparing the site</h2>The first thing we need to do is create a new Angular site (I always recommend using the CLI for that). Now, let&#39;s create a HTTP interceptor that will handle the authentication against the Cosmic API, so we don&#39;t need to add this in every call. It will append the <code>read_key</code> parameter for the GET requests and the <code>write_key</code> for everything else.<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/imaka/82ebbb069db57c568799f51dd93c2764.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/82ebbb069db57c568799f51dd93c2764.js" class="embedly-card"></a></div>The product listing will be our only page, so after creating the component, our routes should look like this:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/imaka/9785260c7b98268cd13f64f3de6bb63c.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/9785260c7b98268cd13f64f3de6bb63c.js" class="embedly-card"></a></div><h2 id="theproductlistingpage">The product listing page</h2>We need to show the products, so let&#39;s define our model:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/imaka/f0de7f1d98c4329786db164fd0fac4a7.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/f0de7f1d98c4329786db164fd0fac4a7.js" class="embedly-card"></a></div>*We&#39;ll talk about the Category there later.Now let&#39;s begin populating our service with methods. First of all, we need a <code>getProducts()</code> method:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/imaka/0abbde6eb81803f55666737e2491e176.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/0abbde6eb81803f55666737e2491e176.js" class="embedly-card"></a></div>*We are caching the response, our products won&#39;t change that often and we are going to call this method A LOT...The component itself will be quite simple. For now, it will only have the call two calls to our service:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/imaka/d9ad7bf1590a7ce650ff07525a40a4f4.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/d9ad7bf1590a7ce650ff07525a40a4f4.js" class="embedly-card"></a></div>And this is the HTML:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/imaka/9f14e4559b88d8cc10be621c1d92655e.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/9f14e4559b88d8cc10be621c1d92655e.js" class="embedly-card"></a></div>Have you noticed that <code>app-actions</code> component? It will take care of the actions the user will perform over each product. But let&#39;s talk about the <code>user</code> before that...<h2 id="everythingabouttheuser">Everything about the user</h2>Our user model will be the most &quot;complex&quot; of all. As we will be creating users from the site and retrieving them from Cosmic, we need a more flexible constructor. We also added methods to build a payload object for posting to Cosmic and
another one for managing the interests.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/imaka/67210e14e71a6e1699c7c4b129a248a3.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/67210e14e71a6e1699c7c4b129a248a3.js" class="embedly-card"></a></div>We won&#39;t build a proper authentication journey for our example. Each user will have a sessionID on the browser&#39;s local storage, and we will use that to create and identify users. We&#39;ll keep the user instance on session storage for convenience. In order to keep things tidy, let&#39;s create a <code>user</code> service:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/imaka/25d9fb7f051696c6ff7947305542753e.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/25d9fb7f051696c6ff7947305542753e.js" class="embedly-card"></a></div>The <code>init()</code> method will be used on our <code>app.component.ts</code>:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/imaka/44e6d2744a99ff61d07b60d053243fd4.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/44e6d2744a99ff61d07b60d053243fd4.js" class="embedly-card"></a></div>We will also need a way of setting and getting the user, let&#39;s extend our <code>cosmic.service</code> with the following methods:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/imaka/59a741b6d34ecb38cfff728bbeab6b25.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/59a741b6d34ecb38cfff728bbeab6b25.js" class="embedly-card"></a></div>Also note that we created an observable <code>user$</code> that emits every time we set (or update) the user in session, you already saw the subscription on the product listing. More on this at the end of the article.Back to the <code>actions.component</code>. It is a set of three buttons, as follows:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/imaka/2ee807540c097c5fc752706663173d4a.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/2ee807540c097c5fc752706663173d4a.js" class="embedly-card"></a></div>And the methods look like this:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/imaka/0bab64783ffa9add128a1ba5e4be6559.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/0bab64783ffa9add128a1ba5e4be6559.js" class="embedly-card"></a></div>When updating the interests, we also refresh the user in session and we also update the user in Cosmic, we never know when or how the user will leave the site! Let&#39;s go back to our <code>cosmic.service</code> and add this method:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/imaka/b2b38a5127b65291782141db2b338666.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/b2b38a5127b65291782141db2b338666.js" class="embedly-card"></a></div><h2 id="wrappingeverythingup">Wrapping everything up</h2>We have now a way to show products, create users and their interests, update them and store them. That&#39;s it... almost. How does the product listing page change based on all this? There is one last thing we haven&#39;t go through yet: the customSort pipe on <code>product-listing.component</code>. Here is how it looks like:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/imaka/618bfee2810c46320bc9887b148b7c30.js' class='embedly-card'></a>"><a href="https://gist.github.com/imaka/618bfee2810c46320bc9887b148b7c30.js" class="embedly-card"></a></div>This pipe will take the product list and order it by weight, based on the user&#39;s interests provided via arguments...... And that&#39;s the magic: the product listing page is subscribed to the changes in the session user, so every time the user performs an action, the user changes and the sorting re-executes with the changes.That&#39;s all, I hope this would have demonstrated how to offer a customized experience for your users with the help of Angular and Cosmic.

Build an Ecommerce App with Personalization using Angular and Cosmic

This tutorial will show you how to build an e-commerce app using Gatsby and Cosmic. This app will give you a basic idea of how we can integrate an e-commerce app with Cosmic to store our data. In this app example, all order data
will be stored in the Cosmic database and its speed will charm you. Let&#39;s get started. TL;DR<a href="https://cosmicjs.com/apps/gatsby-ecommerce-website" rel="noopener noreferrer" target="_blank">Check out the demo</a><a href="https://github.com/a9kitkumar/Gatsby-Ecommerce" rel="noopener noreferrer" target="_blank">Download the codebase</a> Introduction to the AppHere we are building an e-commerce app in Gatsby with the backend power of Cosmic. We will make some navigation based on an e-commerce website and at the end placed order will be saved on the Cosmic database. Cosmic provides npm module for JavaScript
technologies. Also, it provides API endpoints with the help of which you can directly apply CRUD operations on it. Here we are using API endpoints to store our data.&nbsp; Requirements<ul><li dir="ltr"><a href="https://nodejs.org/en/" rel="noopener noreferrer" target="_blank">Node.js</a> must be installed on your system, it is required to run npm commands. Choose its latest version and install it on your system.</li><li dir="ltr">After node.js, install Gatsby CLI on your system globally. You can find it here: <a href="https://www.gatsbyjs.org/docs/gatsby-cli/" rel="noopener noreferrer" target="_blank">Gatsby CLI</a></li></ul> Let&rsquo;s Get StartedWe assumed that you have installed the above software and CLI. Now run the following command to create a new Gatsby app:<code>gatsby new Gatsby-Ecommerce</code>After executing this command successfully, it is ensured that you have created a new Gatsby app with the name &quot;Gatsby-Ecommerce&quot;. Now to start this, execute the following command from the terminal:<code>npm start</code>It will run your app and opens the port: <a href="http://localhost:8000/"></a><a href="http://localhost:8000/" rel="noopener noreferrer" target="_blank">http://localhost:8000/</a> Configuration with Cosmic Cosmic is two in one service provider that means it gives the facility of database and server as well. So you need to signup for <a href="https://cosmicjs.com/signup" rel="noopener noreferrer" target="_blank">Cosmic</a> first and create a new bucket with any name you want, here we created the bucket with the name Gatsby Ecommerce. Now it is time to create an object type, which means to the data management. Create object type named orders, All orders
will be stored in this object. Now we have to do some basic setting, for this goto basic setting in your dashboard. Have a look at the below screenshot:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/67fc1480-6ab1-11e9-8e11-73687f4b8132-basic-setting.png" class="fr-fic fr-dib">Here you can see the read/write keys fields and other IDs. Click on generate read and write keys and save on any text file along with bucket ID and slug.&nbsp;Now open your Gatsby project in any IDE, here I&#39;m using Visual Basic Code. Now create a folder named config in root od the project and create a new file with name config.js inside the config folder and save the above IDs and keys in the following
format:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/99728fa346ac253c669035b39634ecc0.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/99728fa346ac253c669035b39634ecc0.js" class="embedly-card"></a></div>It is important for you to manage your project properly, so have a look at the screenshot of the folder structure of the project:<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/4919a090-6ab2-11e9-82e0-8508380770be-folder-structure.png" class="fr-fic fr-dib"> Inbuilt BucketYou can also use an inbuilt bucket. For this, you have to import that inbuilt bucket in your Cosmic account. Here we are providing our bucket for you. You just need to follow these steps:<ol><li>Go to our <a href="https://github.com/a9kitkumar/Gatsby-Ecommerce">Git repo</a> and download the bucket.json file</li><li>Now go to your Cosmic dashboard and click on basic settings</li><li>Click on Import/Export and click on Add import file, and import the bucket.json file</li></ol><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/f8070290-6ab3-11e9-8e11-73687f4b8132-import-export-file.png" class="fr-fic fr-dib"> Now everything is ready, we can move to implement our app now Home PageNow we are going to build our app, and the main page is the home page. On this page, we will show the items for shopping. We will add a few items as this app will only show you the compatibility of Gatsby e-commerce app with Cosmic. Location of the home component is <code>src/components/home.js</code>Check the code of the home component, then we will explain it.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/1f302a12c9904d6b7175f79c87996aba.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/1f302a12c9904d6b7175f79c87996aba.js" class="embedly-card"></a></div>This component is stateful, not a stateless component as most of the Gatsby components usually are.&nbsp;In this component, we have shown three products which all are iPhones. Main this is that images of these iPhones are kept in a folder and called through a different component. At line number 91, 94, and 97 you can check how these are imported to home.&nbsp;Here we used the bootstrap modal to show the specifications of the products. Let us explain the working of the main methods.addToCart(): This is an event-driven method and pushes the product to an array when the user clicks on the add to cart.&nbsp;handleiPhone8Close() and handleiPhone8Show(): These are the handlers for bootstrap modals which are used to show the specifications of products.&nbsp;<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/8d0f69d0-6b64-11e9-8c29-39fe44eff7e3-home-page.png" class="fr-fic fr-dib"> iPhones ComponentThe iPhone folder has three components named iphone8.js, iphonex.js, and iphonexs.js. These components only used to add images to other components. We used these components in home page. Actually, these components use <code>&nbsp;&nbsp;</code>for this purpose which makes the images loading very fast on websites. Check the code of one image component: <code>components/iPhones/iphone8.js</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/1881ce52c260367bac09db5ed34e294e.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/1881ce52c260367bac09db5ed34e294e.js" class="embedly-card"></a></div> Cart ComponentWhen the user added products to the cart and click the Show Cart button, then flow of the app goes to another page cart.js. Let&#39;s check the code of this page: <code>src/pages/cart.js</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/5f58f117f8d56b0ba7110e652ef0ff2c.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/5f58f117f8d56b0ba7110e652ef0ff2c.js" class="embedly-card"></a></div>Let us explain each method of cart.js:getProducts(): In this method, we are getting the products which are stored in the cart. For cart, we temporary stores the products in local storage. That means this method is getting the products from local storage.&nbsp;checkingCart(): This method is checking that which product is added to the cart that means this method is filtering the products and calculating the price.&nbsp;onSubmit(): This is an event-driven method, which collecting the details of the order along with user billing details and passing to the method placeOrder() in the cosmicService.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/f8654cf0-6b68-11e9-8c29-39fe44eff7e3-place-order.png" class="fr-fic fr-dib"> Cosmic ServiceThis is the only service in this app which hits the Cosmic API and stores the data to Cosmic database. Check the code: <code>src/services/cosmicService.js</code><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/a9kitkumar/7f799b0ebaddb5bbf39f9c0ab9c7f1c6.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/7f799b0ebaddb5bbf39f9c0ab9c7f1c6.js" class="embedly-card"></a></div>There is only one method in this service named placeOrder() which accepts the seven arguments. It hits the post request to the Cosmic server to save the data. Here we are providing write access key for taking the permission of writing on the Cosmic database. This is an example of storing information in Cosmic; however, it&#39;s never advised to store credit card data in Cosmic.&nbsp; What Functionality We Have Implemented?Till now we have implemented the complete functionality on the development server. That means we can use the complete functionality of the app in development mode. Because it is a Gatsby app created with npm CLI, so it is deployable on any server which allows deployment from node.js app. Here we deployed our app on Heroku server.We created this app with Gatsby CLI and used React.js also to make some components stateful. After using this app, you will understand the power of Cosmic because of its blazing speed.&nbsp; Conclusion With the help of Cosmic we can create powerful apps and can use the Cosmic database for fast data processing. Here we created and configured a Gatsby.js app with Cosmic without any difficulty. You don&#39;t need to install any extra efforts to configure and use Cosmic APIs. For any query or comment related to building apps in Cosmic, reach out to us on <a href="https://twitter.com/cosmic_js">Twitter</a> and join the conversation on <a href="https://cosmicjs.com/community">Slack</a>.

How to build an Ecommerce Website using Gatsby and Cosmic

Hello stranger. &nbsp;Come with me on a short adventure as we build a fast, simple interface for publishing blog style articles. Something sensible. &nbsp;It should look clean and simple yet have the ability to perform powerful resource fetching with
some query magic. I&#39;m talking about Graphql, the query language built with web APIs in mind. And speaking of web APIs, &nbsp;we will also be using our handy Content Management Service: Cosmic, to Create and Store our Blog Data.<h3>TLDR:</h3><a href="https://cosmicjs.com/apps/apollo-blog" rel="noopener noreferrer" target="_blank">Progressive Apollo Blog</a> <a href="https://github.com/jacobknaack/apollo-blog" rel="noopener noreferrer" target="_blank">Progressive Apollo Blog Codebase</a>&nbsp; <h2>0.0 Before You Start</h2>Before you go any further make sure you have the required developer tools installed on your machine. &nbsp;Mainly you will need <a href="https://nodejs.org/" rel="noopener noreferrer" target="_blank">Node JS</a>,&nbsp;its accompanying package manager: npm,&nbsp;and <a href="https://git-scm.com/" rel="noopener noreferrer" target="_blank">git</a>. &nbsp;Git is semi optional and will only be used to code storage and deployment if that is your goal.Once you have those installed we can begin setting up our project and eventually start writing some Javascript.<h3>0.1 Libraries and packages</h3>Let&#39;s go over the main packages that we will use to create our blog platform.<ul><li><a href="https://facebook.github.io/create-react-app/" rel="noopener noreferrer" target="_blank">Create React App</a> - We will be leveraging the ever prevalent React library to build our UI components. &nbsp;To bootstrap our project we will also be using a handy command line tool create-reate-app so that we can spend as little time as possible on configuration and setup and just get to creating meaningful javascript.</li></ul> <ul><li><a href="https://react.semantic-ui.com/" rel="noopener noreferrer" target="_blank">Semantic UI</a>- This is a UI framework that will allow us to import fully styled UI components. &nbsp;No fussing around with tedious CSS specs to get something that looks nice right out
of the gate.&nbsp;</li></ul> <ul><li><a href="https://www.apollographql.com/" rel="noopener noreferrer" target="_blank">Apollo / Graphql</a> - These two packages go hand in hand. &nbsp;Apollo will be used as the Graphql client to make requests to our Graphql server endpoints. &nbsp; It&#39;s easy to configure and very straight forward to use. Again, allowing us to focus on writing less javascript and instead focusing on the high level composition of our application. &nbsp;Graphql of course will allow us to make requests that return only data we care about, letting us efficiently grab content from Cosmic.</li></ul>I believe with all that boring business out of the way, we can start slapping our keyboards!<h2>1.0 Setting Up Our Project</h2>Let&#39;s fire up our terminal and start bootstrapping our project source files. &nbsp;For those that don&#39;t have Create React App installed, we can do that with a simple npm command:<pre>$npm install -g create-react-app</pre>Once this finishes (or you have this package already installed), we can summon our initial project files by running the cli:<pre>$create-react-app apollo-blog</pre>You will notice a fair amount of wizardry occurring in your terminal as our app is bootstrapped with all sorts of powerful libraries and source code. &nbsp;Taking a look at our file system will show a directory titled `apollo-blog`. &nbsp;Changing directories
into this folder will show a structure similar to this:<pre>apollo-blog/
 README.md 
 node_modules/
 package.json
 public/
 index.html
 favicon.ico
 src/
 App.css
 App.js
 App.test.js
 index.css
 index.js
 logo.svg</pre> We should now be able to run:<pre>$npm start</pre>or&nbsp;<pre>$yarn start</pre>This will run the start script stored in our `package.json` file which is all bundled together with Webpack and build tools that will handle compiling all of our React source code and bundling that into files ready to be served to a browser.After the script runs you should see a simple message in your terminal, and your default browser should open to a tab with project running. &nbsp;You should see something like this:<h3>1.1 Installing Javascript Libraries</h3>The next step is installing some npm libraries so that will help quickly create a good looking App Interface as well as easily fetch data from the Cosmic graphql servers.In your terminal run the following command and let&#39;s talk about what each of these packages will be doing for us:<pre>$npm install --save apollo-boost react-apollo graphql dotenv semantic-ui-css semantic-ui-react react-router-dom</pre>apollo-boost / react-apollo / graphql - These guys are going to serve as the main solution for getting our data efficiently and scalably from Cosmic servers to our client side UI. &nbsp;They provide wrappers for our components to be able to configure queries &nbsp;and provide useful variables for data loading and error handling.dotenv - this package will allow is to configure semi sensitive keys so we don&#39;t have to store anything publicly for accessing our Cosmic Bucket.semantic-ui-css / semantic-ui-react&nbsp;- Our UI framework that will let us import pre-styled containers and components letting us focus on programming functionality, spending less time fidgeting with CSS and other styling considerations.react-router-dom - A react library that will allow us to configure url routing logic to control linking within our app and accessing URL parameters.with these installed we can begin writing some javascript!<h3>1.2 Configuring Environment Variables</h3>We are going to add a minimal security precaution so that we won&#39;t let just any request come through our bucket&#39;s API endpoint, &nbsp;feel free to skip this section but be warned that your components will behave a little differently and your bucket
can be queried from anyone with the knowhow to make API Requests. &nbsp;So, you know... don&#39;t put any sensitive info in your buckets.We are going to require a read_key to be attached to every API request to our bucket. &nbsp;You&#39;ll have to generate one by heading to the settings tab for your Cosmic bucket and clicking on Basic Settings. Cosmic&nbsp;&gt; Your Bucket&nbsp;&gt; settings &gt; main.&nbsp;At the top there should be as section titled API Access&nbsp;&gt; API Read Access Key. &nbsp;Click on the button to Generate new key. &nbsp;Copy the key to your clipboard and let&#39;s configure our project
directory with our config file:<pre>$touch .env</pre>this file is going to be used to configure our project with our API Read Access Key so we don&#39;t have to hard code it in with our source code and commit it for the world / other prying eyes to see.simply add one line to your .env file:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/02ab245dadb205758d2632f8fac1eca2' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/02ab245dadb205758d2632f8fac1eca2" class="embedly-card"></a></div>Make sure you prefix your variable name with REACT_APP! &nbsp;The build scripts that bundle our source code will look for this to make variables available in our compiled javascript. &nbsp;With that done, we are now ready to use this
key in our React project.<h2>2.0 Creating our Routes and Components</h2>Finally, we are ready to create our Components and set up our routes. &nbsp;In an effort to keep things as simple as possible we are just creating two routes and two main components:Routes<ul><li><pre>{protocol}://{host}/</pre><ul><li>The home route that will list our article</li></ul></li><li><pre>{protocol}://{host}/article/:articleName</pre><ul><li>The route that will display an article</li></ul></li></ul>Components<ul><li><pre>/views/home.js</pre><ul><li>This component will fetch all articles and display general article info.</li></ul></li><li><pre>/views/article.js</pre><ul><li>The component that will fetch a single article and display all article content.</li></ul></li></ul><h3>2.1 Configuring &nbsp;App.js</h3>Let&#39;s go ahead and open the App.js component in whatever text editor you prefer, and start to configure it with our routing logic and our Graphql client.&nbsp;We are going to import one component wrapper from react-apollo and one constructor function that will let the components within our component wrapper make requests to a specified Graphql server ( for us this will be the Cosmic&#39;s Graphql server). &nbsp;We also want to import our wrapping components for react-router-dom. This will allow us to us our browser url to systematically switch component views and access any url parameters.Lastly we are going to import a CSS file from Semantic UI so that we can leverage it&#39;s class selectors and give imported components their base stylings.Here&#39;s what our App.js should look like after everything is properly configured:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/51a7642e45bbe664557d29c6894fc29b' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/51a7642e45bbe664557d29c6894fc29b" class="embedly-card"></a></div><h3>2.2 Creating The Home View</h3>Let&#39;s create a new file in a new directory&nbsp;<pre>src/views/home.js</pre>This folder will store all of our view layer React Components. &nbsp;Our Home View will just return some brief info about our site and a list of articles that have been published to our blog.The main parts of this component are a heading that display a title and a site description, and a list that will display Semantic UI components.We also will need to configure this view with some Graphql logic so that it can make requests to Cosmic<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/49084a81d0b090fef3bb77221f0b6b02' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/49084a81d0b090fef3bb77221f0b6b02" class="embedly-card"></a></div> Now we have ye old React Component, &nbsp;that will fetch articles from our content manager (Cosmic) before the component renders and pass those as an array on component props.Apollo also gives us some handy properties from is data object, specifically an error object, and a loading boolean, which we use to conditionally render components, such as loading message when the request is fetching, and an error message when our error object returns a message.<h3>2.3 Creating The Article View</h3>With our list of articles displaying on our home page, we need to Create the view that will display the blog content contained in each article object.Let&#39;s create another file in our views directory:<pre>src/views/article.js</pre>Creating this component is similar to the Home View, but our query is going to include an article identifier from our URL stored on a prop: match which react-router-dom creates for us when we render a component at a Route.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/e364c72020afa545546da9e2734351e5' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/e364c72020afa545546da9e2734351e5" class="embedly-card"></a></div>This component is much simpler than our Home component, mostly due to the fact that we are just using the Query&nbsp;component wrapper instead of the turning our component into a higher level component using the Graphql component. &nbsp;This gives us direct access to our Graphql directly in our component logic but does not make it available on component props! So take note.For both components I have included some minimal styling objects in the source code, but feel free to use your creativity and change up the styling properties to create your own look and feel.And that&#39;s it! &nbsp;We have built two relatively simple and scalable React components that are configured to two separate url routes. We can control our views easily with react-router-dom and fetch our data sensibly with the power of Apollo / Graphql and Cosmic.<h2>3.0 Deployment</h2>create-react-app comes bundled with some handy deployment scripts if you feel so inclined to make your application available to the world. &nbsp;<h3>3.1 Running the Build Script</h3>If you take a look at the package.json file that we have a script called build. &nbsp;Running this will compile all your project files and bundle them into a static build directory that is ready to deploy to any hosting service.You&#39;ll also notice after the script finishes that you have an option to publish directly to github pages using the serve module. &nbsp;You just need to add a homepage value in package.json and make sure the serve package is installed with either npm or yarn.Follow the link at the end of the build message to learn more about deployment using this method.<h3>3.2 Deploying Using Netlify and Github</h3><a href="https://www.netlify.com/">Netlify</a> provides app building and deployment services and they will give you a free ( if not a little bit verbose ) URL for you to deploy client side code. &nbsp;The process is pretty easy and we can use a github repository to deploy our code continuously when we make changes to our source code.After you create and account / Log in to the Netlify dashboard, there should be a tab called sites.Clicking the sites tab will reveal a list of sites you have deployed on Netlify. From here you have two options:<ol><li>Deploy using your static build directory created using the build script.</li><li>Connect your Netlify account to a git repository and use continuous deployment. &nbsp;This step requires that you commit your code to a git repository.</li></ol>Deploying the static build directory is super simple but will require you to manually build and upload files to Netlify. &nbsp;Simply drag the build directory directly over the area at the bottom of the sites tab from the Netlify Dashboard. &nbsp;This will automatically deploy your site to a url that Netlify will generate. &nbsp;Simple but requires work every time you update your source code.&nbsp;On the far right side there will be a button that reads New site from Git.&nbsp;Selecting this option will walk you through the process of authorizing Netlify to access a code repository. &nbsp;After these steps are finished Netlify will build your site files from a build script you specify and deploy it automatically each time you make a commit &nbsp;to your repo!<h3>Conclusion</h3>Well that&#39;s it for me today. &nbsp;Happy hacking until we meet again :)If you have any comments or questions about building apps with Cosmic, <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">reach out to us on Twitter</a> and <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join the conversation on Slack</a>.

Building a Progressive Blog App with Apollo and Cosmic

Add dynamic filters to your data with ease, using Vue and the Cosmic Rest API

Documentation?... Documentation. &nbsp;Let&rsquo;s say for a second that you want to create a way to easily publish and read docs, err&hellip; documentation. &nbsp;By the end of this read you will be able to do just that, all with the power of Gatsby
(a static site generator) and Cosmic (an easy to setup and use Content Management System). &nbsp;Grab some coffee, find a comfy chair and let&rsquo;s build something cool.TL:DR<a href="https://cosmicjs.com/apps/gatsby-docs" rel="noopener noreferrer" target="_blank">Gatsby Documentation App Demo</a>&nbsp; <a href="https://github.com/cosmicjs/gatsby-docs-app" rel="noopener noreferrer" target="_blank">Check out the codebase</a>&nbsp; 1.0 - IntroductionWhat is <a href="https://www.gatsbyjs.org/" rel="noopener noreferrer" target="_blank">Gatsby</a>?Gatsby is an easy to use framework for generating static web site files. &nbsp;It comes bundled with all sorts of hotness, like React JS for building web components, and GraphQL for handling our component state without the need to configure something Redux
to handle external data. What about <a href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a>?Cosmic will handle our publishing and data storage. &nbsp;It&rsquo;s easy to set up and easy to implement for apps like this, yet scalable enough to handle more complex projects across larger teams. &nbsp;We will use this to create and store our documentation
content. &nbsp;This will us allowing us to focus on how our users interact with our app, and let Cosmic do all the heavy lifting. Is that all?Well no&hellip; we are going to convert our docs from markdown to html, &nbsp;since that&rsquo;s what web Browsers like. &nbsp;To do this we are going to use a package called <a href="https://play.pokemonshowdown.com/" rel="noopener noreferrer" target="_blank">Showdown</a>, that can handle parsing
and converting markdown to and from HTML. Any Requirements?Oh yeah, you will need to have access to a terminal, a Cosmic account with a<a href="https://cosmicjs.com/getting-started" rel="noopener noreferrer" target="_blank">bucket and a documentation object</a>, and a recent(ish) version of <a href="https://nodejs.org/en/" rel="noopener noreferrer" target="_blank">Node JS</a> installed on your machine in order to install the necessary software to make this app work. &nbsp;I&rsquo;m going to be using yarn to run my build scripts but you can npm if you like. &nbsp;Just remember to choose one(npm or yarn) and stick with it as things can get little hairy when it&rsquo;s time to deploy.Let&rsquo;s Build!! 1.1 - Setting up our Development EnvironmentTo get started we will want to install Gatsby and install our dependencies. &nbsp;Easy peasy. Gatsby uses a handy command line interface (CLI) to build our initial project files. &nbsp;First we will want to install the CLI by installing it globally with npm:<code>$ npm install -g gatsby-cli</code> This gives us access to the `gatsby` command and allows us to initialize our project. &nbsp;Run the following script to create a new directory filled with a project template:<code>$ gatsby new gatsby-docs</code> Wait a second to allow the script to complete and you will notice a new directory created called `gatsby-docs`. &nbsp; Let&rsquo;s see what&rsquo;s inside by changing directories:<code>$ cd gatsby-docs</code> you should see a directory structure similar to this:<pre><code>.
├── node_modules
├── src
├── .gitignore
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md</code></pre> Much of this will look familiar if are used to creating Node applications but some of this will be a little new. You should be able to get a development server up and running by executing the start script:<code>$ yarn start</code> After a second you should see a success prompt letting you know that everything has compiled properly and your app is live. Now you can open up your browser pointing to `localhost:8000` and see the compiled output. &nbsp;It should look something very similar to this: <img src="https://cdn-images-1.medium.com/max/1600/1*1B3nvdm2tPsiwQbtyGKseg.png" style="width: 777px;" class="fr-fic fr-dib">Congrats! You have set up a working Gatsby site. But before we dig into what is going on under the covers let&rsquo;s install the rest of our dependencies that will power our app:<code>$ yarn add cosmicjs showdown highlight.js dotenv node-sass gatsby-plugin-sass gatsby-source-graphql</code>Whoa... That&rsquo;s a lot of newly installed packages, but each of these are super useful I swear.<ul><li dir="ltr"><code>cosmicjs</code> will be used to add new content to our app.</li><li dir="ltr"><code>showdown</code> is the text parser I mentioned that will handle markdown and html conversion.</li><li dir="ltr"><code>highlight.js</code> is going to handle our syntax highlighting inside of our converted markdown text.</li><li dir="ltr"><code>dotenv</code> is an environment variable package that will make sure our sensitive tokens and/or runtime environment is configured from a `.env` file</li><li dir="ltr"><code>node-sass</code> and the <code>gatsby-plugin-sass</code> packages will allow to use <code>.scss</code> files to style our components.</li><li dir="ltr"><code>gatsby-source-graphql</code> will allow us to leverage GraphQL queries on external data (ie - use the Cosmic GraphQL api)</li></ul> With all of that business out of the way we can look at our directory and configure our Gatsby source code to run properly. 2.0 - Configuring GatsbyNow we can dig into our directory and make sure Gatsby is configured properly for using the technologies that will scalably and sensibly power our app. The first file we will want to look into is <code>gatsby-config.js</code>. &nbsp;This file is used to configure high level plugins that allow any source code we write to be bundled properly when our static files are built. &nbsp;It also contains a little
bit of metadata that describes our site site to users and can be queried in our React Components. Here we will add our newly installed plugins to the default configuration you see before you. &nbsp;First we just need to add <code>gatsby-plugin-sass</code> to the plugins list, allowing us to import sass files and leverage sass to write sensible styling specs for each component. Next up we will add an object to end of our plugins list for <code>gatsby-source-graphql</code>&nbsp; that will configure our external GraphQL API endpoint to allow us to fetch data from Cosmic. &nbsp;Here&rsquo;s how things should look:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/398ea713ec6fc0d23939220d98c0677d.js' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/398ea713ec6fc0d23939220d98c0677d.js" class="embedly-card"></a></div><div class="fr-embedly " data-original-embed="<a href='' class='embedly-card'></a>"><a href="" class="embedly-card"></a></div> Now we are set to make GraphQL queries to the Cosmic GraphQL API! &nbsp;Next, Let&rsquo;s talk for a second about Gatsby and how things are going to break down. 2.1 Building our app with GatsbyI&rsquo;ve mentioned that Gatsby is a static site generator, but what does that mean? &nbsp;Gatsby takes all the fancy code we create and produces static files that are pre-configured using the config files we specify. &nbsp;By doing so we get increased
performance for sites that may have lots of images, data to be fetched, and other assets that can slow down web applications. Let&rsquo;s now get some source code created. &nbsp;Our site is going to use just two &lsquo;Pages&rsquo;, one that will serve a home page to list the documentation we&#39;ve created, and one for viewing a piece of documentation. &nbsp;But to fetch the content that we are going to display, we are going to use GraphQL, which we have recently configured. &nbsp;We will need to add some variables to our <code>gatsby-node.js</code> file in order to allow our static files to have the necessary parameters to make API calls. Create a .env file and add your Cosmic environment variablesIn your Cosmic Bucket &gt; Basic Settings menu you will see fields for a bucket-slug and read and write keys down at the bottom. &nbsp;Copy all three of these things and add them to a .env file.At your project root, type into your terminal:<code>$ touch .env</code> Now Create three lines:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/0ff388ede9da09a338f0e46ff742cb20.js' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/0ff388ede9da09a338f0e46ff742cb20.js" class="embedly-card"></a></div> We will use these with our dotenv package to allow our src files to access these variables when necessary. Open up <code>gatsby-node.js</code> and add config variables to pagesWe are now going to use Gatsby&rsquo;s built in node API to give each page in our site access to the environment variable we just created. &nbsp;First we will import the variables from our <code>.env</code> file using dotenv, then we will explicitly set each variable in our page&rsquo;s context. Your file should look like this:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/e28314ce02035eb4f359c97a0d121d6a.js' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/e28314ce02035eb4f359c97a0d121d6a.js" class="embedly-card"></a></div> Creating our first pageNow we are going to create our first page that will grab all of the documentation objects and display them at the root of our site, &nbsp;on <code>index.js</code>. &nbsp;First let&rsquo;s create our list by creating a folder in the components directory titled docs - <code>/src/components/docs/</code> and in that folder we will create a file titled <code>index.js</code>.This will be our module that is first displayed when we render our page after fetching our docs. &nbsp;Here is the source code:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/ad5e6c1d92a70d42cfe3817d1edc916a.js' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/ad5e6c1d92a70d42cfe3817d1edc916a.js" class="embedly-card"></a></div> What&#39;s going on here:This page basically runs a big loop over our <code>docs</code>&nbsp; and returns some fancy jsx. &nbsp;We map through the docs array and produce a Link from Gatsby that contains the title, a date, and some content that uses a a description for the piece of
documentation that was published.Feel free to add any <code>.scss</code> files to this directory as well to get a styling that works for you for the given class names. Update the &#39;home&#39; page with our new componentsNow we can open up our home page file at <code>/pages/index.js</code> and import the components we just created and add them to our returned jsx.&nbsp;<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/258f38acc6d089ad6ee639dfae3fa87d.js' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/258f38acc6d089ad6ee639dfae3fa87d.js" class="embedly-card"></a></div>Now any <code>docs</code> created on Cosmic, will appear here on the home page!Notice the exported query at the bottom of the file. &nbsp;It contains two string type variable that will be present because we set the context object in our gatsby-node configuration.With our newly created home page working, let&rsquo;s create our doc view that will display content from the documentation that we post. Creating our doc display pageInstead of adding a new file to the pages directory in Gatsby, we are going to create a `templates` directory and make a template page that we can configure on build, so that each time a doc is created, a new page can be created when we fetch our Docs
from Cosmic.Start by creating a `templates` directory at your project root, and then creating a <code>docPage.js</code> file within.&nbsp;<pre><code>.
├── _templates
|   ├── docPage.js</code></pre>&nbsp;Now add the page template complete with exported query that will fetch a singular doc from Cosmic.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/c1b8fb47ec96989eb370ed1a92af180d.js' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/c1b8fb47ec96989eb370ed1a92af180d.js" class="embedly-card"></a></div> Nothing will happen with this template until we tell Gatsby that it needs to create a page using this template. We do this so that Gatsby has a chance to fetch our Documentation from Cosmic before it builds the page using the necessary parameters for each GraphQL query at the bottom of <code>docPage.js</code>. &nbsp;We are using static site files after all. Update Gatsby Node to build template pagesLet&rsquo;s go ahead and add an export function to <code>gatsby-node.js</code> so that we are building docPage template from our GraphQL data:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JacobKnaack/692d2e93d3892ca2f1cd827d2a966a94.js' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/692d2e93d3892ca2f1cd827d2a966a94.js" class="embedly-card"></a></div> Now when Gatsby creates its pages, ie - the index page will fetch our docs and create a page for each doc that is retrieved and attach all the necessary params to the page Content of each page. &nbsp;This way our template component is rendered and our
GraphQL query should succeed! 3.0 DeploymentLastly we can talk about deployment and about how static sites work. &nbsp;Deploying this bad boy can be a little tricky since this site uses a static build that won&rsquo;t have the necessary pages of newly created docs until the deployment service has
a chance to rebuild. My recommendation is to use <a href="https://www.netlify.com/" rel="noopener noreferrer" target="_blank">netlify</a> and link your source from GitHub or wherever you store your code. &nbsp;From there you can trigger buildhooks in order to rebuild your site whenever certain events happen. &nbsp;Cosmic will allow a post request to be fired off at an endpoint when objects are created, deleted, edited, etc. &nbsp;So you can easily link the two together to make some magic happen. &nbsp;You can also modify the addDoc method on the createDoc component class to make a POST request to the buildhook whenever you successfully add a doc. Anyway, that&rsquo;s all for me folks! Happy hacking.

How to Build a Documentation App With Gatsby and Cosmic

In this guide, I&rsquo;m going to show you how to use the <a href="https://cosmicjs.com/extensions/imgix-editor" rel="noopener noreferrer" target="_blank">imgix Extension</a> to create and save reusable optimized images for your application. I will begin with a high-level overview of how imgix makes it easy to deliver optimized images to your websites and apps.<h3> TL;DR</h3><a href="https://cosmicjs.com/extensions/imgix-editor" rel="noopener noreferrer" target="_blank">Install the imgix Extension</a><h3 id="toc_1"> How to install the imgix Extension</h3><a href="https://cosmicjs.com/buckets" rel="noopener noreferrer" target="_blank">Login into your Cosmic account</a> and navigate to Your Bucket &gt; Settings &gt; Extensions. Click the&nbsp;Extensions tab to browse all the Extensions, find the imgix Editor Extension and click &quot;Install Free&quot;.<a href="https://cosmicjs.com/extensions/imgix-editor" rel="noopener noreferrer" target="_blank"><img class="fr-dib" src="https://s3-us-west-2.amazonaws.com/cosmicjs/9c8b9bc0-33d0-11e9-9374-67a32b8fd247-Screen-Shot-2019-02-18-at-2.57.31-PM.png" style="width: 100%;"></a><h3 id="toc_2"> What is imgix?</h3><a href="https://www.imgix.com/" rel="noopener noreferrer" target="_blank">imgix</a> is an API-first platform that enables you to optimize your images on the fly. Available optimizations and features include compression, resize &amp; cropping, and face detection, hosted on a global CDN to make sure images are delivered fast. (Luckily, <a href="https://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a> comes with imgix integrated by default on all Buckets and accounts 😁)<img class="fr-dib" src="https://s3-us-west-2.amazonaws.com/cosmicjs/71ccf830-33bb-11e9-97a4-a1a2827512b3-1550521573230.jpg" style="width: 1005px;" data-action="zoom">Blow are some of the ways imgix helps you compress, optimize, resize, format, and add face detection to optimize the experience in your websites and apps. <h4 id="toc_3">Compression/Performance</h4>Compression is crucial for building fast, modern web experiences. Speed is key for SEO, ranking and great user experiences. The imgix Extension provides you with various options to compress your images. You can set Quality and Auto Features&nbsp;for
your required use cases. Auto Features are listed below:<ul><li><a href="https://docs.imgix.com/apis/url/auto/auto#compress" rel="noopener noreferrer" target="_blank">Auto Compress</a> will apply best-effort techniques to reduce the size of the image.</li><li>When <a href="https://docs.imgix.com/apis/url/auto/auto#enhance" rel="noopener noreferrer" target="_blank">Auto Enhance</a> is set, the image is adjusted using the distribution of highlights, mid-tones, and shadows across all three channels&mdash;red, green, and blue (RGB). Overall, the image will look more vibrant.</li><li>With <a href="https://docs.imgix.com/apis/url/auto/auto#format" rel="noopener noreferrer" target="_blank">Auto Format</a>, imgix determines whether the image can be served in a better format by a process called automatic content negotiation. For example, if the browser supports the latest WebP format, it will serve the image in WebP format.</li><li><a href="https://docs.imgix.com/apis/url/auto/auto#redeye" rel="noopener noreferrer" target="_blank">Redeye</a> will apply red-eye removal to detected faces automatically.</li></ul> <h4 id="toc_4">Resize/Crop</h4>Similarly, exact dimensions and perfectly optimized images are very important if you are supporting different screen sizes. For example, you shouldn&#39;t serve retina images on smaller screens. The imgix Extension provides you with the way to create
multiple image sizes for different screen sizes.You can set the Width and Height of the image and choose different fit options. <a href="https://docs.imgix.com/apis/url/size/fit" rel="noopener noreferrer" target="_blank">Clamp, Clip, Crop, and Face area</a> can be used. If you choose Crop, you can set different crop options as well to make it look perfect for listed dimensions. <h4 id="toc_5">Face Detection</h4>If you choose <a href="https://docs.imgix.com/apis/url/face-detection" rel="noopener noreferrer" target="_blank">Face area in Fit options</a> and your uploaded image has faces, you will see different Faces options.&nbsp;<ul><li><a href="https://docs.imgix.com/apis/url/face-detection/faceindex" rel="noopener noreferrer" target="_blank">FaceIndex</a>: lets you choose a face from the image.</li><li><a href="https://docs.imgix.com/apis/url/face-detection/facepad" rel="noopener noreferrer" target="_blank">FacePad</a>: amount of space around the face in the image.</li><li><a href="https://docs.imgix.com/apis/url/mask/mask" rel="noopener noreferrer" target="_blank">Mask</a>: options include ellipse to create circular images for avatar and corners to create a rounded corner image.&nbsp;</li></ul> <h3 id="toc_2">How to use the imgix Extension</h3>After installing the imgix Extension, you will see a new tab on the left hand sidebar titled imgix Extension.Upload images<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/82bbf140-33d0-11e9-83d3-c3e95ccbfdf6-Screen-Shot-2019-02-18-at-2.56.44-PM.png" style="width: 100%;" class="fr-fic fr-dib" data-action="zoom">Set optimization parameters<img class="fr-dib" src="https://s3-us-west-2.amazonaws.com/cosmicjs/1db78a60-33d1-11e9-b07c-59ade7c06a1a-Screen-Shot-2019-02-18-at-3.00.54-PM.png" style="width: 100%;">After uploading your images, you will be prompted to set optimization parameters such as quality, auto, crop/resize, face detection, etc. After saving your optimized images, they will be made available in a newly created Object (Imgix Images).You can save multiple optimized images and your master image will not be affected. For example, you can have one image optimized for web and one for mobile using a combination of crop and quality parameters.<h3 id="toc_2"> How to add imgix optimized images in your application</h3>After you have generated your optimized images, you can use them in your application. You will notice that the optimized images will be made available in the metadata of the master image Object under <code>optimized_images</code>.imgix Image Object<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/19542d10-33cd-11e9-83d3-c3e95ccbfdf6-Screen-Shot-2019-02-18-at-2.32.22-PM.png" style="width: 100%;" class="fr-fic fr-dib" data-action="zoom"> Now that you have your imgix images saved, you can use your optimized images using the REST API response. (You can also use the <a href="https://www.npmjs.com/package/cosmicjs" rel="noopener noreferrer" target="_blank">NPM module</a> or <a href="https://cosmicjs.com/docs/graphql" rel="noopener noreferrer" target="_blank">GraphQL API</a>, just look for the <code>optimized_images</code> response)<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/807cb700-33cd-11e9-83d3-c3e95ccbfdf6-Screen-Shot-2019-02-18-at-2.35.17-PM.png" style="width: 100%;" class="fr-fic fr-dib" data-action="zoom"> <h3 id="toc_6">Conclusion</h3>By using the imgix Extension, you can deliver high-quality images to your users that are optimized to their specific devices and bandwidth. This is another way that Cosmic is integrating with the best tools available, helping you create great application experiences. If you have any questions about this Extension you can <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">join the Cosmic Community on Slack</a> and reach out to <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">Cosmic on Twitter</a>.

How to use the imgix Extension

<blockquote>Thomas Dale is the Head of Account Management for&nbsp;<a href="https://imgix.com" rel="noopener noreferrer" target="_blank">imgix</a>, a powerful real-time image processing and CDN delivery solution. Thomas works with imgix customers and partners to power partnerships, integrations and implementation of the fantastic imgix service.</blockquote><h3> Cosmic + imgix</h3>All of the images you upload to Cosmic are already transformed to imgix URLs, a powerful real-time image processing and CDN delivery solution. &nbsp;This article will help you take advantage of many of the included features of imgix which include optimizing
image formats, compressing, intelligently cropping, and so much more! &nbsp;<h3> Where are my imgix URLs?</h3>Every image you upload to Cosmic is already converted to a imgix URL! &nbsp;Here is a screenshot of the image metafields section in an object: <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/940a1f40-1502-11e9-b639-ff9ababa68ba-Screen-Shot-2019-01-10-at-10.06.23-AM.png" style="width: 631px;" class="fr-fic fr-rounded fr-dib"> You can see that the URL is already an imgix URL! &nbsp;The way you modify an imgix URL is by simply adding a query string following the path. &nbsp;Typically an image&#39;s path ends in the format of the image, for example: &quot;.jpg&quot;. &nbsp;You
would simply add a question mark and then begin entering the query string to modify the image. &nbsp; <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/efa1b160-1502-11e9-aa5e-6f016c618576-Screen-Shot-2019-01-10-at-10.09.26-AM.png" style="width: 623px;" class="fr-fic fr-dib">In the example above, &quot;w=600&quot; will size the image to a width of 600 pixels and &quot;exp=1&quot; will set the exposure setting to 1. &nbsp;It is important to add an &quot;&amp;&quot; in between each of the parameters in the query string. &nbsp;You can see a complete list of the imgix API that you can enter as a query string here: <a href="https://docs.imgix.com/apis/url" rel="noopener noreferrer" target="_blank">https://docs.imgix.com/apis/url</a>.<h3> Most Common imgix Features</h3>auto=format,compressYou will notice that our docs contain a lot of different parameters! &nbsp;So I&#39;m going to try and tell you about a few awesome features to get you started. &nbsp;The first is the auto parameter. &nbsp;I like adding auto=format, compress to all of
my URLs. &nbsp;This will have the image change its format based on several factors:<ol><li>If the browser is Chrome, it will change the format to WEBP. &nbsp;This is a great format by Google that will make your images lighter and look better. &nbsp;It even supports transparency.</li><li>If the browser is not Chrome, it will then determine if the image contains any transparent pixels. &nbsp;If the image does contain transparent pixels (like a logo perhaps?) it will change the format to a PNG8. &nbsp;This is a lighter version of PNG that
supports transparency. &nbsp;If the image does not contain any transparent pixels it will change the format to progressive JPEG. &nbsp;This is supported by all modern browsers, is ~ 10% lighter than a JPEG, and it loads the image by making it slightly
blurred then filling in the image (although this happens extremely quick and can be hard to notice).</li></ol>Just using the auto=format, compress to change formats is already going to have a humongous impact on your image performance. &nbsp;This same API does do a few additional items as well. &nbsp;It will strip the color space from the image, which is about
3 KB. &nbsp;This is no longer needed with modern browsers so it is smart to remove this. &nbsp;Finally, it will compress the quality of the image. &nbsp;If you use this parameter and you feel that the image&#39;s quality is being compressed too much,
you can certainly modify this as well. &nbsp;The way to counter this quality reduction is to add an additional API to the query string identifying what quality level you want. &nbsp;Although the quality number goes from 1-100, please don&#39;t think of
the quality levels as a %. &nbsp;It is simply a number on a scale and each digit is not equal. &nbsp;For example, q=40 is not half the quality of q=80. &nbsp;The default is actually q=75, so that is often a good number to use. &nbsp;Here is an example URL with all of these together:<ul><li><a href="https://assets.imgix.net/examples/vista.png?q=75&auto=format,compress" rel="noopener noreferrer" target="_blank">https://assets.imgix.net/examples/vista.png?q=75&amp;auto=format,compress</a></li></ul>You can see the name of the image is vista.png, because it was originally a PNG. &nbsp;There wasn&#39;t transparency in this image. &nbsp;When you open this in Chrome, it will be a WEBP. &nbsp;When you open this in another browser like Safari, it will
be a progressive JPEG.width, height, &amp; cropOne of the most needed functionalities of an image processing solution is to be able to resize the height and width of an image. &nbsp;A common mistake with websites is using only css to size your images. &nbsp;This will make your image or container the correct size when viewing on your website, but the image being loaded may be a much larger image. &nbsp;If you were to inspect an image with your browser&#39;s dev tools, it will often show the size the image is viewed and the actual size of the loaded image: <img class="fr-dib" src="https://s3-us-west-2.amazonaws.com/cosmicjs/c2d6bf00-184e-11e9-b975-2db2e519051b-1547506215594.jpg" style="width: 542px;"> This image is viewed as a smaller thumbnail that is 168 pixels wide by 112 pixels tall. &nbsp;It is actually loading a 3008 wide by 2000 pixel tall image! &nbsp;But I can modify this URL from <a href="https://cosmic-s3.imgix.net/112a4440-7857-11e7-998b-6dbc6e078b76-will-langenberg-8989.jpg" rel="noopener noreferrer" target="_blank">https://cosmic-s3.imgix.net/112a4440-7857-11e7-998b-6dbc6e078b76-will-langenberg-8989.jpg</a> (which is 1.1 MB) to include auto=format,compress (my favorite combo!) and then add a w=200 to lower the width of the image. &nbsp;You will notice that I also added a dpr=2; this will set the device pixel ratio to 2, which essentially doubles the width but will improve the look of smaller thumbnails in mobile devices.&nbsp; <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/199b9220-18f9-11e9-ad3b-3160874732bc-Screen-Shot-2019-01-15-at-11.09.26-AM.png" style="width: 413px;" class="fr-fic fr-dib">With these changes, the image is now 16.1 KB (or 15.4 KB in a Chrome browser): <a href="https://cosmic-s3.imgix.net/112a4440-7857-11e7-998b-6dbc6e078b76-will-langenberg-8989.jpg?auto=format,compress&w=200&dpr=2" rel="noopener noreferrer" target="_blank">https://cosmic-s3.imgix.net/112a4440-7857-11e7-998b-6dbc6e078b76-will-langenberg-8989.jpg?auto=format,compress&amp;w=200&amp;dpr=2</a> A note on cropping. &nbsp;You will notice that I entered a w=200 and I did not enter a height. &nbsp;By default, imgix will respect the current aspect ratio of the image and set the height appropriately. &nbsp;If you did want a square, you could set a w=200&amp;h=200&amp;fit=crop. &nbsp;This would create a square and crop to the center of the image. &nbsp;There are many other ways to choose how to crop, such as cropping to faces, objects, or focal points. &nbsp;If you want to use one of these methods, I would look at them in the imgix API docs: <a href="https://docs.imgix.com/apis/url/size/crop" rel="noopener noreferrer" target="_blank">https://docs.imgix.com/apis/url/size/crop</a>. <h3>Implementing imgix Changes Across Your Whole App&nbsp;&nbsp;</h3>Taking these changes in mind, I wanted to apply them to a pre-existing app in Cosmic, the <a href="https://cosmicjs.com/apps/vuejs-photo-gallery" rel="noopener noreferrer" target="_blank">Vue.js Photo Gallery</a>. In this app, there is the large gallery
image which is displayed as a background image URL and small thumbnail images displayed in an img tag. &nbsp;I forked the Github article for this and added auto=format, compress to all of the images. &nbsp;<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/14bcc0c0-240d-11e9-95bc-a55f047471f8-fc44ef70-785c-11e7-998b-6dbc6e078b76-mo-baghdadi-109634.jpg" style="width: 100%;" class="fr-fic fr-dib"> <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/627151d0-20f9-11e9-ae95-71b7c8d3ff11-bgimg_cosmic.png" style="width: 100%;" class="fr-fic fr-dib">In the screenshot above you can see the changes I made to the larger gallery images. &nbsp;Since this is a nested string I simply added the imgix string after the imgix_url in the v-bind. &nbsp;For this example, I added a width of 2000 and a quality of
75. &nbsp;This will leave these images at a good quality and size them as a large image. &nbsp;I will be loading my largest original images to this app and I can be sure they will be sized at a correct size for a large gallery image. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/67679d20-20f9-11e9-ae95-71b7c8d3ff11-thumbnail_cosmic.png" style="width: 100%;" class="fr-fic fr-dib"> In the screenshot above you can see the changes I made to the thumbnail images. &nbsp;For this example I had to add an additional function I titled decorateImgixUrl which returns the imgixUrl and appends the imgix API string to the end. &nbsp;For the
thumbnail images I added a width of 200 and a dpr setting of 2. &nbsp;This now resizes the same large image I had uploaded down to 200 width, and the addition of the dpr setting will help to improve the visual quality of these thumbnails in a mobile view. <h3>Conclusion</h3>This is all a pretty simple change, just adding the automatic features as well as resizing, but the effect it had on the demo example for this site was astounding! &nbsp;Originally, this page weighed 3.1 MB but now it only weighs 645 KB!&nbsp;If
you already use the Vue.js photo gallery app, this change has been applied to this app so you can update this easily yourself! &nbsp; Hopefully this brief demonstration shows you how much of an impact using just a few of imgix&#39;s popular features can have on your websites. &nbsp;I encourage you to look through the imgix API docs and see what other features are available for you to
use. &nbsp;

Start building today