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;

Improving Your Image Performance with Cosmic and imgix

<a href="https://gridsome.org/" rel="noopener noreferrer" target="_blank">Gridsome</a> is a static site generator based on Vue.js. It&#39;s inspired by Gatsby but powered by Vue.js instead of React. Today, we&#39;ll develop a simple yet powerful blog using Gridsome.We will integrate the <a href="https://cosmicjs.com">Cosmic</a> headless CMS as a GraphQL datasource for Gridsome and then build a blazing fast blog to demonstrate the power of those systems.<h2>TL;DR</h2><a href="https://cosmicjs.com/apps/gridsome-blog" rel="noopener noreferrer" target="_blank">Check out the demo</a> <a href="https://github.com/cosmicjs/gridsome-blog" rel="noopener noreferrer" target="_blank">Download the codebase</a> <a href="https://github.com/cosmicjs/gridsome-source-cosmicjs" rel="noopener noreferrer" target="_blank">Check out the source plugin</a><h3 id="toc_1">Setting up Gridsome</h3>Fortunately, setting up Gridsome is straightforward. You can <a href="https://gridsome.org/docs/" rel="noopener noreferrer" target="_blank">follow the official documentation</a> to set up a fresh Gridsome project.<h3 id="toc_2">Integrating Cosmic into Gridsome</h3>Gridsome is using datasources, which are wrapped by a GraphQL layer, to fetch the data needed to render your website. What this means is, that, if we can&rsquo;t use one of the official datasource plugins, we have to write our own.<h3 id="toc_3">Writing a custom Cosmic source plugin</h3>Writing a custom source plugin for Gridsome is quite easy. Which I&#39;ll explain below.&nbsp;You can look the <a href="https://github.com/cosmicjs/gridsome-source-cosmicjs" rel="noopener noreferrer" target="_blank">complete code &amp; implementation on GitHub</a>.&nbsp;We can use the <code>axios</code> package to query the Cosmic API &amp; <code>lodash</code> to query the results.<pre><code>npm install --save axios lodash</code></pre>Now create two files in your project. <code>index.js</code> and &nbsp;<code>fetch.js</code>.
In &nbsp;<code>fetch.js</code>, we will simply fetch the results from Cosmic CMS.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/jazibsawar/d50af99119b8a53093cf624c0b7939b2' class='embedly-card'></a>"><a href="https://gist.github.com/jazibsawar/d50af99119b8a53093cf624c0b7939b2" class="embedly-card"></a></div>The code above demonstrates a simple data fetching from Cosmic. It fetches all the Objects in content type and formats it properly. Now, we have to use this function and create datasource for Gridsome.In <code>index.js</code>, we have to use the above fetch code and create Gridsome Datasource Class.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/jazibsawar/7be75d6921d678e01637ae7b70d6da28' class='embedly-card'></a>"><a href="https://gist.github.com/jazibsawar/7be75d6921d678e01637ae7b70d6da28" class="embedly-card"></a></div>The code above demonstrates a very basic implementation. It fetches objects from all the contentTypes mentioned in the config and makes it available to Gridsome to create our blog.&nbsp;Next we have to update our gridsome.config.js file to let Gridsome know about our new datasource plugin.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/jazibsawar/c619b1caabcb1d0f0b13a5208cb170f6' class='embedly-card'></a>"><a href="https://gist.github.com/jazibsawar/c619b1caabcb1d0f0b13a5208cb170f6" class="embedly-card"></a></div>Note: This source plugin is available in NPM repository. You can install using <code>npm i --save gridsome-source-cosmicjs</code><h3 id="toc_4">Querying data with GraphQL</h3>Now that we&rsquo;ve successfully set up our new Cosmic data source, we&rsquo;re able to start the Gridsome development server and check out if everything works as expected.<code>npm run develop</code>You can use the integrated GraphQL explorer <a href="http://localhost:8080/___explore" rel="noopener noreferrer" target="_blank">http://localhost:8080/___explore</a> to test your GraphQL queries. You can view your website by opening http://localhost:8080 in the browser.<h3 id="toc_5">Building a landing page &amp; post page</h3>Everything is set up &ndash; let&rsquo;s build some pages to render the data provided by the Cosmic CMS.In Gridsome project, go to <code>src/pages/Index.vue</code> and past the following code:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/jazibsawar/095ada844db1e17088c9f76483898f97' class='embedly-card'></a>"><a href="https://gist.github.com/jazibsawar/095ada844db1e17088c9f76483898f97" class="embedly-card"></a></div>In the block, you can see the GraphQL query which is used to fetch the data we need to render our Index page. We can access the data inside the section via the <code>$page.posts &amp; $page.settings</code>variables.Now go to <code>src/layouts/Default.vue</code> and past the following code:&nbsp;<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/jazibsawar/f5ea7106053752cb6ea6a827952b41e9' class='embedly-card'></a>"><a href="https://gist.github.com/jazibsawar/f5ea7106053752cb6ea6a827952b41e9" class="embedly-card"></a></div>Now go to <code>templates</code> folder and create <code>Cosmicjs{ContentType}.vue</code> files for your object types. In our case, we have only posts. So we will create <code>CosmicjsPosts.vue</code>file.<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/jazibsawar/2ccc8a5ff147cdd59bb85df305344b17' class='embedly-card'></a>"><a href="https://gist.github.com/jazibsawar/2ccc8a5ff147cdd59bb85df305344b17" class="embedly-card"></a></div>If you want to take a closer look at the Bio component, mixins &amp; typography, you can <a href="https://github.com/cosmicjs/gridsome-blog" rel="noopener noreferrer" target="_blank">checkout the code on GitHub</a>.<h3 id="toc_6">Wrapping it up</h3>Although setting up the datasources requires some fiddling around and a lot of trial and error, the final result is pretty impressive. Especially the blazingly fast performance, data management using a Headless CMS like <a href="https://cosmicjs.com">Cosmic</a> and tiny bundle size of the resulting website, making it very tempting to choose Gridsome over single page applications.

Build a Blazing Fast Blog with Cosmic and Gridsome

Cosmic is an amazing content management system with options to categorize and distribute data in a way that makes sense to you. When building an expositional site for educational purposes, you have to display a large amount of text, images, videos and more. In this tutorial we will learn how to utilize the power of the Cosmic CMS to easily display, &nbsp;track, and update large amounts of data.<h3>TL;DR<a href="https://cosmicjs.com/apps/vue-the-cosmos" rel="noopener noreferrer" target="_blank"></a></h3><a href="https://cosmicjs.com/apps/vue-the-cosmos" rel="noopener noreferrer" target="_blank">Scholastic Website Demo&nbsp;</a> <a href="https://cosmicjs.com/apps/vue-the-cosmos" rel="noopener noreferrer" target="_blank"></a><a href="https://github.com/cosmicjs/vue-space-app" rel="noopener noreferrer" target="_blank">View Code on GitHub</a><a href="https://github.com/cosmicjs/vue-space-app" rel="noopener noreferrer" target="_blank"></a> What we&#39;ll be building:<img src="https://cosmic-s3.imgix.net/a7d809e0-2350-11e9-ac6b-c39b0e8426c5-vue-cosmos-1.png" data-name="vue-cosmos-1.png" style="width: 100%;" class="fr-fic fr-dib"> <h3>Intro</h3>As there are many articles on this site to help you get started using Cosmic, this tutorial will assume you have a basic understanding of how Cosmic works. Refer to the <a href="https://cosmicjs.com/getting-started" rel="noopener noreferrer" target="_blank">Getting Started Guide</a>.&nbsp;As Cosmic is an API-first CMS, it is exceptionally easy to get up and running - you just need to make a simple asynchronous call in Vue. Throughout the course of this tutorial, you will be able to see just how easy it is to divvy up data and update
it using the Cosmic CMS. Installing and Setting Up our Project:In this tutorial, we will use Vue&#39;s CLI and NPM to install Cosmic and set up our project quickly and seamlessly. We also can install Vuex to utilize its global store:<pre>$ npm install -g vue-cli
$ vue init webpack cosmic-game
$ cd cosmic-game
$ npm install --save vuex cosmicjs
$ npm install
$ npm run dev</pre>Optionally, we can also add <a href="https://getbootstrap.com/" rel="noopener noreferrer" target="_blank">Bootstrap</a> (and its dependencies of jQuery and popper.js) to our project, to leverage some pre-written CSS to organize our layouts:<pre>$ npm install bootstrap jquery popper.js</pre>If you choose to add Bootstrap to your project, after running npm install&nbsp;you also need to import it in main.js:<pre>import &#39;bootstrap&#39;; import &#39;bootstrap/dist/css/bootstrap.min.css&#39;;</pre> Uploading Asset Data To Cosmic:When creating a site for educational purposes, your site requires large amounts of text, images, videos and other assets to be hosted. As you continue to iterate on your site, it is vital to not only be able to edit those assets easily but to also be
able to access them readily.First, we need to create a Bucket for our project. Once that is done, we can leverage some unique properties that Cosmic offers to compartmentalize our data. Because the site being built in this tutorial is centered around our Solar System, let&#39;s
add a new Object Type called &quot;Cosmic Assets&quot;. The Cosmic Assets Object will be responsible for containing information, images, and other assets about the inhabitants of our Solar System. For example, if I wanted to add some information about
the planet Jupiter - I would go into the &quot;Cosmic Assets&quot; Object type, and create a new Cosmic Asset named &quot;Jupiter&quot;.&nbsp;Now, we have a Cosmic Asset that can host any data we want to tie to the planet Jupiter. We can add images of Jupiter, give expositional data, and even list quick tidbits of information using the Text Input Metafield provided by the CMS.Being able to break up data of our Cosmic Assets into the content field, image Metafield and text input Metafield make it extremely easy to take a glance at the CMS and understand where each piece of data is being rendered in our Vue.js application. Setting Up Our Application:Because our solar system contains so many objects, we should leverage the v-for&nbsp;property that Vue offers us to loop through them. This prevents us from repeating our code for each celestial object, and allows us to utilize
the full power of component based design.We use three components in this project:The first component, referred to in our project as Homescreen.vue,&nbsp;is responsible for rendering everything. It &nbsp; &nbsp;calls and obtains the data we added to the Cosmic CMS, and uses it to render our application.The second component, referred to in our project as CosmicAsset.vue,&nbsp;is a short introduction to the celestial object. It displays a small image, and the name of the celestial object. If this component is clicked, it renders the next component: CosmicPage.vue.CosmicPage.vue renders a full screen component, which gives detailed information about a specific entity. It features a big expositional paragraph, some fun facts, and other information such as size and it&#39;s distance from Earth.&nbsp;Accessing Uploaded Data from Cosmic in our Vue.JS ApplicationWe can utilize the Cosmic API to access the data that we uploaded to the CMS. First, we need to initialize the Bucket that stores our project. We do this by first instantiating Cosmic in our component, and then using a promise to return data from the specific Bucket we want. Then, we can mutate the information and add it as a property on the data object of our Vue Component. We make the call to the Cosmic API on the mounted() property of Vue&#39;s lifecycle, so that the information we need is readily available as soon as the component(s) are mounted:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/Abeyy/2c181b62154e57d81077096ccffebc33' class='embedly-card'></a>"><a href="https://gist.github.com/Abeyy/2c181b62154e57d81077096ccffebc33" 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>Rendering Our Components from Accessed Data:As you can see above, we find the Bucket we want, get our uploaded data from it, and mutate it how we want to. We filter the objects on the data and determine whether they are Cosmic Objects or simple content that is to be rendered on the page.We now have our Cosmic Objects stored in an array in the data property cosmicAssetObjs on the Vue Object. Using this array, we can use Vue&#39;s v-for to loop through and render our CosmicAsset component. We can break up each of these components using Boostrap classes, so they appear in a grid:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/Abeyy/b31681cccedb4e5f91a2934b384b1cc9' class='embedly-card'></a>"><a href="https://gist.github.com/Abeyy/b31681cccedb4e5f91a2934b384b1cc9" class="embedly-card"></a></div>As you can see we use the v-for property to loop through our array. For each element that we loop through, we pass that specific element as a prop for use by the component. We can see how props are used by looking at the component(s) itself:<div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/Abeyy/d5b0f97cb93d80af46f53759ffb27533' class='embedly-card'></a>"><a href="https://gist.github.com/Abeyy/d5b0f97cb93d80af46f53759ffb27533" class="embedly-card"></a></div><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/Abeyy/af86cef49125296b5565118e518dc100' class='embedly-card'></a>"><a href="https://gist.github.com/Abeyy/af86cef49125296b5565118e518dc100" class="embedly-card"></a></div>As you can see, we take the specific celestial entity&#39;s information in the form of an object and filter through it to display what we want it to.<h3>Conclusion</h3>In this tutorial, we uploaded a large amount of data to Cosmic so that we could create an educational application that teaches about the things in our Solar System. By leveraging the Cosmic API, we could easily and seamlessly access that data.Cosmic is a lightweight platform with an extremely powerful CMS to offer.&nbsp;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 create a scholastic website using Cosmic and Vue.js

In this tutorial, I&#39;m going to show you how to create a minimalistic but awesome single page app blog using Vue, Vuex, Vuetify, Cosmic and deploy it to Netlify. Let&rsquo;s get started.<h3>TL;DR</h3><a href="https://cosmicjs.com/apps/vuetify-blog" rel="noopener noreferrer" target="_blank">Demo Link</a> <a href="https://github.com/cosmicjs/vuetify-blog" rel="noopener noreferrer" target="_blank">View Code on Github</a><a href="https://app.netlify.com/start/deploy?repository=https://github.com/cosmicjs/vuetify-blog" rel="noopener noreferrer" target="_blank"><img src="https://www.netlify.com/img/deploy/button.svg" alt="Deploy to Netlify" class="fr-fic fr-dii"></a><h3>Features</h3><ul><li>Netlify hosting (plus CDN, Prerendering, Minification, etc..)</li><li>Moderated commenting system (Un-moderated by default)</li><li>Social share buttons</li><li>SEO Meta tags with Vue-Meta</li><li>Integrated content management system via Cosmic</li></ul><h3>Needed improvements</h3><ul><li>Static page content connected to Cosmic</li><li>Post categories feature</li><li>Gravatar comment integration</li><li>Back/Forward buttons to trigger post view</li></ul><h3>Prerequisites</h3>You will be required to have Node JS and npm before starting. Make sure you already have them installed. If not you can find them here: <a href="https://nodejs.org">https://nodejs.org</a>Also in order to deploy it you can use Netlify account or Cosmic hosting.<h3>Project Structure</h3>Important things to note: ~/public/_redirects This file is important since it points all your traffic to the index.html file in order for vue-router to handle the requests. To learn more about Netlify redirects <a href="https://www.netlify.com/docs/redirects/" rel="noopener noreferrer" target="_blank">visit their docs</a>. You don&#39;t need this file if you&#39;re deploying via Cosmic. ~/public/favicon.ico If you want to customize your favicon you can change this file located within the public directory.<h3>Fork and Clone</h3>First we&#39;ll be forking the repository on GitHub. Afterwards open up command line or terminal and clone it to your project folder on your local machine with this command:<pre>git clone https://github.com/cosmicjs/vuetify-blog</pre>Use BitBucket or Gitlab instead?If you prefer to use a different git provider you can just clone the repository and upload it to your desired remote.<h3>Install</h3>In your command line <code>cd</code> into the project root directory that you just cloned and run <code>npm install</code> to download and install all the required dependencies.<h3>Integrate Cosmic</h3>In your Cosmic account create a new bucket and call it whatever you want.Download this <a href="https://raw.githubusercontent.com/availit/cosmicify/master/bucket.json" rel="noopener noreferrer" target="_blank">bucket.json</a> file. And in Settings -&gt; Import / Export Data, select and upload the downloaded file. This will import all the Object Types and placeholder data.<h3>Bucket Structure</h3><h4>Settings</h4>There are a couple settings Objects to allow you to change how your blog acts. The global Object has most of the overall options such as choosing whether your comments require you to approve and publish them. Your blog&#39;s logo in the navbar, or the
&quot;Read More&quot; button text.. Meanwhile the Social profiles Object is to set the social network icons in the footer.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/63956b30-19c1-11e9-b728-e7b45d8c7a5a-cosmicify-settings.jpg" style="width: 100%;" class="fr-fic fr-dib" alt="Cosmicify settings"><h4>Posts</h4>These Objects will be all your blog posts/articles.<h4>Profiles</h4>These Objects are for the author that will be posting on the blog. You can change your name, bio and profile picture.<h4>Comments</h4>The Comments Objects are exactly that; Comments, typically created via the site&#39;s new comment form. They collect Name, Email, and the Comment.<h3>Deployment with Netlify</h3>Go to your Netlify dashboard and click &quot;<a href="https://app.netlify.com/start" rel="noopener noreferrer" target="_blank">New site from Git</a>&quot;. Choose your git provider (I use GitHub). After you authenticate you can see your list of repositories.
Select the one you created for this project you created earlier.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/d2dab0c0-19a0-11e9-8580-4d6e3f092393-netlify-newsite.jpg" style="width: 100%;" class="fr-fic fr-dib" alt="Create new site from git">Next it will make you choose a branch, then set some config options for it to run properly.Set the deploy directory to <code>dist</code> and set the deploy command to <code>npm start</code><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/3cad0880-19a2-11e9-ba91-2dc206c34b19-netlify-site-settings.jpg" style="width: 450px;" class="fr-fic fr-dib" alt="Netlify New Site Configuration">Next you&#39;ll click &#39;Show advanced&#39; in order to set some environment variables.Using the list below enter the key and values for your app. You need to enter your Bucket slug in the COSMIC_BUCKET variable. The variables with META in the name are used for the SEO tags on the site. The VUE_APP_DOMAIN is required for the article share
links to work properly. For the commenting system to work you need your COSMIC_READ_KEY and COSMIC_WRITE_KEY.Required environment variables for the project:<pre>VUE_APP_TITLE
COSMIC_BUCKET
COSMIC_READ_KEY
COSMIC_WRITE_KEY
VUE_APP_DOMAIN
VUE_APP_META_TITLE
VUE_APP_META_LOGO
VUE_APP_META_DESC</pre><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/6c036930-19a2-11e9-bcf0-ab5ce7192564-netlify-env.jpg" style="width: 450px;" class="fr-fic fr-dib" alt="Netlify Environment Variables">Once everything looks correct you can click &quot;Deploy site&quot; and it will install and build the app in a couple minutes then publish it live on the internet!<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/5a1f8e30-19a0-11e9-ba91-2dc206c34b19-netlify-building.jpg" style="width: 100%;" class="fr-fic fr-dib" alt="Netlify build log"><h3>Netlify Post Processing</h3>Netlify offers post processing that runs after your site builds. This is optional but I highly recommend enabling post processing because it enhances your site&#39;s performance and prerendering in order for Googlebot to crawl your blog content.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/78bf2ff0-19a3-11e9-998c-93738aabc140-netlify-asset-optimization.jpg" style="width: 500px;" class="fr-fic fr-dib" alt="Netlify post processing"><h3>Conclusion</h3>I built this app for fun and decided to share it with everyone. It is open source under MIT license so feel free to hack it, modify it, or break it for all I care. Build using Vue, Vuex, and Cosmic. Oh, and don&#39;t forget Vuetify, the amazing material
component library by John Leider and over 200+ open source contributors.If you have trouble or it&#39;s not working for you let me know in the comments and I&#39;ll do my best to help! Or reach out via twitter <a href="https://www.twitter.com/aaron_vail" rel="noopener noreferrer" target="_blank">@Aaron_Vail</a>

Start building today