<p>There are some good things about WordPress. It can do pretty much anything with very little knowledge of coding necessary. It was very easy for me to pick a theme, upload some content and bam, there is a CMS website. Maybe it is my technical wanderlust, but WP wasn&#39;t doing it for me anymore. Maybe it was because I have no interest in learning PHP and setting up a local environment to develop for a WordPress instance just seemed to be cumbersome. The other option is just to keep changing things in my production instance. And then the updates and plugins! It was just not what I wanted anymore. Enter <a href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a>, a headless CMS.</p><h3>TL;DR:</h3><p><a href="https://www.jamieintrocaso.com" rel="noopener noreferrer" target="_blank">Jamie Introcaso&#39;s Gatsby Blog</a><br><a href="https://cosmicjs.com/articles/from-wordpress-to-jamstack-how-to-make-your-website-10x-faster" rel="noopener noreferrer" target="_blank">From WordPress to JAMstack</a><br><a href="https://cosmicjs.com/extensions/wordpress-importer" rel="noopener noreferrer" target="_blank">WordPress Importer Extension</a><br><br>I was perusing through Medium one day at the posts that it had curated for me, and I saw an <a href="https://hackernoon.com/from-wordpress-to-jamstack-how-to-make-your-website-10x-faster-e363abc46e2d" rel="noopener noreferrer" target="_blank">article describing how easy it was to move from a WordPress site to a website powered by Cosmic</a>. The steps outlined in the article were really simple and they have an extension that will pull over your existing WordPress posts! The example they moved to was a React blog powered by Gatsby. I had no experience with either one of them, but I know that they are all the rage right now! I figured that having a little bit of experience with them definitely could not hurt me. And the great thing about Cosmic is that at the end of the day, it serves up my blog posts like an API. So I can choose my delivery method to be whatever I want.<br><br></p><p><img src="https://cdn.cosmicjs.com/0c0c0aa0-929c-11e9-80b6-4b95ee233edb-0c879da0-2f0f-11e9-85fa-89e2adcfe001-wordpress-to-cosmic.jpg" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><p><br></p><p>The article, which was written by one of the co-founders of Cosmic, laid out in easy steps how to move the site over and import all your posts using an importer tool. There is a GitHub repo which has the template for the front-end of the app. Once you have created your &quot;bucket&quot; in the Cosmic web interface, you can wire up the front end to the API to retrieve your posts that you have imported into your bucket.&nbsp;</p><p>There is also an <a href="https://cosmicjs.com/extensions/wordpress-importer" rel="noopener noreferrer" target="_blank">importer extension</a> that will pull all your posts from your WordPress instance. It works like a champ, with a couple of caveats. The dates used for the posts after the import puts the posts in reverse order (i.e. Your most recent post shows as the earliest post.). This is probably something that I will fix in the GraphQL query. The other is not evident until you set up the new DNS settings on your domain. All of my images used my domain name in the link and since that is not pointing to my WordPress instance, they are broken now. I don&#39;t have a great deal of posts so it is more tedious for me to go through all the posts and put the pictures back in the posts. I could not imagine having to do that for a large number of posts!<br><br></p><p><img src="https://cdn.cosmicjs.com/14a61770-938a-11e9-abb5-b3b1fa688145-45c9f8b0-2f0f-11e9-b57a-a7bb7216ad7b-later-wordpress.gif" style="width: 100%;" class="fr-fic fr-dib"></p><p><br>I had a couple of hiccups setting this up, due to me working late at night on this and not properly reading the docs. But when I reached out to the folks with questions or issues, they got right back to me about what I had missed and worked with me to make sure that I was able to figure it out. I cannot speak highly enough about the level of support that I had from them.&nbsp;</p><p>After getting the new blog to run locally, it was time to put it out into the world! The article suggested using <a href="https://www.netlify.com/">Netlify</a> to host the app. You may not have heard of Netlify yet, but you probably have heard the term <a href="https://jamstack.org/">JAMstack</a> which was coined by the CEO of Netlify. Setting up my app for Netlify was super simple. If you use a git provider (I personally uploaded my app to a private GitHub repo), you can hook into the Netlify process to have a CI/CD pipeline anytime you push to the master branch of your repo. They also walk you through setting up your domain to point at your site running on their server as well as handle getting you an SSL cert using Let&#39;s Encrypt! And this was great, because my blog did not have an SSL cert before. I mean, I was going to write an article about installing one on my WordPress instance, but I think this worked out better. &nbsp;</p><h3>Conclusion</h3><p>So far, I am really happy with this new setup for my blog. It is simple and open enough to allow me to customize it to my heart&#39;s content. I am sure that there are things that I will miss from the WordPress controls and admin panel. But I will get to learn about Gatsby and React, and I can already see me using Cosmic for another project that I have in mind! If you have any comments or questions about building apps with 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>.</p>

Moving From WordPress to Limitless Opportunity Using Cosmic

<p>In this tutorial, we are building a JAMstack website with Cosmic. Let&#39;s first define our JAMstack: &#39;J&#39; stands for JavaScript, our application uses Vue.js. &#39;A&#39; stands for APIs, and we are using the powerful APIs of <a href="https://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a>. &#39;M&#39; stands for Markup, which is Nuxt.js in this example. For this tutorial, we will be building a simple fitness studio website. In the end, we will deploy it on Netlify which gives serverless
backend services and hosting. Let&#39;s get started.</p><p><br></p><p><strong><span style="font-size: 24px;">TL;DR</span></strong></p><p><a href="https://cosmicjs.com/apps/jamstack-fitness-website" rel="noopener noreferrer" target="_blank">Check out the demo</a></p><p><a href="https://github.com/cosmicjs/nuxt-jamstack-website" rel="noopener noreferrer" target="_blank">Download the codebase</a></p><p><br></p><p><strong><span style="font-size: 24px;">Introduction</span></strong></p><p>We are building a JAMstack website with the powerful APIs of Cosmic. This website is about fitness and the body. &nbsp;The first page is dynamic with some navigations provided by Vue.js. On the left side navigation, you will find the link to the blog,
whose data is also coming from the Cosmic via the Cosmic APIs. Let&#39;s start now with the requirements.</p><p><br></p><p><strong><span style="font-size: 24px;">Requirements</span></strong></p><p>The one and the only requirement is <a href="https://nodejs.org/en/">Node.js</a>. Install it on your system to run npm commands.&nbsp;</p><p><br></p><p><strong><span style="font-size: 24px;">Getting Started</span></strong></p><p>Here we are using npm but you can also use yarn to install packages. So if you have installed above software, run the following command to a quick start:</p><p><code>npx create-nuxt-app jamstack_app;</code></p><p>Here jamstack_app is your desired name of the app. Now go to the root of the created folder, and run the following command to run it in development:</p><p><code>npm run dev</code></p><p>Now visit: <a href="http://localhost:3000/">http://localhost:3000/</a> to view the project in development mode.&nbsp;</p><p>Learn more about Nuxt.js quick starter kit here: <a href="https://nuxtjs.org/guide/installation/">Nuxt.js Starter Kit</a></p><p><br></p><p><strong><span style="font-size: 24px;">Folder Structure</span></strong></p><p>After creating the app, you will get the same folder structure as given in the picture:</p><p><img src="https://cdn.cosmicjs.com/b0f99950-8e01-11e9-8e40-370eb5e3d090-Screenshot-from-2019-06-13-23-02-43.png" style="width: 300px;" class="fr-fic fr-dib"></p><p>Let&#39;s explain the main folders and files of this structure. package.json file contains the record of all modules installed in your project. Static folder contains the static files used in the project like logo and images. Pages folder contains the
pages like home page and blog etc. node_modules has all modules installed and layout contains styling of the project. Config folder is created by us to save the config.js file which will be used at the time dynamic requests to the Cosmic server.&nbsp;</p><p><br></p><p><strong><span style="font-size: 24px;">Configuration</span></strong></p><p>We have generated the Nuxt.js app with the app generator but the main configuration is pending to make our app a complete JAMstack app. With the creation of the app, JavaScript and Markup part of the app completed. Now we are configuring the API part
of the app that means the Cosmic part.&nbsp;</p><p>For this, you need a Cosmic account. <a href="https://cosmicjs.com/signup" rel="noopener noreferrer" target="_blank">Sign up for Cosmic</a> official website, it is totally free. Then create a free bucket and create your first object type: &#39;blogs&#39;. Or you can import a built-in bucket, way to import it is given in the below heading.&nbsp;</p><p><img src="https://cdn.cosmicjs.com/4c233670-8d35-11e9-9d53-0d7baf38376b-Screenshot-from-2019-06-12-22-41-16.png" class="fr-fic fr-dib"></p><p><br></p><p>Now click the basic setting option in your dashboard, it will open your basic setting page as shown above. Note down your bucket slug, bucket_id. Now generate the read and write keys and save them on your computer. Now save them in your project also.
For this create a config folder and create a config.js file in it and save as given below:</p><div class="fr-embedly                    " data-original-embed="<a href='https://gist.github.com/a9kitkumar/e5f742e2526dff0dab690a232795e6e1.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/e5f742e2526dff0dab690a232795e6e1.js" class="embedly-card"></a></div><p><strong><span style="font-size: 24px;">In-built Bucket</span></strong></p><p>If you don&#39;t want to create a new bucket, then you have an option to import a readymade bucket. For this, download the bucket.json file from our Git codebase and import it from your dashboard from the Import/Export option, check below image for visual
help:</p><p><img src="https://cdn.cosmicjs.com/b05f8a00-8d42-11e9-869f-cb5634810819-Screenshot-from-2019-06-13-00-16-34.png" class="fr-fic fr-dib"></p><p><br></p><p><strong><span style="font-size: 24px;">Home Page</span></strong></p><p>Let&#39;s get started with the first page that is the home page. In this we will render the dynamic data from Cosmic server with APIs, it will show you the Vue.js part of the website. Here we are going to write the detail of our website and will implement navigation in the header of the website as well as in the bottom part will give a button to navigate to blog. Check out the code of homepage at location: <code>pages/index.vue</code></p><div class="fr-embedly                  " data-original-embed="<a href='https://gist.github.com/a9kitkumar/4dd54f1ac5b63fab2322ff2ed62e8d70.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/4dd54f1ac5b63fab2322ff2ed62e8d70.js" class="embedly-card"></a></div><p>This page is a template plus vue.js code and pure dynamic in nature. Here we applied a link at the bottom which navigates to the blog page and this blog page is also pure dynamic in nature.</p><p><br></p><p><strong><span style="font-size: 24px;">The Layout of the Website</span></strong></p><p>The complete layout of the app is coded in a single file for good structure. Here we are customizing the header, footer and other color schemes of the app. &nbsp;Check out the code for layout <code>layouts/default.vue</code></p><div class="fr-embedly                 " data-original-embed="<a href='https://gist.github.com/a9kitkumar/407620e4854910f37214f9faee0e1e59.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/407620e4854910f37214f9faee0e1e59.js" class="embedly-card"></a></div><p>Here we defined the body color of the website along with the header, footer, and navigational effects. In the navigation, we have given route to blog page and route to the home page as well. In the header of the app, we have given navigation to home to
the title of the website.&nbsp;</p><p><br></p><p><strong><span style="font-size: 24px;">Blog Page</span></strong></p><p>This is the second page of our website, it handles the dynamic fetching of the data from Cosmic server with the help of Cosmic APIs. First of all, check the code and then we will explain it. Code is placed at the location: <code>pages/blog.vue</code></p><div class="fr-embedly                " data-original-embed="<a href='https://gist.github.com/a9kitkumar/653b6f22b04c5ef541e2dcca70de91b5.js' class='embedly-card'></a>"><a href="https://gist.github.com/a9kitkumar/653b6f22b04c5ef541e2dcca70de91b5.js" class="embedly-card"></a></div><p>There are two part of the page, first is template and second if JavaScript part. In the template, we have given the route to the home page with the back button and rendered the title and body of the blog.&nbsp;</p><p>In JavaScript part, we have made of a GET request to the Cosmic server with the help of Cosmic API. This API is the combination of the static URL, bucket slug and object type. In GET request, read key is necessary to get the data from the server.
After a successful request, we manipulated the data and passed to variables as shown in the code.</p><p>&nbsp;<img src="https://cdn.cosmicjs.com/e066a130-8dff-11e9-bbbc-e3026215e4a7-Screenshot-from-2019-06-13-22-51-34.png" class="fr-fic fr-dib"></p><p><br></p><p><strong><span style="font-size: 24px;">Static Folder</span></strong></p><p>In the codebase, check out the static folder. As the name describes, it contains the static data and in our case, it contains the static images of our project. As you know our front page id totally static, image shown on the front page resides in this
folder. In the same way, any static image or logo which will be used in the project must be placed here.&nbsp;</p><p><br></p><p><strong><span style="font-size: 24px;">What Have We Built?</span></strong></p><p><img src="https://cdn.cosmicjs.com/6ca5f420-912a-11e9-bc00-5fc34b01c111-68747470733a2f2f636f736d69632d73332e696d6769782e6e65742f39633962376633302d393132332d313165392d616636352d3935653930663332323632382d6e7578742d6a616d737461636b2e706e67.png" style="width: 100%;" class="fr-fic fr-dib"></p><p>We have built a JAMstack website with the powerful APIs of Cosmic. In JAMstack:</p><ul><li>&#39;J&#39; stands for JavaScript and here Vue.js used as JavaScript part of JAM,</li><li>&#39;A &#39;stands for API, here Cosmic used as the API part of JAM,</li><li>Meaning of &#39;M&#39; is Markup, here Nuxt.js is used as the markup.&nbsp;</li></ul><p>Here the main part is the API part, we have made a GET request with the help of which and got the quick response. This request made with the help of axios module and then JSON data manipulated easily. Format of the Cosmic API response is very simple
to handle.&nbsp;</p><p><br></p><p><strong><span style="font-size: 24px;">Deployment to Netlify</span></strong></p><p>We have built an app with Vue.js, Nuxt.js, and Cosmic, but it is not a pure JAMstack app until we can deploy the static assets to a CDN. For this example, we will deploy it to the serverless backend service provider <a href="https://www.netlify.com/" rel="noopener noreferrer" target="_blank">Netlify</a>.</p><p>Install the <a href="https://www.npmjs.com/package/netlify-cli" rel="noopener noreferrer" target="_blank">Netlify CLI</a> and <a href="https://www.npmjs.com/package/nuxt" rel="noopener noreferrer" target="_blank">Nuxt CLI</a>:</p><pre>npm i -g netlify-cli
npm i -g nuxt</pre><p>Build the static files</p><pre>npm run build</pre><p>Then deploy to Netlify. You will be prompted to select the folder. Type <code>dist</code> to deploy the <code>dist</code> folder.</p><pre>netlify deploy</pre><p><br></p><p><strong><span style="font-size: 24px;">Conclusion</span></strong></p><p>With the help of Cosmic you can create powerful applications. In this example, we were able to build a JAMstack application with the API power of Cosmic. If you have any comments or questions about building apps with 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>.</p>

How to Build a JAMstack Website using Vue.js, Nuxt.js and Cosmic

Building a Full Stack SMS-enabled Chat Application using Twilio, Node.js, GraphQL and Cosmic

<p>In this tutorial I&#39;ll be showing you how I built a Vue.js app with Authentication using Cosmic and AWS Lambda prior to deploying to Netlify. Let&#39;s get started.</p><h3>TL;DR</h3><p><a href="https://cosmicjs.com/apps/vue-cosmic-auth" rel="noopener noreferrer" target="_blank">Demo Link</a><br><a href="https://github.com/cosmicjs/vue-authentication" rel="noopener noreferrer" target="_blank">View Code on Github</a></p><p><a href="https://app.netlify.com/start/deploy?repository=https://github.com/availit/v-cosmic-auth" 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></p><h3>Features</h3><ul><li>Netlify hosting (plus CDN, Prerendering, Minification, etc..)</li><li>Vuetify components for interface</li><li>AWS Lambda functions via Netlify</li><li>Cosmic for Database API</li><li>Password hashing using PBKDF2 with Salt</li><li>Email Verification using Nodemailer via SendinBlue</li></ul><h3>Needed Improvements</h3><ul><li>Password reset function</li><li>User avatar support</li></ul><h3>Prerequisites</h3><p>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></p><p>In order to deploy you will need a Netlify account.</p><p>Also for SMTP server to send email verification link I am using <a href="https://www.sendinblue.com/" rel="noopener noreferrer" target="_blank">SendInBlue</a> since they give you 300 free emails a day.</p><h3>Project Structure</h3><p><strong>Important things to note:</strong></p><p><strong>~/public/_redirects</strong><br>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>.</p><p><strong>~/cosmic.js</strong><br>This file is the main entry point for Cosmic node library that we will export in order to use through-out our lambda functions.</p><p><strong>~/functions</strong><br>The functions directory holds all of our lambda functions which will automatically get ran on AWS once we deploy to netlify. We&#39;ll be using these functions to handle our hashing and database logic required for Cosmic.</p><h3>Fork and Clone</h3><p>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:</p><pre>git clone <a href="https://github.com/cosmicjs/vue-authentication">https://github.com/cosmicjs/vue-authentication</a></pre><p>Use BitBucket or Gitlab instead?</p><p>If you prefer to use a different git provider you can just clone the repository and upload it to your desired remote.</p><h3>Install</h3><p>In your command line cd into the project root directory that you just cloned and run npm install to download and install all the required dependencies.</p><h3>Integrate Cosmic Bucket</h3><p>In your Cosmic account create a new bucket and call it whatever you want.</p><p>Download this bucket.json file and go to Import / Export Data page in your Cosmic bucket&#39;s Settings, select and upload the downloaded file. This will import all the Object Types and placeholder data.</p><p>Next you&#39;ll need to modify the cosmic.js file within your project directory to connect to the bucket you just created.</p><p>Here&#39;s what you&#39;ll need:</p><ul><li>Bucket slug</li><li>API Read Access Key</li><li>API Write Access Key</li></ul><p><strong>~/cosmic.js</strong></p><div class="fr-embedly    " data-original-embed="<a href='https://gist.github.com/availit/a7473e371e32250831f2a103100524e0.js' class='embedly-card'></a>"><a href="https://gist.github.com/availit/a7473e371e32250831f2a103100524e0.js" class="embedly-card"></a></div><h3>Integrate SendInBlue SMTP</h3><p>In order for email verification to work you&#39;ll need an SMTP server. For the sake of simplicity for this tutorial I will be using <a href="https://www.sendinblue.com/" rel="noopener noreferrer" target="_blank">SendInBlue</a> since they provide you with 300 free emails and use the Nodemailer npm package to integrate with.</p><p>After you create an account go to your SMTP &amp; API settings to generate an SMTP key to use in the <strong>CreateNewUser.js</strong> Lambda function, you can find it under the &quot;SMTP&quot; tab.</p><p><img src="https://cdn.cosmicjs.com/778d8fb0-7e6a-11e9-aae8-5592095532f4-sendinblue-smtp-key.png" style="width: 100%;" class="fr-fic fr-dib"></p><p>Then enter in your email and SMTP password to the following transporter object.</p><p><strong>~/functions/CreateNewUser.js</strong></p><div class="fr-embedly    " data-original-embed="<a href='https://gist.github.com/availit/d18c18c74ab0e042976885bba4579be0.js' class='embedly-card'></a>"><a href="https://gist.github.com/availit/d18c18c74ab0e042976885bba4579be0.js" class="embedly-card"></a></div><h3>Running your app locally</h3><p>In order for the AWS Lambda functions to run locally properly you&#39;ll need to run the following command:</p><pre>npm run start:lambda</pre><p>This will spin up a local function server using the netlify-functions library.</p><p>Next, you&#39;ll need to make sure you have a .env file in your root project directory to change the VUE_APP_API_HOST variable to point to the lambda server you just started running. Otherwise your app won&#39;t work. Mine started on port 9000 by default.</p><pre>VUE_APP_API_HOST=http://localhost:9000/</pre><p>After that you may open another console and finally start the Vue JS application with this command:</p><pre>npm run serve</pre><p>In order to test the API locally you may need to run Chrome with CORS disabled, you can find out how to do that depending on your OS with this helpful list:</p><p><strong>Windows:</strong></p><pre>&quot;C:\Program Files (x86)\Google\Chrome\Application\chrome.exe&quot; --disable-web-security --disable-gpu --user-data-dir=~/chromeTemp</pre><p><strong>OSX:</strong></p><pre>open -n -a /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome --args --user-data-dir=&quot;/tmp/chrome_dev_test&quot; --disable-web-security</pre><p><strong>Linux:</strong></p><pre>google-chrome --disable-web-security</pre><p>Now you can navigate to http://localhost:8080 to open the application.</p><h3>Deployment with Netlify</h3><p>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).</p><p>After you authenticate you can see your list of repositories. Select the one you created for this project you created earlier and set the build command to &quot;npm run build&quot; and &nbsp;the publish directory to &quot;dist&quot;.</p><p><img src="https://cdn.cosmicjs.com/67111010-7e6c-11e9-9362-5314c3434f02-build-settings.png" style="width: 100%;" class="fr-fic fr-dib"></p><p>Next, you&#39;ll need to make sure you have set the environment variables and have the VUE_APP_API_HOST variable to point to the new site you just created in Netlify. Otherwise your app will not work.</p><pre>VUE_APP_API_HOST=https://yourNewSite.netlify.com/</pre><p><br></p><p><img src="https://cdn.cosmicjs.com/6b0c0b70-7e6c-11e9-9362-5314c3434f02-Netlify-Evars.png" style="width: 100%;" class="fr-fic fr-dib"></p><p>Next you want to set your functions directory to use &quot;lambda&quot; which will be the compiled version of the <strong>/functions</strong> folder.<img src="https://cdn.cosmicjs.com/6fa71760-7e6c-11e9-9362-5314c3434f02-netlify-functions.png" style="width: 100%;" class="fr-fic fr-dib"></p><h3>Conclusion</h3><p>I built this app for open source under MIT license so feel free to upgrade it, hack it, or break it.</p><p>This was built using Cosmic for the user database.. and the password-hash-and-salt library for hashing. Oh, and don&#39;t forget Vuetify, the amazing Vue JS component library by John Leider and over 200+ open source contributors.</p><p>The email verification is using SMTP server hosted with SendinBlue, they give you 300 free transnational emails. Then of course Vuex for state management.</p><p>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></p>

How to Build an Authentication App using Cosmic, Vue.js, and Lambda

<section name="dd66"><h3 name="4dcb">TL;DR:</h3><p><a href="https://cosmicjs.com/extensions/export-to-csv" rel="noopener noreferrer" target="_blank">Export to CSV Extension</a></p><p><a href="https://github.com/cosmicjs/export-to-csv" rel="noopener noreferrer" target="_blank">Download the codebase</a><br><br></p><p name="0a1c">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.</p><p name="aa77">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.</p><p name="2a3e">Today we will be going over how to export your data in a CSV.<br><br></p><p name="2a3e"><img src="https://cdn.cosmicjs.com/4f232d70-7e36-11e9-9992-cf5b37d5466d-ezgif-3-31b5db25240d.gif" style="width: 100%;" class="fr-fic fr-dib"></p><h3 name="51a6"><br>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><p name="01b4">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.</p><h3 name="c8fe"><br>Adding via Cosmic</h3><p><br>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;.<br><br></p><p><img src="https://cdn.cosmicjs.com/5a4664c0-7e35-11e9-a67b-5922ec0198f5-Export-to-CSV.png" style="width: 100%;" class="fr-fic fr-dib"></p><p><br>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.<br><br></p><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"><br><br>Building manually</h3><p name="199a">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:</p><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><p name="70ec">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.</p><p name="4139">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.</p><p name="4139"><br></p><p name="4139"><br></p><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><p name="834f"><br></p><p name="834f">Expanding the <strong>Settings</strong> on the left hand sidebar will reveal an option called <strong>Extensions</strong>. Clicking that specific menu item, will bring up the extensions page.</p><p name="834f"><br></p><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><p name="d73d"><br></p><p name="d73d">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 <strong>+ Add Extension</strong> tab to manually add our own custom version.</p><p name="d73d"><br></p><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><p name="f038"><br></p><p name="f038">Then we manually drag our <code>build.zip</code> file into the area labeled<strong>&nbsp;Drop .zip file here</strong>, or just simple click <strong>+ Add zip file</strong> to manually choose the file from the filesystem. Doing so will then show the following screen:</p><p name="f038"><br></p><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><p name="ba09"><br></p><p name="ba09">We now have a new option to export Cosmic Objects via the <strong>Export to CSV</strong> on the top left of the screen.</p><p name="ba09"><br></p><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><p name="d606"><br></p><p name="d606">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.</p><p name="c23e">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. <strong>All</strong> just returns all Objects without filtering.</p></section><section name="2cfa"><h3 name="d0fe">Conclusion</h3><p name="5b0c">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;</p><p name="4dcc">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.</p><p name="4dcc">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>.</p></section>

Exporting Cosmic data to CSV

<p>Creating / updating our portfolios is a necessary evil these days. &nbsp;Places change, people change, and thus the cycle of content creation and management churns continuously. &nbsp;When you find yourself in need of &nbsp;a portfolio redesign, there are tons of tools and services to consider. &nbsp;One that should currently peak your interest is the Gatsby JS static site generator along with a headless CMS, like Cosmic. &nbsp;Today, with these two tools, we will create a working portfolio ready for continuous deployment, with the power to be rebuilt when content changes are made.</p><h3>TLDR:</h3><p><a href="https://cosmicjs.com/apps/gatsby-agency-portfolio" rel="noopener noreferrer" target="_blank">Gatsby Portfolio Site Demo</a></p><p><a href="https://github.com/cosmicjs/gatsby-agency-portfolio" rel="noopener noreferrer" target="_blank">Download the Codebase</a>&nbsp;</p><p><br></p><h2>0.0 Before We Start</h2><p>We are creating a portfolio site mostly with static data, but it would nice to be able to easily modify the content of our site without needing to modify a bunch of source code. &nbsp;So we are building a client that consumes content stored on a Content Management Service and programmatically displays it at whatever URL we choose.&nbsp;</p><h3>0.1 Tools We Are Using</h3><ul><li><a href="https://www.gatsbyjs.org/" rel="noopener noreferrer" target="_blank">Gatsby JS</a> - This is a static site generator that will automatically fetch new data and rebuild our site files when changes are made to our content. &nbsp;Comes bundled with data fetching wizardry GraphQL and the ever present React JS front end framework.</li></ul><p><br></p><ul><li><a href="https://cosmicjs.com/" rel="noopener noreferrer" target="_blank">Cosmic</a> - Our Content Management Service that will store all the information we need about our site. &nbsp;Cosmic offers very flexible data model definition that will allow us to store all types of information, from iterables to simple text fields and HTML content. &nbsp; <strong>NOTE!</strong> - <em>In order to follow along with this tutorial you will need to create a bucket on Cosmic and fill it with the appropriate data objects.</em></li></ul><p><br></p><ul><li><a href="https://rsuitejs.com/en">RSuite</a> - A library of pre-styled components that works with react to give us pre-styled components. &nbsp;This will allow us to use components that look great out of the box, while also giving us flexibility to make adjustments as needed.</li></ul><p><br></p><ul><li><a href="https://www.netlify.com/" rel="noopener noreferrer" target="_blank">Netlify</a> (Optional) - A deployment service that will let us hook directly into a git repository. &nbsp;Using this we can configure webooks for rebuilding static files as well as make automatic deploys when source code changes occur.</li></ul><p>Let&#39;s go ahead and begin configuring our setup.</p><h2>1.0 Installation and Setup</h2><p>We only have a few software requirements needed to start building. Mainly we need <a href="https://nodejs.org/en/">Node JS</a>, either npm or yarn, and we will be using <a href="https://git-scm.com/" rel="noopener noreferrer" target="_blank">git</a> to do some deployment things on <strong>Netlify</strong> if you so choose.</p><h3>1.1 Initializing our Project</h3><p>Once you get those installed, we can begin setting up our development environment. &nbsp;Gatsby uses a very handy dandy CLI to allow us to bootstrap our project with a project directory ready to build and serve from a Node environment.</p><p>If you don&#39;t have the CLI you can install it with a simple npm terminal command:</p><pre>$npm install -g gatsby-cli</pre><p>This will take a moment to install but after a few seconds you will have access to gatsby terminal command which we can use to initialize our project:</p><pre>$gatsby new gatsby-portfolio</pre><p>Now we have a directory called <strong>gatsby-portfolio</strong> in the location you ran the gatsby command, change to that directory and list its contents:</p><pre>$cd gatsby-portfolio/ &amp;&amp; ls -la</pre><p>You should see a list of folders and files similar to this:</p><pre><code>.
├── node_modules
├── src
├── .gitignore
├── .prettierrc
├── gatsby-browser.js
├── gatsby-config.js
├── gatsby-node.js
├── gatsby-ssr.js
├── LICENSE
├── package-lock.json
├── package.json
└── README.md</code></pre><p>open up <strong>package.json</strong> and we will see we have some terminal scripts that we can now use to build / serve our project. Try running the start script in your terminal:</p><pre>$npm start</pre><p>or&nbsp;</p><pre>$yarn start</pre><p>After a few seconds we should see a success message in our terminal and we should be able to view our initial project view on our <a href="http://localhost:8000" rel="noopener noreferrer" target="_blank">localhost</a>, your should see something like this:</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/1017d800-70f4-11e9-b4ca-010bf33e4f63-gatsby-start-screen.png" style="width: 410px;" class="fr-fic fr-dib"></p><p>Great, now press <strong>ctrl + C</strong> within your terminal to stop the development server and we are now ready install our node libraries.</p><h3>1.2 Installing our Libraries</h3><p>We require a few plugins from Gatsby to allow our Graphql queries to run, as well as a few extras for environment configuration and our component library RSuite. &nbsp;From within your project directory, we need to run some terminal commands to get our js libraries:</p><pre>$yarn add rsuite dotenv gatsby-source-cosmicjs gatsby-plugin-sass gatsby-plugin-less node-sass less</pre><p>Let&#39;s go through these and talk about what we are adding to our project here:</p><ul><li><strong>rsuite</strong> - our component library that I mentioned above. &nbsp;Installing this let&#39;s us import js classes and insert pre-styled React components.</li><li><strong>dotenv</strong> - Allows us to configure our source code with sensitive api keys, token, whatever that may change between developers but should be present when the source code is built.</li><li><strong>gatsby-source-cosmicjs</strong> - a gatsby plugin that will let us easily make graphql requests to the Cosmic graphql API.</li><li><strong>gatsby-plugin-sass / gatsby-plugin-less / node-sass / less</strong> - Gatsby plugins and styling libraries that will let us use .scss and .less files. &nbsp;These will allow us to import rsuite styling specs and bundle them properly on build.</li></ul><h3>1.3 Configuring Gatsby</h3><p>In order for Gatsby to be able to build our html files, we need to fetch data from Cosmic and build each page using the data graphql retrieves. &nbsp;Let&#39;s go ahead and open <strong>gatsby-config.js</strong> and add our installed packages:</p><div class="fr-embedly            " data-original-embed="<a href='https://gist.github.com/JacobKnaack/04020f1404792702294814e65a1141e3' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/04020f1404792702294814e65a1141e3" class="embedly-card"></a></div><p>We have added our plugins for <strong>sass</strong> and <strong>less</strong>, and also added our <strong>gatsby-source-cosmicjs</strong> plugin. &nbsp;You&#39;ll notice that we are using some environment variables to configure this plugin so we need to add a hidden file that will store these variables.</p><pre>$touch .env</pre><p>Now add your variables to this file and <strong>dotenv</strong> will take care of defining these using line 1 of our <strong>gatsby-config.js</strong> file. &nbsp;You can find the value to assign to these variables from within your Cosmic bucket: Bucket Name &gt; Dashboard &gt; Settings &gt; Basic Settings:</p><div class="fr-embedly           " data-original-embed="<a href='https://gist.github.com/JacobKnaack/3e971eeda0b866d05cee9f78a6e82491' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/3e971eeda0b866d05cee9f78a6e82491" class="embedly-card"></a></div><p>Now we are ready to build!</p><h2>2.0 Building Our Components</h2><p>So what are we building exactly. &nbsp;Well, basically we will create one large Page component and create a series of display components to handle each section of our portfolio. &nbsp;Let&#39;s break this down:</p><pre>src/pages/index.js</pre><ul><li>This is our home page and where all of our components will be loaded and used to display portfolio info.</li></ul><pre>src/components/projects.js</pre><ul><li>This will be our projects section that will take project data and display information about each project. &nbsp;This will take a prop composed of our portfolio projects and iterate over them to display data when appropriate.</li></ul><pre>src/components/work.js</pre><ul><li>This will a section highlighting our skills and the types of services / work we offer to people that might peruse our portfolios.</li></ul><pre>src/components/about.js</pre><ul><li>This will be a section that talks about us, displaying any personal data we want to share.</li></ul><pre>src/components/contact.js</pre><ul><li>Finally we have a component that we will use for displaying a contact form that will let users email us if they have any inquires.</li></ul><h3>2.1 The Home Page</h3><p>This is our main component that act as our entry point for our portfolio. &nbsp;Its job is to make several Graphql API requests for our portfolio data from Cosmic and pass that data onto the different sections of our portfolio. &nbsp;Let&#39;s look at the component and talk about what&#39;s happening:</p><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/JacobKnaack/ad7675d930faa86ca170ee16001dc0a9' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/ad7675d930faa86ca170ee16001dc0a9" class="embedly-card"></a></div><p>The important parts of this The only display element that really lives here is the splash screen which gives us a little bit&nbsp;</p><p><br></p><h3>2.2 Modify the Header Component</h3><p>By default Gatsby gives us a <strong>Layout</strong> component that lets us wrap each page with a <strong>Header</strong> and <strong>Footer</strong>. &nbsp;We are going to add some navigation for our portfolio into the header so users can navigate to different sections of our Portfolio by clicking on a nav bar that we will import from rsuite:</p><div class="fr-embedly     " data-original-embed="<a href='https://gist.github.com/JacobKnaack/54a7f2a4ef7c3800f099b2dd1b25728f' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/54a7f2a4ef7c3800f099b2dd1b25728f" class="embedly-card"></a></div><p>These links will scroll the home page down to each section via the name properties placed on each section on our home page.</p><h3>2.3 The Work Component</h3><p>This component takes in our data about any services we provide, specifically a <strong>names</strong>, a short <strong>summary,&nbsp;</strong>and a more in depth <strong>description</strong>, and let&#39;s us display that to our users:</p><div class="fr-embedly    " data-original-embed="<a href='https://gist.github.com/JacobKnaack/1b20f1c0fb1549364033d643c14efd19' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/1b20f1c0fb1549364033d643c14efd19" class="embedly-card"></a></div><p>This iterates through our services objects. &nbsp;For every service that exists we add a new div to the work component section. Now we can modify and add data to our services on Cosmic and it will update accordingly.</p><h3>2.4 The Projects and About Components</h3><p>These sections will behave in essentially the &nbsp;same way, &nbsp;we display some information from our &quot;Home Page&quot;. &nbsp;Just a bit of text to give the user some context for each section, but after that we just iterating through our list objects we have saved to our Cosmic bucket:</p><div class="fr-embedly" data-original-embed="<a href='https://gist.github.com/JacobKnaack/48a21123f39244c52f53a992c4426b11' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/48a21123f39244c52f53a992c4426b11" class="embedly-card"></a></div><p>And just like Project displays a heading and display images and data about projects, we can do the same with the individuals and data in the about section:</p><p><br></p><div class="fr-embedly   " data-original-embed="<a href='https://gist.github.com/JacobKnaack/0544a30590e0c20d4d29ee8416f0b6b8' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/0544a30590e0c20d4d29ee8416f0b6b8" class="embedly-card"></a></div><h3>2.5 The Contact Component</h3><p>Lastly we have a component that will users to contact us at an email we specify. &nbsp;This will handle our contact form, and will be initialized with some state variables so we can control our user inputs, all the input and form components are handled by rsuite so we don&#39;t have to add too many styling properties to our form fields and feedback components:</p><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/JacobKnaack/0c42b547d2b487b48c9c52e686d7fbad' class='embedly-card'></a>"><a href="https://gist.github.com/JacobKnaack/0c42b547d2b487b48c9c52e686d7fbad" class="embedly-card"></a></div><p>Essentially we Validate our form fields and check if all the form fields are present, then we a the <strong>mailto</strong> url to open an email client and populate it with our message.</p><h2>3.0 Deployment (optional)</h2><p>Now we are ready to deploy our app. &nbsp;The most important part of this process is making sure that our app rebuilds itself when we change any data on Cosmic. &nbsp;If we integrate continuous deployment using git <strong>Netlify</strong> will allow us to activate a buildhook in order to generate new static files using updated data fetched from the Cosmic API.</p><h3>3.1 Deploying from Git</h3><p>Go to <a href="https://www.netlify.com/" rel="noopener noreferrer" target="_blank">Netlify</a> and create an account if you don&#39;t aready have one. &nbsp;From the apps dashboard click <strong>New Site from Git</strong> at the app dahsboard. &nbsp;From there you will be walked through the process of authorizing Netflify to access a repository from a git service (github, gitlab, bitbucket).</p><p>You will have to add you <strong>COSMIC_READ_KEY</strong> and your <strong>COSMIC_BUCKET_SLUG</strong> as environment variables. This can be found under the deploy settings once the app has been created on Netlify. &nbsp;In the same area you can create your <strong>buildhook</strong> to allow Cosmic to request a rebuild of your files once an update is made:</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/a01c7490-7353-11e9-9e31-110b00e15f97-Screen-Shot-2019-05-10-at-11.34.32-AM.png" style="width: 522px;" class="fr-fic fr-dib"></p><p>Once the build hooks is created go over to Cosmic and add it to the <strong>webhooks</strong> tab under the settings for your bucket:</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/dbfe0b90-7353-11e9-808f-9fee33ce619d-Screen-Shot-2019-05-10-at-11.45.49-AM.png" style="width: 141px;" class="fr-fic fr-dib"></p><p>Follow the instructions for webhooks to fire a post request to that url every time an object is updated and you should have a continuously deployed, super fast portfolio site ready to be updated.</p><p>Thanks for following along with me and I&#39;ll see you next time I decide to build something cool :)&nbsp;</p>

Building and Designing a Portfolio Site Using Gatsby JS and Cosmic

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

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

<section name="4b56"><p name="b28f">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.</p></section><section name="3b6d"><hr><h3 name="b6e0">TL;DR:&nbsp;</h3><p><a href="https://cosmicjs.com/apps/gatsby-localization-app-starter" rel="noopener noreferrer" target="_blank">Gatsby Localization Starter App</a></p><p><a href="https://github.com/cosmicjs/gatsby-localization-app-starter" rel="noopener noreferrer" target="_blank">Download the codebase</a></p><h3 name="b6e0"><br></h3><h3 name="b6e0">Before We Start</h3><p name="b3e8"><br></p><p name="a1fa"><a data-href="https://cosmicjs.com/" href="https://cosmicjs.com/" rel="noopener" target="_blank"><strong>Cosmic</strong>&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"><strong>GatsbyJS</strong></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.</p><p name="1d8a"><strong>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.</strong></p><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><p name="9b0d"><br></p><p name="a3a2"><a data-href="https://cosmicjs.com/apps" href="https://cosmicjs.com/apps" rel="noopener" target="_blank"><strong>Cosmic</strong> 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.</p></section><section name="96ad"><hr><h3 name="8749">Installing the demo (from&nbsp;source)</h3><p name="190d"><br></p><p name="da14">The project source can be found here on GitHub. After cloning the repository, you should have something that loosely resembles the following structure.</p><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><p name="8318">Also make sure you <code>npm install</code> so you have the needed repositories for running the Gatsby starter application.</p><p name="e6b0"><br></p><h4 name="60b8">Configuring the base&nbsp;project</h4><p name="1471"><br></p><p name="b5bc">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.</p><p name="a342">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:</p><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><p name="a035">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)</p><h3 name="5e8b">Running the&nbsp;demo</h3><p name="d37c"><br></p><p name="4e8d">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.</p><p name="1349">The first thing you see should resemble this:</p><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><p name="e290"><br></p><p name="966e">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.</p><p name="079e">The <code><strong>withLocale</strong></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:</p><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><p name="749f">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.</p><p name="a261"><code><strong>withLocale</strong></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>.</p></section><section name="595c"><hr><h3 name="c31a">Project structure</h3><p name="2f2c"><br></p><p name="07ef">The overall design structure of this application is minimal, loosely following the Atomic Design principles, in the sense that:</p><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><p name="945c"><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.</p><h4 name="b6e2">Why does this starter project not have any static query&nbsp;pages?</h4><p name="6310"><br></p><p name="73e4">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>.</p></section><section name="95df"><hr><h3 name="8fac">Where are the CSS&nbsp;files?</h3><figure name="cc57"><br></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"><strong>Emotion</strong></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><p name="2227"><br></p><h4 name="b2a9">Creating an styled component or usable CSS&nbsp;class</h4><p name="c39c"><br></p><p name="de6f">Emotion provides <em>two*</em> main ways of generating reusable styles for components.</p><p name="b74b">One is via <code>@motion/styled</code>, which enables you to generate elements with bound <code>className</code> attributes.</p><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><p name="1e7a">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;</p><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><p name="b076">In order for this starter application to work, a few assertions must be made.</p><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><p name="b460">So your environment should look something like this:</p><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><p name="c44b">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.</p><p name="4a11">Toggle <code>Localisation</code> to <code><strong>On</strong></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.</p><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><p><br></p><p>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>.</p></figure></section>

Create a Localized Website using Gatsby and Cosmic

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

Start building today