<section name="dd66"><h3 name="4dcb">TL;DR:</h3><a href="https://cosmicjs.com/extensions/export-to-csv" rel="noopener noreferrer" target="_blank">Export to CSV Extension</a><a href="https://github.com/cosmicjs/export-to-csv" rel="noopener noreferrer" target="_blank">Download the codebase</a> There are several circumstances where data needs to be exported to a spreadsheet. Either for statistical reasons, or as an alternative means to store data that isn&rsquo;t JSON, despite it&rsquo;s reputation, storing and keeping data in CSV does have it&rsquo;s perks.Cosmic is a CMS platform that enables you to decouple your content from your products, allowing you to reuse and reimplement that content in various means across various platforms.Today we will be going over how to export your data in a CSV. <img src="https://cdn.cosmicjs.com/4f232d70-7e36-11e9-9992-cf5b37d5466d-ezgif-3-31b5db25240d.gif" style="width: 100%;" class="fr-fic fr-dib"><h3 name="51a6"> Before we start</h3><blockquote name="1e7c">NOTE: the following guide assumes you already have a Cosmic account in order to use extensions correctly. If you don&rsquo;t already have one, you can signup <a href="https://cosmicjs.com/signup" rel="noopener noreferrer" target="_blank">here</a>.</blockquote>There are two main ways to access and use Cosmic extensions. The first is to add the extension via your settings admin, and the other is to build the extension manually. We&rsquo;ll be going over both methods.<h3 name="c8fe"> Adding via Cosmic</h3> Adding the <a href="https://cosmicjs.com/extensions/export-to-csv" rel="noopener noreferrer" target="_blank">Export to CSV Extension</a> to an existing Cosmic Bucket is simple. Just navigate to your Bucket Settings &gt; Extensions &gt; Export to CSV Extension and click &quot;Install&quot;. <img src="https://cdn.cosmicjs.com/5a4664c0-7e35-11e9-a67b-5922ec0198f5-Export-to-CSV.png" style="width: 100%;" class="fr-fic fr-dib"> Once installed, click &quot;Go To Extension&quot; or use the left hand nav bar to navigate to the Export to CSV Extension. Your Bucket&#39;s Objects are then available to select for easy export, complete with Published and Draft Filters. <h3 name="d3e1"><img src="https://cdn.cosmicjs.com/d7375e40-7e34-11e9-9992-cf5b37d5466d-1f436f20-7bde-11e9-93c7-d1a8b031d015-Screen-Shot-2019-05-21-at-10.23.36-AM.png" style="width: 100%;" class="fr-fic fr-dib"> Building manually</h3>The source code for the plugin is available on GitHub for cloning. The instructions for building a usable version of the extension are rather simple:<pre name="9506">git clone <a data-href="https://github.com/flynnham/cosmicjs-to-csv-extension" href="https://github.com/flynnham/cosmicjs-to-csv-extension" rel="noopener" target="_blank"></a><a href="https://github.com/cosmicjs/export-to-csv">https://github.com/cosmicjs/export-to-csv</a> &amp;&amp; cd export-to-csv
yarn install
npm run build</pre>The above code is responsive for cloning the repository, installing dependencies via <code>yarn</code>, and then building a working version via <code>npm run build</code> . Doing this, as per instructions the repository README, will add a <code>build.zip</code> file in the main project file. This is the extension itself that Comic JS uses when uploading.From there we can simply log into our Cosmic account, navigating to the bucket dashboard of choice. In this example, I will be navigating to one of my test buckets. <figure name="1bcd"><img data-image-id="1*Gf3txj7P5XMbSp9tw30QiQ.png" data-width="1171" data-height="858" src="https://cdn-images-1.medium.com/max/800/1*Gf3txj7P5XMbSp9tw30QiQ.png" class="fr-fic fr-dii"></figure> Expanding the Settings on the left hand sidebar will reveal an option called Extensions. Clicking that specific menu item, will bring up the extensions page. <figure name="fb94"><img data-image-id="1*KP-oT9xeeVBuJnXEzMYI9Q.png" data-width="1222" data-height="924" src="https://cdn-images-1.medium.com/max/800/1*KP-oT9xeeVBuJnXEzMYI9Q.png" class="fr-fic fr-dii"></figure> Just like when we were adding the extension manually, we find ourselves at the Extensions screen. Unlike adding the plugin directly, we will be using the + Add Extension tab to manually add our own custom version. <figure name="f541"><img data-image-id="1*lJUSS4ujTPFf9KG6vFf7mw.png" data-width="1148" data-height="949" src="https://cdn-images-1.medium.com/max/800/1*lJUSS4ujTPFf9KG6vFf7mw.png" class="fr-fic fr-dii"></figure> Then we manually drag our <code>build.zip</code> file into the area labeled&nbsp;Drop .zip file here, or just simple click + Add zip file to manually choose the file from the filesystem. Doing so will then show the following screen: <figure name="e810"><img data-image-id="1*h2MRak1NZqhMUXLB6maF1A.png" data-width="1137" data-height="828" src="https://cdn-images-1.medium.com/max/800/1*h2MRak1NZqhMUXLB6maF1A.png" class="fr-fic fr-dii"></figure> We now have a new option to export Cosmic Objects via the Export to CSV on the top left of the screen. <h3 name="e11d">How to export your&nbsp;Objects</h3><figure name="790f"><img data-image-id="1*13BdT-aIbkjlU-521mjNDg.png" data-width="1170" data-height="607" src="https://cdn-images-1.medium.com/max/800/1*13BdT-aIbkjlU-521mjNDg.png" class="fr-fic fr-dii"></figure> The user interface is fairly intuitive. Each recognized Object Type will be shown near the bottom with a green button, which will execute client-side data fetching and processing to convert your objects into a CSV, and then download it.Object Status exists as a way to specifically filter out content based on and Object it&rsquo;s <code>status</code> attribute, so you can specifically only return data for the specified mode. All just returns all Objects without filtering.</section><section name="2cfa"><h3 name="d0fe">Conclusion</h3>While I&rsquo;ve built many client-side solutions in my time, this was actually my first JAMstack application. And I need to say, it was actually quite fun to do.&nbsp;Cosmic is a platform that enables both content creators and developers to extend their content in ways that most platforms won&rsquo;t, and I look forward to writing more apps and extensions with them when I can.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>.</section>

Exporting Cosmic data to CSV

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

Create a Localized Website using Gatsby and Cosmic

Using Cosmic and Zapier to integrate your content across the Web

TL;DR<a href="https://cosmicjs.com/apps/react-news-app" rel="noopener noreferrer" target="_blank">View and install the demo</a> <a href="https://github.com/cosmicjs/react-news-app" rel="noopener noreferrer" target="_blank">View the codebase</a> PrefaceOut of all the demo applications I have built for <a href="https://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a>, this is likely the most useful for someone like me. As someone who has minimal room for a vast infrastructure, and a lack of patience for modifying WordPress to my needs; it&#39;s great to know
a service such as this can cut out the need for extensive middle-ware and abstraction. Before we startCosmic is a remote CMS designed for allowing you to implement your app&#39;s content and data in whatever form you see fit. This is great for websites that need scaling requirements, or have specific requirements in how their data is processed and
handled. It removes the need for heavy frameworks such as WordPress and Drupal, giving direct access to your content.Cosmic&#39;s plans work great for serious news websites wanting to scale as their userbase does, as well as providing optional affordable web app hosting. This includes everything from free plans for small business apps to enterprise-grade clusters. Installing the demo ApplicationThe project source code is located at <a href="https://github.com/cosmicjs/multi-language-survey"></a><a href="https://github.com/cosmicjs/react-news-app" rel="noopener noreferrer" target="_blank">https://github.com/cosmicjs/react-news-app</a>. Either clone the repository with <code>git clone</code> or download the project manually using the download button on the repository page.Once the project is downloaded (and extracted if you downloaded an archive), <code>cd</code> into the project directory and then download the project dependencies with the command <code>npm install</code>. Once that is done, you should now be able to
build the project.Before we go through some the project details, build the development
version with the command <code>npm run dbuild</code>. The built application should then be available inside the <code>build/</code> directory.Now that we have the application built locally, running <code>npm run server</code> will automatically start the express server at <code>localhost:3000</code>. You can navigate to it from your web browser. Navigating the source codeThe source code of the news app follows a basic structure. The <code>app/</code> directory contains all of React components and styles used by the application. This is where the front end part of the application lives, and it is where your own Adsense or other monetization frameworks can be implemented.The <code>app/styles/</code> directory contains the the less styles that are compiled into CSS for the app. All of the main styles are loaded in <code>base.less</code>.The <code>static/</code> directory contains any files or directories you wish to make available to your application. By default, this contains the app icon and refresh button icon.The <code>build/</code> directory contains the runtime application files bundled with Webpack and converted to web-safe code via Babel.Within the root app directory, <code>server.js</code> and <code>data.js</code> handle the minimal back end for the application. It set&#39;s up routes for the React app as well as specific routes for relaying information from the Cosmic API.<code>config.js</code> contains the configuration for the specific application (build and server) and <code>webpack.config.js</code> is the build script required for packing the app. Editing the content<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/dd34f700-e2c5-11e7-b8ae-3589834ee233-article1.png" style="width: 100%;" class="fr-fic fr-dib">Assuming you already imported the demo application, you should already have two types of objects defined, Pages and Articles.&nbsp;Pages are essentially static pages that contain minimal information (a news app should generally only have 2-3 pages, minimally a contact page and an about page).Articles are the real focus of a news app, and as a result contain more metadata. An article not only contains the base content, but also fields for Thumbnail, Author and Profile Picture. These are uploaded directly to Cosmic and are provided to the front-end as urls. A new article can be added by pressing the Add Article button from Dashboard &gt; Articles.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/44d32620-e2c6-11e7-9aa4-211f05a885ee-article2.png" style="width: 100%;" class="fr-fic fr-dib">Fill in the Title&nbsp;and Content fields. Once that is done, fill in the Metafields with the required &#39;Author Name&#39;, &#39;Profile
Picture&#39;, and &#39;Thumbnail&#39; fields.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/893e8f70-e2c6-11e7-9aa4-211f05a885ee-article3.png" style="width: 100%;" class="fr-fic fr-dib">Once done, press the Publish button on the top right of the screen. You&#39;re article is now available via the Cosmic API. To access it, go to the app instance (either local or live) and look for the name of the article on the homepage or on the sidebar.
If it&#39;s not there, be sure to click the Refresh button on the top right and refresh your tab to fetch the latest list of articles.Note:&nbsp;Article list caching happens on a per-user level via localStorage, but can be leveraged on a instance-level manually.<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/24650920-e2c7-11e7-b8ae-3589834ee233-article4.png" style="width: 100%;" class="fr-fic fr-dib">In closingUsing Cosmic for a news application is a great way to reduce the amount of abstraction between your readers and your news app content. Additionally, the minimal React implementation allows greater flexibility to in terms of implementation and the features
you wish to provide.So far I have been greatly impressed by the API&#39;s responsiveness and reliability and will continue to be impressed by it&#39;s usefulness, especially for content delivery.

Building your own news blog with Cosmic + React

<section name="79ef"><h2>TL;DR</h2><a href="https://cosmicjs.com/apps/multi-language-survey/demo">View the demo</a> <a href="https://github.com/cosmicjs/multi-language-survey" rel="noopener noreferrer" target="_blank">View the codebase on GitHub</a> <a href="https://cosmicjs.com/apps/multi-language-survey">Install the app</a>Sometimes when surveying customers, there is a good chance that not all of them speak the same language that you do. As a result, it might be difficult to survey customers outside the regional area that you do most of your sales.This is especially in true in markets where you are working on a national or even international scale. The flexibility to meet the demands of your customers should be top priority, and a language barrier should not exist between the most important part
of any business: customer feedback.I was recently tasked with creating an application for Cosmic, and the concept I came up with was an application that enables businesses and developers to survey on a multi-locale basis.</section><section name="ff23"><h3 name="fc00">Before we&nbsp;begin</h3><figure name="c92d"><img data-image-id="1*-tf-L-8oeZROPxgQS-1q3A.png" data-width="1194" data-height="789" src="https://cdn-images-1.medium.com/max/800/1*-tf-L-8oeZROPxgQS-1q3A.png" class="fr-fic fr-dii"><figcaption style="text-align: center;">The Cosmic homepage (as of late 2017)</figcaption> </figure>Cosmic is a remote CMS service that lets you manage localized content externally from you application, allowing the changes you make to take immediate effect within your application. If you intend on modifying the survey&rsquo;s values you&rsquo;ll need a &nbsp;
<a data-href="https://cosmicjs.com/" href="https://cosmicjs.com/" rel="noopener" target="_blank">Cosmic account</a>. They offer free plans that you can use, as well as a 2 week trial to test it out without any restrictions.Regardless, you&rsquo;ll need to have a working development environment with <a data-href="https://nodejs.org" href="https://nodejs.org" rel="noopener" target="_blank">Node.js and npm installed</a>. This project uses some technologies such as Babel, Webpack, Bootstrap and React, so experience with those technologies is beneficial if you are planning to customize the front-end of the project.</section><section name="9ce5"><h3 name="dc7b">Installing the&nbsp;demo</h3>The demo GitHub project is located at <a href="https://github.com/cosmicjs/multi-language-survey">https://github.com/cosmicjs/multi-language-survey</a>. Either clone the repository with <code>git clone</code> or download the project manually using the download button on the repository page.Once the project is downloaded (and extracted if you downloaded an archive), <code>cd</code> into the project directory and then download the project dependencies with the command <code>npm install</code>. Once that is done, you should now be able to
build the project.Before we go through some the project details, build the development
version with the command <code>npm run dbuild</code>. The built application should then be available inside the <code>build/</code> directory.</section><section name="9cf8"><h3 name="84f5">Running the survey (back-end)</h3><figure name="ec20"><img data-image-id="1*4ScqJwjlZhi-hrVsTu8xYg.png" data-width="815" data-height="487" src="https://cdn-images-1.medium.com/max/800/1*4ScqJwjlZhi-hrVsTu8xYg.png" class="fr-fic fr-dii"><figcaption style="text-align: center;">A glimpse at what the application looks like by default.</figcaption> </figure>Now that we have the application built locally, running <code>npm run server</code> will automatically start the express server at <code>localhost:3000</code>. You can navigate to it from your web browser.</section><section name="07a3"><h3 name="ef3d">App structure</h3><figure name="f9f5"><img data-image-id="1*91Rd6I2vEbpnjERuoSJHEA.png" data-width="311" data-height="637" src="https://cdn-images-1.medium.com/max/600/1*91Rd6I2vEbpnjERuoSJHEA.png" class="fr-fic fr-dii"><figcaption>The default project structure after a successful build</figcaption></figure>There are three main sections to the application:&nbsp;The <code>build/</code> directory, which houses all of the built project files, as well as the public directory for the web server.The <code>src/</code> directory contains the React components for the front end of the project. It also contains a <code>util.js</code> file, which acts as a simple filtering library to filter out HTML entities output sent from the back-end server.The <code>survey/</code> directory contains the back-end Node.js code for transforming and outputting localized survey data to the front-end. It&rsquo;s also responsible for fetching the data from the remote Cosmic server.The file <code>template.js</code> contains the base template for the survey. This file should be updated when you wish to modify the survey using the <a data-href="https://surveyjs.io/Overview/Library/" href="https://surveyjs.io/Overview/Library/" rel="noopener" target="_blank">Survey.js</a> syntax.Key files in the root project directory include the <code><a data-href="https://github.com/cosmicjs/static-multi-language-app/blob/master/config.js" href="https://github.com/cosmicjs/static-multi-language-app/blob/master/config.js" rel="noopener" target="_blank">config.js</a></code>file, which contains the configuration for both the Cosmic API fetcher script, as well as the webpack build configuration <code>webpack.config.js</code>.</section><section name="1d49"><h3 name="775a">Modifying the&nbsp;survey</h3><blockquote name="f74e">Currently, the survey API only supports a specific subset of locales due to limitations of the Survey.js library. These locales are&nbsp;<code>ar, zh-Hans, cs, da, nl, en, fi, fr, de, el, hu, is, it, lv, fa, pl, pt, ro, ru, es, sv, and tr.</code></blockquote>The default locale is specified within the <code>src/app.js</code> file as the default <code>currentLocale</code> state initialized (which by default is simply <code>en</code> ).<figure name="0f82"><img data-image-id="1*NGz9c1Y8CaoYC7BqbOQ26g.png" data-width="1920" data-height="880" src="https://cdn-images-1.medium.com/max/1000/1*NGz9c1Y8CaoYC7BqbOQ26g.png" class="fr-fic fr-dii"><figcaption style="text-align: center;">An example of the Dashboard &gt; Questions</figcaption> </figure>If you activated the demo on the Cosmic website, you should already have two bucket types available: Questions and Nodes. Questions are objects that contain the necessary data for use as survey questions, while Nodes are simply localized values for use within the app (or as the titles of specific quiz pages).Each Question requires three essential parts, the <code>slug</code>, the <code>locale</code> , and the <code>content</code> field. The locale is critical, since the server will only process data for the matching locale. Without the locale specified, the server will discard the data as unneeded and the values will not be processed. &nbsp;&nbsp;<figure name="b428"><img data-image-id="1*gHx40TV0UDlZ31C3hFA4lQ.png" data-width="1373" data-height="694" src="https://cdn-images-1.medium.com/max/1000/1*gHx40TV0UDlZ31C3hFA4lQ.png" class="fr-fic fr-dii"></figure>Within the template (which will be mentioned shortly), the slug corresponds directly with a <code>%name-of-slug%</code> The content field expects a <code>p</code> element, and a <code>ul</code> (unordered-bullet list) containing a list of <code>li</code>(list items). Each list item corresponds with the <code>%X%</code> within the specified question&hellip;Confused? Don&rsquo;t sweat it. We&rsquo;ll be going over an example right now.Here is a example <code>survey/template.js</code> file containing matching values for the above:When the locale data is fetched by the user, the server iterates through each question object, and converts it to JSON. Once this is done, the matching <code>%symbol%</code> is replaced with the corresponding values on the remote Cosmic server.&nbsp;<blockquote name="3b2a">Thankfully, by default the Cosmic remote API converts special characters into HTML entities, so they won&rsquo;t affect the processing of JSON.</blockquote>The <code>title</code> property depends on a Node value (which is simply the text contents of a specific <code>slug</code> found with the Nodes objects menu. So a title with the value <code>%first-page-title%</code> would directly correspond to a Node with a slug value of <code>first-page-title</code>.Depending on the locale selected (in this case <code>en</code>), the result will resemble the following:&nbsp;In addition to the above, all defined Nodes (with the appropriate locale set) will be rendered into the <code>langData</code> state on the front end of the application. It contains an object of name-value pairs, so the syntax would resemble something like this:This allows you to include specific localized strings within you application.</section><section name="2d5c"><h3 name="a002">In closing</h3>I am again, amazed at how flexible and easy the API is to work with as a developer. Being someone who has worked with WordPress sites with clients before, knowing that a service like this exists brings a sense of ease.&nbsp;The best part about the Cosmic API is how ultimately it&rsquo;s just raw data. You can manipulate that data to meet the specific needs of your app, <a data-href="https://hackernoon.com/cosmic-js-with-static-web-applications-c291d3dd4b33" href="https://hackernoon.com/cosmic-js-with-static-web-applications-c291d3dd4b33" rel="noopener" target="_blank">even if it&rsquo;s not a live app</a>. I look forward to seeing how this technology grows and becomes the industry standard.</section><section name="5f03"> </section>

Blogs by Flynn Buckingham

Start building today

Blogs by Flynn Buckingham

.css-9vqfqm{display:inline-block;white-space:pre;}.css-sanqhm{opacity:0;}Start building today

Start building today