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

Google Analytics Extension

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

VIDEO: Install and Deploy a GraphQL-powered App in 5 minutes using the Cosmic CLI

In <a href="https://cosmicjs.com/articles/how-to-deploy-your-codebase-using-cosmic-js-jfipau9p" rel="noopener noreferrer" target="_blank">Deploying your Codebase using Cosmic</a>, I write about how easy it is to deploy Cosmic Apps with just a GitHub repo and the Cosmic system. Cosmic allows developers to deploy their codebases to the Cosmic App Server for staging, testing and demo purposes, and is now offering new production deployment options available with some of your favorite deployment services.You can now deploy Cosmic-powered applications to <a href="https://www.heroku.com" rel="noopener noreferrer" target="_blank">Heroku</a>, <a href="https://zeit.co" rel="noopener noreferrer" target="_blank">Zeit</a> and <a href="https://www.netlify.com" rel="noopener noreferrer" target="_blank">Netlify</a>. Building progressive web apps that are zippy fast require using powerful microservice tools and the flexibility to deploy to your favorite services based on your applications&#39; needs. <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/ee8572d0-4447-11e8-b4ba-c9828ea342a7-Untitled design-8.png" style="width: 100%;" class="fr-fic fr-dib"> Cosmic uses Dokku (Docker + Heroku-like deployment) to deploy your app from any GitHub, BitBucket or any other public repo to its own subdomain. Deployment will be successful as long as your application follows the <a href="https://devcenter.heroku.com/" target="_blank">Heroku deployment guidelines</a>. If you have connected your GitHub account to Cosmic, you will be able to deploy your private GitHub repos as well. Your deployed app will include environment variables which are used to connect to your Cosmic Bucket. You will need an account with the service you use to deploy your Cosmic App.&nbsp; <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/e28b07a0-4443-11e8-b4ba-c9828ea342a7-ezgif-2-610812a7b2.gif" style="width: 100%;" class="fr-fic fr-dib"> <a href="https://cosmicjs.com/apps" rel="noopener noreferrer" target="_blank">Browse Apps to Deploy to Zeit, Heroku or Netlify&nbsp;</a> <a href="https://cosmicjs.com/articles/how-to-deploy-your-codebase-using-cosmic-js-jfipau9p" rel="noopener noreferrer" target="_blank">How to Deploy Your Codebase using Cosmic</a> <a href="https://cosmicjs.com/docs" rel="noopener noreferrer" target="_blank">Developer Documentation&nbsp;</a>&nbsp;I hope that you&#39;ve found this tutorial helpful. If you have questions or comments about Content Editor Features in the Cosmic system, I&#39;d love to hear about them. You can refer to my <a href="https://cosmicjs.com/carsongibbons" rel="noopener noreferrer" target="_blank">Cosmic Profile</a> for additional content on how to intuitively navigate the Cosmic Dashboard.&nbsp;<a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com">carson@cosmicjs.com</a>&nbsp;

New Deployment Options Available in Cosmic

Below is a step-by-step tour of how to add the power of Localization to your Cosmic Object Types. 1. Localization happens on the Object Types. &nbsp;To set up localization in your Bucket go to Your Bucket Dashboard &gt; Object Type &gt; Settings (Cog icon) <img class="fr-dib" src="https://s3-us-west-2.amazonaws.com/cosmicjs/c1ba54b0-37c1-11e8-bcad-df4dfbae054c-1522816594991.jpg" style="width: 100%;"> 2. Then turn localization for this Object Type &ldquo;On&rdquo; <img class="fr-dib" src="https://s3-us-west-2.amazonaws.com/cosmicjs/d1478060-37c1-11e8-9bd6-17485b790ec2-1522816620472.jpg" style="width: 100%;"> 3. Select your locales <img class="fr-dib" src="https://s3-us-west-2.amazonaws.com/cosmicjs/03f4fb50-37c2-11e8-abdd-69e563e646af-1522816705915.jpg" style="width: 100%;"> 4. Select your priority local (this will be the display title in the Objects Table) <img class="fr-dib" src="https://s3-us-west-2.amazonaws.com/cosmicjs/114a5f70-37c2-11e8-bcad-df4dfbae054c-1522816728401.jpg" style="width: 100%;"> 5. Then on your Object Pages, you will see the Locale option <img class="fr-dib" src="https://s3-us-west-2.amazonaws.com/cosmicjs/1b26c970-37c2-11e8-abdd-69e563e646af-1522816744386.jpg" style="width: 100%;"> 6. When you want to add the same Object (but in a different language / locale) simply create a new Object, *make sure the slug is the same* and add the different locale <img class="fr-dib" src="https://s3-us-west-2.amazonaws.com/cosmicjs/2778a040-37c2-11e8-9bd6-17485b790ec2-1522816764854.jpg" style="width: 100%;"> 7. Save this Object, then you will see that the Object now appears in the Table with 2 different locales linked <img class="fr-dib" src="https://s3-us-west-2.amazonaws.com/cosmicjs/32d875f0-37c2-11e8-9bd6-17485b790ec2-1522816784311.jpg" style="width: 100%;"> 8. Now that you have the 2 versions, you can get the different versions from the API endpoint using the `locale` query paramEN Version: <a href="https://api.cosmicjs.com/v1/install/object/aquamarine?pretty=true&hide_metafields=true&locale=en-US" rel="noopener noreferrer" target="_blank">https://api.cosmicjs.com/v1/install/object/aquamarine?pretty=true&amp;hide_metafields=true&amp;locale=en-US</a> <a href="https://api.cosmicjs.com/v1/install/object/aquamarine?pretty=true&hide_metafields=true&locale=es"></a>ES Version:<a href="https://api.cosmicjs.com/v1/install/object/aquamarine?pretty=true&hide_metafields=true&locale=es"></a> <a href="https://api.cosmicjs.com/v1/install/object/aquamarine?pretty=true&hide_metafields=true&locale=es" rel="noopener noreferrer" target="_blank">https://api.cosmicjs.com/v1/install/object/aquamarine?pretty=true&amp;hide_metafields=true&amp;locale=es</a>This `locale` parameter is available on all endpoints, so if you need to get all Objects with `locale=es`: <a href="https://api.cosmicjs.com/v1/install/object-type/products?pretty=true&hide_metafields=true&locale=es" rel="noopener noreferrer" target="_blank">https://api.cosmicjs.com/v1/install/object-type/products?pretty=true&amp;hide_metafields=true&amp;locale=es</a>Or EN: <a href="https://api.cosmicjs.com/v1/install/object-type/products?pretty=true&hide_metafields=true&locale=en-US">https://api.cosmicjs.com/v1/install/object-type/products?pretty=true&amp;hide_metafields=true&amp;locale=en-US</a> I hope you found this article helpful. &nbsp;Let me know if you have any further questions. &nbsp;Reach out to me <a href="https://cosmicslack.now.sh/" rel="noopener noreferrer" target="_blank">on Slack</a>, and follow <a href="https://twitter.com/cosmic_js" rel="noopener noreferrer" target="_blank">Cosmic on Twitter</a>.

How to Add Localization to Bucket Object Types

An Object in Cosmic can be a page, a blog post, an author or anything you want it to be. Cosmic gives you the freedom to create and manage content openly and create your own data structure. Each Object allows for the creation of a title, slug, content and Metafields. Metafields are very powerful pieces of custom data that can be added to objects that can be recursively nested.&nbsp;Depending on your use case, your Objects&#39; Content Models can become quite robust with metafields. Save time creating new Objects with sharable Object Schemas. Cosmic makes sharing Object Schemas easy. Simply follow these steps:&nbsp;<h3> </h3><h3>How to Share Object Schemas in Cosmic</h3>1. Click &quot;View Schema&quot; on an existing Object and copy the code in the text area.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/798f7000-378d-11e8-abdd-69e563e646af-Screen Shot 2018-04-03 at 5.10.57 PM.png" style="width: 100%;" class="fr-fic fr-dib"> 2. Paste into the Schema area in a new or existing Object.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/877c3220-378d-11e8-8a65-23cac4032ed3-Screen Shot 2018-04-03 at 5.08.14 PM.png" style="width: 100%;" class="fr-fic fr-dib"> Make sure that your Schema is a valid JSON Object structure. For example:<pre><code>{
 &quot;title&quot;: &quot;Object Title&quot;,
 &quot;content&quot;: &quot;</code><code>Here is some amazing content.&quot;,
 &quot;metafields&quot;: [
 {
 &quot;title&quot;: &quot;Headline&quot;,
 &quot;key&quot;: &quot;headline&quot;,
 &quot;value&quot;: &quot;Amazing Headline&quot;,
 &quot;type&quot;: &quot;text&quot;
 }
 ] 
}</code></pre>This is another great example of Cosmic helping blended teams of developers and content editors build apps faster. With Cosmic, write once and deliver everywhere.&nbsp;I hope that you&#39;ve found this tutorial helpful. If you have questions or comments about Content Editor Features in the Cosmic system, I&#39;d love to hear about them. You can refer to my <a href="https://cosmicjs.com/carsongibbons" rel="noopener noreferrer" target="_blank">Cosmic Profile</a> for additional content on how to intuitively navigate the Cosmic Dashboard.&nbsp;<a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com">carson@cosmicjs.com</a>&nbsp;

How to Share Object Schemas in Cosmic

Cosmic makes it easy to deploy your websites and applications to the web. You can deploy an app from any git repository to the Cosmic App Server from any Bucket. Cosmic uses Dokku (Docker + Heroku-like deployment) to deploy your app from any GitHub, BitBucket or any other public repo to its own subdomain.&nbsp;With Cosmic alleviating your need for an installed CMS and server, your application stack can be boiled down to the following items:1. GitHub repo 2. Cosmic CMS API 3. Cosmic app server<h4> </h4><h4>How to Deploy Your Codebase Using Cosmic 🚀</h4>Deployment will be successful as long as your application follows the <a href="https://devcenter.heroku.com/" target="_blank">Heroku deployment guidelines</a>. If you have connected your GitHub account to Cosmic, you will be able to deploy your private GitHub repos as well.1. Go to your Bucket &gt; Bucket Settings &gt; Deploy Web App 2. Enter the URL for the public Git repo that you are deploying 3. Deploy your codebase and manage your app&#39;s content from the Cosmic Dashboard <img src="https://s3-us-west-2.amazonaws.com/cosmicjs/a9cc81e0-36b6-11e8-bb90-3bca7805fe39-Screen Shot 2018-04-02 at 3.44.20 PM.png" style="width: 100%;" class="fr-fic fr-dib"> The following add-ons are also available with Cosmic Deployment:1. Custom Domains: Easily point your custom domain to your Cosmic App Server instance. 2. One-click SSL: Secure your app with SSL. SSL certs are automatically renewed.I hope that you&#39;ve found this tutorial helpful. If you have questions or comments about Content Editor Features in the Cosmic system, I&#39;d love to hear about them. You can refer to my <a href="https://cosmicjs.com/carsongibbons" rel="noopener noreferrer" target="_blank">Cosmic Profile</a> for additional content on how to intuitively navigate the Cosmic Dashboard.&nbsp;<a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com">carson@cosmicjs.com</a>&nbsp;

How to Deploy Your Codebase Using Cosmic

Cosmic lets you build one-to-one as well as <a href="https://cosmicjs.com/articles/how-to-create-one-to-many-object-relationships-with-cosmic-js-je8lon7p" rel="noopener noreferrer" target="_blank">one-to-many Object Relationships</a> within your Bucket Dashboard. To help you and your team manage content more seamlessly, you can now see your Connected Objects located on the Object&rsquo;s Edit page in the Dashboard.&nbsp;<h3>Connected Objects in Cosmic</h3>Step 1: Navigate to the Object Type you&#39;re reviewing. Step 2: Choose the Object whose Relationships you want to review.&nbsp;<h3><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/a60d1ad0-31d2-11e8-b24f-2f60c3c01c65-oUETRpn8M7.gif" style="width: 100%;" class="fr-fic fr-dib"></h3>You&#39;ll see in this example that I wanted to see the Object Relationships for the author &quot;Chad Henly&quot;. In the publishing area to the right of the content editor, you&#39;ll notice the new field &quot;Connected Objects&quot; that link to all of the posts that Chad Henly has written.&nbsp;For developers, you can now get the Connected Objects via a filter parameter from the Bucket Object&#39;s endpoint. Click <a href="https://cosmicjs.github.io/rest-api-docs/#get-objects" rel="noopener noreferrer" target="_blank">here</a> to learn more about the filters[connected_to] option.I hope that you&#39;ve found this tutorial helpful. If you have questions or comments about Content Editor Features in the Cosmic system, I&#39;d love to hear about them. You can refer to my <a href="https://cosmicjs.com/carsongibbons" rel="noopener noreferrer" target="_blank">Cosmic Profile</a> for additional content on how to intuitively navigate the Cosmic Dashboard.&nbsp;<a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com"></a><a href="mailto:carson@cosmicjs.com">carson@cosmicjs.com</a>&nbsp;

Connected Objects in Cosmic

Check out this <a href="https://github.com/cosmicjs/nextjs-website-boilerplate" rel="noopener noreferrer" target="_blank">website boilerplate</a> built on <a href="https://github.com/zeit/next.js/" rel="noopener noreferrer" target="_blank">Next.js</a> and <a href="https://cosmicjs.com">Cosmic</a>. It satisfies some common website requirements including dynamic pages, blog articles, author management, SEO ability, contact form and website search.<h2>TL;DR</h2><a href="https://github.com/cosmicjs/nextjs-website-boilerplate" rel="noopener noreferrer" target="_blank">Download the Next.js Website Boilerplate GitHub repo</a>. <a href="https://cosmicjs.com/apps/nextjs-website-boilerplate" rel="noopener noreferrer" target="_blank">Check out the demo.</a><h3>Features</h3>1. Fully responsive down to mobile w/ <a href="http://getbootstrap.com" rel="noopener noreferrer" target="_blank">Bootstrap</a> frontend 2. SEO ready 3. A contact form that sends an email to your email(s) of choice and to <a href="https://cosmicjs.com">Cosmic</a> for easy reference 4. Full-site search functionality 5. All content is easily managed in <a href="https://cosmicjs.com">Cosmic</a> including pages, blog and contact info. Sign up for <a href="https://cosmicjs.com">Cosmic</a> to install the demo content and deploy this website.&nbsp;<h3>Get started</h3><pre>git clone https://github.com/cosmicjs/nextjs-website-boilerplate
cd medical-professional-next-js  
npm install</pre>Import the bucket.json file into your Cosmic Bucket. &nbsp;To do this go to Your Bucket &gt; Settings &gt; Import / Export Data. &nbsp;Or install the app via the <a href="https://cosmicjs.com/apps/nextjs-website-boilerplate" rel="noopener noreferrer" target="_blank">Next.js Website App page</a>.&nbsp; <img src="https://cosmicjs.com/uploads/4edef890-52e6-11e6-9a1c-233e4e7aa20d-ZadK2PbDDR.gif " style="width: 605px;" class="fr-fic fr-dib"> <h3>Run in production</h3><pre>COSMIC_BUCKET=your-bucket-slug npm start </pre>Go to <a href="http://localhost:3000">http://localhost:3000</a>&nbsp;<h3>Run in development</h3><pre> npm run dev</pre>&nbsp;Go to <a href="http://localhost:5000">http://localhost:5000</a>.&nbsp;<h3>Config&nbsp;</h3>Contact email Because Next.js doesn&#39;t have a mail server, the contact form uses mailgun to send the email. So add the following constants in the config file. <div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/WaqasArshad777/8529e5d78284a053b9497050cc25558a' class='embedly-card'></a>"><a href="https://gist.github.com/WaqasArshad777/8529e5d78284a053b9497050cc25558a" class="embedly-card"></a></div>

Next.js Website Boilerplate

Check out this <a href="https://github.com/cosmicjs/nuxtjs-website-boilerplate" rel="noopener noreferrer" target="_blank">website boilerplate</a> built on <a href="https://nuxtjs.org/" rel="noopener noreferrer" target="_blank">Nuxt.js</a> and <a href="https://cosmicjs.com/">Cosmic</a>. It satisfies some common website requirements including dynamic pages, blog articles, author management, SEO ability, contact form and website search.<h2>TL;DR</h2><a href="https://github.com/cosmicjs/nuxtjs-website-boilerplate" rel="noopener noreferrer" target="_blank">Download the GitHub repo</a> <a href="https://cosmicjs.com/apps/nuxtjs-website-boilerplate" rel="noopener noreferrer" target="_blank">Check out the demo.</a><h3>Features</h3>1. Fully responsive down to mobile w/ <a href="http://getbootstrap.com" rel="noopener noreferrer" target="_blank">Bootstrap</a> frontend 2. SEO ready 3. A contact form that sends an email to your email(s) of choice and to <a href="https://cosmicjs.com">Cosmic</a> for easy reference 4. Full-site search functionality 5. All content is easily managed in <a href="https://cosmicjs.com">Cosmic</a> including pages, blog and contact info. Sign up for <a href="https://cosmicjs.com">Cosmic</a> to install the demo content and deploy this website.&nbsp;<h3>Get started&nbsp;</h3><pre>git clone https://github.com/cosmicjs/nuxtjs-website-boilerplate
cd nuxtjs-website-boilerplate
npm install</pre>Import the bucket.json file into your Cosmic bucket. To do this go to Your Bucket &gt; Settings &gt; Import / Export Data.&nbsp; <img src="https://cosmicjs.com/uploads/4edef890-52e6-11e6-9a1c-233e4e7aa20d-ZadK2PbDDR.gif " style="width: 605px;" class="fr-fic fr-dib"> <h3>&nbsp;Run in production&nbsp;</h3><pre>COSMIC_BUCKET=your-bucket-slug npm start </pre>Go to <a href="http://localhost:3000">http://localhost:3000</a>&nbsp;<h3>Run in development&nbsp;</h3>Create a config/development.js file and match it to config/production.js&nbsp;with your values.&nbsp;<pre> npm run development </pre>&nbsp;Go to <a href="http://localhost:5000">http://localhost:5000</a>.&nbsp;<h3>Env vars</h3>As it states on the <a href="https://nuxtjs.org/faq/host-port/" rel="noopener noreferrer" target="_blank">Nuxt.js website</a>, you will need to set the environment variable HOST to 0.0.0.0. &nbsp;This is already done in the package.json script for you, but you could also set this on the &quot;Set Environment Variables&quot; section located in Your Bucket &gt; Settings &gt; Deploy Web App.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/ba959ac0-30e9-11e8-8a87-1d4e79eefafa-env.PNG" style="width: 593px;" class="fr-fic fr-dib"> <h3>Config&nbsp;</h3>Because Node.js doesn&#39;t have a mail server, the contact form uses <a href="https://www.mailgun.com/" rel="noopener noreferrer" target="_blank">mailgun</a> to send the email. So add the following constants in the config file. <div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/WaqasArshad777/8529e5d78284a053b9497050cc25558a' class='embedly-card'></a>"><a href="https://gist.github.com/WaqasArshad777/8529e5d78284a053b9497050cc25558a" class="embedly-card"></a></div>

Start building today