Search and filter products using React Hooks and a headless CMS

Build a Digital Art Marketplace Using Next.js, Cosmic, and Stripe

Creating a Developer Portfolio with Next.js and Cosmic

<p>The climb is worth it. Photo by <a href="https://unsplash.com/@z734923105?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Jerry Zhang</a> on <a href="https://unsplash.com/s/photos/mountain?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>.</p><h2>TL;DR</h2><p><a href="https://www.cosmicjs.com/extensions/contentful-importer" rel="noopener noreferrer" target="_blank">Install the Contentful Importer Extension</a><br><a href="https://github.com/cosmicjs/contentful-importer" rel="noopener noreferrer" target="_blank">View the codebase on GitHub</a></p><p>Creating a Cosmic extension was an easy and enjoyable experience. I made an extension to import data from Contentful to Cosmic in a matter of hours. My extension takes the JSON file the Contentful CLI gives you and transforms it to Cosmic data objects. It even transfers media from Contentful to Cosmic.<br><br>For an overview of how to use the extension check out the other article I wrote, <a href="https://www.cosmicjs.com/articles/importing-data-from-contentful-to-cosmic-js-k61hixlc">Importing Data from Contentful to Cosmic</a>.<br><br>When creating a Cosmic extension you have two options, making a page to be served in an iframe or a Jamstack app. After some consideration I choose a Jamstack app. It is essentially a React component and some data services. If I made a server-side extension I&rsquo;d need to worry about hosting, server maintenance, etc. In my case the only data API needed is Cosmic&rsquo;s. JavaScript&rsquo;s File API made parsing Contentful&rsquo;s JSON right in the browser very easy.<br><br>Because Cosmic provides the information you need for accessing the API as query parameters my page is very simple. It is just some text, a file input, and a button. Progress and output are piped to the React component from my services.</p><p><a href="https://www.cosmicjs.com/extensions/contentful-importer" rel="noopener noreferrer" target="_blank"><img src="https://cdn.cosmicjs.com/2fe10450-46cc-11ea-9eab-41a90745a967-Screen-Shot-2020-02-03-at-3.28.39-PM.png" style="width: 100%;" class="fr-fic fr-dib"></a></p><p><br></p><p>To get started I created a react workspace:</p><pre>$ npx create-react-app cosmic-contentful-importer</pre><p><br></p><p>Next, Cosmic offers a <a href="https://github.com/cosmicjs/extension-starter/blob/master/README.md " rel="noopener noreferrer" target="_blank">template</a> ( <a href="https://github.com/cosmicjs/extension-starter/blob/master/README.md"></a>
<a href="https://github.com/cosmicjs/extension-starter/blob/master/README.md"></a><a href="https://github.com/cosmicjs/extension-starter/blob/master/README.md">https://github.com/cosmicjs/extension-starter/blob/master/README.md</a> ) that includes an HTML file and a JSON file you need for uploading your extension to your app. Either download or clone the repo and add the files to the root of your react workspace.</p><p>Off the bat you can delete these two files:</p><pre>index.html
extension-starter.zip</pre><p><br></p><p>Next, change the extension.json file to specify the app&#39;s title, icon, logo and repository URL:</p><pre>{
  &quot;title&quot;: &quot;Contentful Importer&quot;,
  &quot;font_awesome_class&quot;: &quot;fa-download&quot;,
  &quot;image_url&quot;: &quot;https://cdn.cosmicjs.com/2d015110-41f7-11ea-93cf-dfe709ea319d-cosmic-contentful.png&quot;,
  &quot;repo_url&quot;: &quot;https://github.com/cosmicjs/contentful-importer&quot;
}</pre><p><br></p><p>Now that we&#39;re done with initial configuration we can get to coding.&nbsp;</p><p><br></p><p>We&#39;ll add 3 services in the &quot;src&quot; folder:&nbsp;</p><pre>contentful.service.js // For contentful
cosmic.service.js // For cosmic 
importer.service.js // For combining cosmic + contentful</pre><p><br></p><p>Now we&#39;ll head to index.js to create a react component to consume the services.&nbsp;</p><p>First we need a way to get the slug and keys from the URL so define this function:&nbsp;</p><pre>const getParam = param =&gt; {
  var urlParams = new URLSearchParams(window.location.search);
  return urlParams.get(param);
};</pre><p><br></p><p>Now when we define the constructor for our component we can set the state based on the params:</p><pre>constructor() {
    super();

    this.state = {
      file: null,
      slug: getParam(&quot;bucket_slug&quot;),
      read_key: getParam(&quot;read_key&quot;),
      write_key: getParam(&quot;write_key&quot;),
      errorMessage: false,
      progress: false,
      loading: false,
      messages: []
    };
}</pre><p><br></p><p>For the sake of brevity and readability we&#39;ll skip creating the render method but you can find It here (). The most important elements on the page are the file input and run button which run setFile and parseFile respectively.</p><p>When the file Input changes, it updates the state with the file:</p><pre>setFile(e) {
    const file = e.target.files[0];

    this.setState({ ...this.state, file });
}</pre><p><br></p><p>When the button is clicked the file is retrieved from state and passed to the importer service:&nbsp;</p><pre>  parseFile() {
    try {
      this.setState({
        messages: [],
        loading: true
      });

      const { file } = this.state;

      if (!file) {
        throw new Error(&quot;No file provided&quot;);
      }

      this.importerService.loadContentfulContent(
        file,
        m =&gt; this.progressCallback(m),
        e =&gt; this.errorCallback(e),
        () =&gt; this.completeCallback(),
        m =&gt; this.messageCallback(m)
      );
    } catch (e) {
      this.errorCallback(e);
    }
  }</pre><p><br></p><p>In the importer service the loadContentfulContent method uses the FileReader API to parse the JSON file then passes off the contents to another method:</p><pre>loadContentfulContent(file, onProgress, onError, onComplete, onMessage) {
    const reader = new FileReader();

    reader.readAsText(file, &#39;UTF-8&#39;);

    reader.onload = e =&gt; {
      try {
        const content = e.target.result;

        const json = JSON.parse(content);

        this._parseContent(json, onProgress, onError, onComplete, onMessage);
      } catch(e) {
        onError(e);
      }
    }
}</pre><p><br></p><p>The parseContent method will consume the Contentful and Cosmic services we created above to first format the contentful data then send it over to cosmic. Along the way it will pass progress messages to the callback methods provided to display progress
in the UI:</p><pre>  async _parseContent(content, onProgress, onError, onComplete, onMessage) {
    try{
      // Checks object properties to ensure compatibility 
      this._validateContent(content);
      
      onProgress(&#39;Content valid. Parsing...&#39;);

      // Parses contentful object types to cosmic object types 
      const fields = this.contentful.toCosmicObjectTypes(content.contentTypes);

      onProgress(&#39;Successfully parsed content types&#39;);
      
      // Creates object types in cosmic
      const cosmicObjectTypes = await this.cosmic.addObjectTypes(fields.contentTypes);

      onProgress(&#39;Successfully created content types&#39;);

      // Parses contentful media objects to cosmic media objects
      const media = await this.contentful.toCosmicMedia(content.assets, content.locales);

      onProgress(&#39;Successfully parsed media&#39;);

      onProgress(&#39;Uploading media to Cosmic...&#39;);

      const cosmicMedia = await this.cosmic.addMediaObjects(media);

      // Check for failed uploads, usually due to file sizes and alert user
      cosmicMedia.forEach(media =&gt; {
        if (media.failed) {
          onMessage(`Failed to upload image: ${media.file.metadata.title} - ${media.file.metadata.originalUrl}`);
        }
      })

      onProgress(&#39;Successfully created media&#39;);
      
      // Parse posts and other objects to cosmic objects
      const parsedObjects = this.contentful.toCosmicObjects(
        content.entries,
        content.locales,
        fields.displayFieldMap,
        fields.metafieldDescriptors,
        media
      );

      onProgress(&#39;Successfully parsed entries&#39;);

      // Create posts and other objects in cosmic
      const cosmicObjects = await this.cosmic.addObjects(parsedObjects);

      onProgress(&#39;Successfully created objects&#39;);

      onComplete();
    } catch(e) {
      onError(e);
      console.log(e);
    }
}</pre><p><br></p><p>There isn&#39;t a 1:1 conversion of Contentful objects to Cosmic objects so we need some logic in contentful.service.js to determine the correct cosmic type for an object:</p><pre>function getMetafieldType(type) {
  if (
    type === &quot;Symbol&quot; ||
    type === &quot;Boolean&quot; ||
    type === &quot;Object&quot; ||
    type === &quot;Location&quot;
  ) {
    return &quot;text&quot;;
  } else if (type === &quot;RichText&quot;) {
    return &quot;html-textarea&quot;;
  } else if (type === &quot;Text&quot;) {
    return &quot;markdown&quot;;
  } else if (type === &quot;Number&quot; || type === &quot;Integer&quot; || type === &quot;Decimal&quot;) {
    return &quot;number&quot;;
  } else if (type === &quot;Date&quot;) {
    return &quot;date&quot;;
  } else if (type === &quot;Asset&quot;) {
    return &quot;file&quot;;
  } else if (type === &quot;Link&quot;) {
    return &quot;object&quot;;
  } else if (type === &quot;Array&quot;) {
    return &quot;objects&quot;;
  }
}</pre><p><br></p><p>There is no concept of &quot;Symbol&quot;, &quot;Boolean&quot;, &quot;Object&quot; or &quot;Location&quot; (a lat/lng JSON object) in Cosmic so they will be stored as stringified versions. Both markdown and text can be stored in &quot;Text&quot; so we&#39;ll
set those to markdown to be safe. Types of Link and Array are stored as objects. The remaining field types have a close mapping as seen above.</p><p><br></p><p>Finally, to bundle the react app into a Cosmic app, we&#39;ll write a small build command and add it to &quot;scripts&quot; in package.json:</p><pre>&quot;deploy&quot;: &quot;npm run build &amp;&amp; cp extension.json build/extension.json &amp;&amp; zip -r build.zip build&quot;,</pre><p><br></p><p>I hope you enjoyed this tutorial about how to add an Extension to your Cosmic Bucket. If you have any questions. Connect with the <a href="https://www.cosmicjs.com/community" rel="noopener noreferrer" target="_blank">Cosmic community on Slack</a> and <a href="" rel="noopener noreferrer" target="_blank">on Twitter</a>.</p>

Creating the Cosmic Contentful Importer

How to Build a Restaurant Website with Next.js

Build a Non-Profit App with Next.js and Cosmic

<p>In this tutorial, I&#39;m going to show you how to create a simple Blog application using <a href="https://astro.build/">Astro</a>, and <a href="https://cosmicjs.com/">Cosmic CMS</a>. Without further ado, grab some coffee &amp; let&#39;s build a cool app!</p><h1 id="tldr">TL;DR</h1><ul><li><p><a href="https://astro-cosmic-blog.netlify.app/">Astro Cosmic Blog Demo</a></p></li><li><p><a href="https://github.com/sumitkharche/astro-cosmic-app">Download Source Code</a></p></li><li><p>&nbsp;<a data-remove-tab-index="true" data-sk="tooltip_parent" data-stringify-link="https://www.cosmicjs.com/apps/astro-cosmic-blog" href="https://www.cosmicjs.com/apps/astro-cosmic-blog" rel="noopener noreferrer" tabindex="-1" target="_blank">Install the Astro Cosmic Blog</a></p></li></ul><h1 id="prerequisites">Prerequisites</h1><p>You need to have installed the latest stable version of <a href="https://nodejs.org/">Node JS</a> and NPM. You will have no problem following the tutorial if you have a basic understanding of:</p><ul><li>HTML, CSS, and JavaScript</li><li>import and export syntax (ES6 modules)</li><li>concepts like components</li><li>the fetch API</li></ul><p>Let&#39;s get started with our technology stack.</p><h1 id="whatisastrohttpsastrobuild">What is <a href="https://astro.build/">Astro</a>?</h1><p>Astro is nothing but a yet another new Static Site Generator (SSG) which means it produces a static pages as in output. Its a new framework for building a websites. Astro give you us flexibility to use any JavaScript framework/library. The big advantage of using astro is it ships 0% Javascript by default and it will load on demand it we need it.</p><blockquote><p>Note: Astro is still an early beta state.</p></blockquote><h1 id="whataboutcosmichttpscosmicjscom">What about <a href="https://cosmicjs.com/">Cosmic</a>?</h1><p>Cosmic is a headless CMS that will enable us to build our application surprisingly quickly and deploy it to Netlifly in moments. Unlike traditional CMS, Cosmic offers us as the developers a lot of flexibility to develop this application how we please and take it to whatever hosting platform we wish. It is also very easy to store and retrieve data, which makes it perfect for building apps like this.</p><h2 id="creatingyourblogbucketincosmic">Creating Your Blog Bucket in Cosmic</h2><p>To create a blog app we will require data. To manage and manipulate this data, we will be using the power of Cosmic buckets and objects. To get started:</p><ol><li><p>Create a <a href="https://app.cosmicjs.com/signup">free account on Cosmic</a>. If this is your first time using Cosmic, you&#39;ll see a short tutorial which will introduce some of the data types we&#39;ll be using - buckets, objects, and metafields.</p></li><li><p>Create a new empty bucket &amp; name it coffee-blog. For each blog post, we will have three object types:</p></li></ol><ul><li><p>Title</p></li><li><p>Content</p></li><li><p>Image</p></li></ul><p>So, go ahead and add these properties in your buckets along with some data for those objects. <a href="https://www.cosmicjs.com/getting-started">If you&#39;re having trouble with Buckets, Objects, or Metafields, go ahead and read the Getting Started page really quickly for some startup instructions</a>, then come on back to this article.</p><p>Now we have created our Cosmic CMS and its get time to create a Astro project and integrate Cosmic CMS into it.</p><h1 id="createaastroapplication">Create a Astro application</h1><p>To create Astro project, we have to first create a folder and navigate to it.</p><pre><code>&gt; mkdir astro-cosmic-app &amp;&amp; cd astro-cosmic-app
</code></pre><p>Now run following command to install astro:</p><pre><code>&gt; npm init astro
</code></pre><p>After that select the template &quot;Starter Kit (Generic)&quot; as shown in below image:</p><p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2csgt9rnattoq5xljm96.PNG" alt="select-template" class="fr-fic fr-dii"></p><p>After that select framework you would like to use so I will select Preact but you can select whichever you want as shown below:</p><p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/9ua8ur3vlf5ox87e9gm8.PNG" alt="select-framework" class="fr-fic fr-dii"></p><p>Now wait for a minutes to finish the project creation.</p><p>After that install all the packages by running below command:</p><pre><code>&gt; npm install
</code></pre><p>To run the application execute below command:</p><pre><code>&gt; npm run dev
</code></pre><p>Now open <code><a href="http://localhost:3000/">http://localhost:3000/</a></code> and see the output:</p><p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/oog08p5zo8xyyopp0grg.PNG" alt="first-start-app" class="fr-fic fr-dii"></p><p>So open the application into VS Code editor and check folder structure:</p><p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/wsmcujpvmwa1vqh073e5.PNG" alt="first-vs-code" class="fr-fic fr-dii"></p><ul><li><p>/public : Any static assets, like images, can be placed in the public/ directory</p></li><li><p>src/components: components are reusable piece of code. You put any Astro/React/Vue/Svelte/Preact components.</p></li><li><p>src/pages : this folder contains all the pages for your website which are .md or .astro files. Each page is exposed as a route based on its file name.</p></li></ul><p>For this blog application we are using a Start Bootstarp Clean-blog template. Download the template from <a href="https://startbootstrap.com/theme/clean-blog">here</a>.</p><p>After downloading, extract the files and copy the style.css file under /css folder of template into public folder in our project.</p><p>Also copy data of /assets from template into assets folder in our project.</p><h4 id="createaenvfile">Create a .env file</h4><p>we are using .env file to stored the cosmic bucket and read key data. So install below package:</p><pre><code>npm install --D dotenv
</code></pre><p>After that create a .env file in root level of project and add update with your details:</p><pre><code>COSMIC_BUCKET_SLUG= </code>
<code>COSMIC_READ_KEY=
</code></pre><h4 id="createdifferentcomponents">Create different components</h4><ul><li>So delete all the files in components folder. First we will create a component called &#39;BlogPostPreview.astro&#39; which takes input as single post data and display it. So in components folder create a new component as &#39;BlogPostPreview.astro&#39;</li></ul><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/sumitkharche/b239bc2c01cfae04c1af5b97584850e0' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/b239bc2c01cfae04c1af5b97584850e0" class="embedly-card"></a></div><ul><li>Create another components called &quot;BaseHead.astro&quot; which contains all metadata urls, links to external css/js files.</li></ul><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/sumitkharche/d6daf74368ce28e6023158b2512326b3' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/d6daf74368ce28e6023158b2512326b3" class="embedly-card"></a></div><ul><li>Create a component called &quot;footer.astro&quot; to display the footer in all pages.</li></ul><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/sumitkharche/1cb3938a415f7b588b8ff5e2337f0586' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/1cb3938a415f7b588b8ff5e2337f0586" class="embedly-card"></a></div><ul><li>Create a component called &quot;Navigation.astro&quot; to display the footer in all pages.</li></ul><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/sumitkharche/5acc85dc7d85167dca5efdd2933270cf' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/5acc85dc7d85167dca5efdd2933270cf" class="embedly-card"></a></div><h4 id="displayallthepostsinlandingpage">Display all the posts in landing page</h4><ul><li>First we will create a folder in src called <code>lib</code> and inside that create a file called &#39;config.js&#39; which exports our env variables as belows:</li></ul><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/sumitkharche/c6eecbdd859878a4d7863a9e8bdcc8a6' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/c6eecbdd859878a4d7863a9e8bdcc8a6" class="embedly-card"></a></div><ul><li>Open a index.astro file and replace below code to display all the posts in landing page:</li></ul><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/sumitkharche/164d00b725ddf1b01a32a99d22814af8' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/164d00b725ddf1b01a32a99d22814af8" class="embedly-card"></a></div><p>Now run the application using <code>npm run dev</code> and see the output in <code>http://localhost:3000/</code>.</p><p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ltrlwkfz7bljbkuwa6vq.PNG" alt="landing-page" class="fr-fic fr-dii"></p><ul><li>Create another page inside pages folder called &quot;about.astro&quot; as below:</li></ul><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/sumitkharche/9aef0d3d6767ec84dc27bb3708b61f1e' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/9aef0d3d6767ec84dc27bb3708b61f1e" class="embedly-card"></a></div><ul><li>Click on About option in navigation bar to see the output:</li></ul><p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/kk6p013jx1d5gus9a4ax.PNG" alt="about-page" class="fr-fic fr-dii"></p><ul><li>Now we have to create a page which create separate static page for all our posts and when user clicks on single post it will display that page. To achieve that create a folder in pages called &quot;posts&quot; and inside that create a page called &quot;[slug].astro&quot; as belows:</li></ul><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/sumitkharche/fec5790bdf0185793cfe383d95247dd5' class='embedly-card'></a>"><a href="https://gist.github.com/sumitkharche/fec5790bdf0185793cfe383d95247dd5" class="embedly-card"></a></div><ul><li>Now run the app again and click on post to see the post details:</li></ul><p><img src="https://dev-to-uploads.s3.amazonaws.com/uploads/articles/ob3cmtmbvppmqsuhzuty.PNG" alt="post-details" class="fr-fic fr-dii"></p><p>To build application in production mode you just need to run</p><pre><code>&gt; npm run build
</code></pre><h1 id="deployit">Deploy it</h1><p>We can now deploy our application on any hosting platform. I recommend deploying it on <a href="https://www.netlify.com/">Netlify</a> because it supports project structures like this and can quickly create deployments. Checkout this <a href="https://docs.astro.build/guides/deploy/#netlify">article</a> to deploy Astro app into Netlify.</p><h1 id="conclusion">Conclusion</h1><p>In this article, I have demonstrated you how to create a blogging application using Astro and Cosmic. The Cosmic Community has a lot of examples on how to handle integration with email functions, download functions, and third-party platforms. If you&#39;re interested in building your own applications like this, <a href="https://app.cosmicjs.com/signup">get started by setting up your free account</a>.</p><p>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/cosmicjs">reach out to us on Twitter</a> and <a href="https://www.cosmicjs.com/community">join the conversation on Slack</a>.</p><p>You can follow me on twitter <a href="https://twitter.com/sumitkharche01">@sumitkharche01</a> or <a href="https://www.linkedin.com/in/sumit-kharche-890426a9/">LinkedIn</a></p>

How to Build a Blazing-Fast Astro Blog with Cosmic CMS

How to post to a Cosmic Bucket directly from the Drafts app

Build a Headless Ecommerce Product Filter with Angular and Cosmic

Blog

Start building today