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>.<h2>TL;DR</h2><a href="https://www.cosmicjs.com/extensions/contentful-importer" rel="noopener noreferrer" target="_blank">Install the Contentful Importer Extension</a> <a href="https://github.com/cosmicjs/contentful-importer" rel="noopener noreferrer" target="_blank">View the codebase on GitHub</a>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. 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>. 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. 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.<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> To get started I created a react workspace:<pre>$ npx create-react-app cosmic-contentful-importer</pre> 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.Off the bat you can delete these two files:<pre>index.html
extension-starter.zip</pre> Next, change the extension.json file to specify the app&#39;s title, icon, logo and repository URL:<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> Now that we&#39;re done with initial configuration we can get to coding.&nbsp; We&#39;ll add 3 services in the &quot;src&quot; folder:&nbsp;<pre>contentful.service.js // For contentful
cosmic.service.js // For cosmic 
importer.service.js // For combining cosmic + contentful</pre> Now we&#39;ll head to index.js to create a react component to consume the services.&nbsp;First we need a way to get the slug and keys from the URL so define this function:&nbsp;<pre>const getParam = param =&gt; {
 var urlParams = new URLSearchParams(window.location.search);
 return urlParams.get(param);
};</pre> Now when we define the constructor for our component we can set the state based on the params:<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> 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.When the file Input changes, it updates the state with the file:<pre>setFile(e) {
 const file = e.target.files[0];

 this.setState({ ...this.state, file });
}</pre> When the button is clicked the file is retrieved from state and passed to the importer service:&nbsp;<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> In the importer service the loadContentfulContent method uses the FileReader API to parse the JSON file then passes off the contents to another method:<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> 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:<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> 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:<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> 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. 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:<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> 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>.

Creating the Cosmic Contentful Importer

Greener pastures await. Photo by <a href="https://unsplash.com/@kalenemsley?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Kalen Emsley</a> on <a href="https://unsplash.com/s/photos/mountain?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a>.Using the <a href="https://www.cosmicjs.com/extensions/contentful-importer" rel="noopener noreferrer" target="_blank">Cosmic Contentful Importer</a> to transfer your data from Contentful is extremely easy and only takes a few minutes! For a walkthrough of how I built the Contentful Importer check out my other article, <a href="https://www.cosmicjs.com/articles/creating-the-cosmic-js-contentful-importer-k5qwyunz" rel="noopener noreferrer" target="_blank">Creating the Cosmic Contentful Importer</a>.First head to <span data-orgid="854767568389640192" data-room-id="room_bed0e40749b24a42e2890fff519f50f4" data-story-id="story_21bffee4e625c2e8ced54b2ffba27e60" data-text="<https://www.cosmicjs.com/extensions/contentful-importer>" data-timestamp="1580160724246" data-userid="854767567794049024"><a href="https://www.cosmicjs.com/extensions/contentful-importer" rel="noopener noreferrer" target="_blank">Contentful Importer Extension</a> and click the &quot;Select Extension&quot; button:<img src="https://cdn.cosmicjs.com/809d7bc0-4448-11ea-8591-67efe620f8ec-Screen-Shot-2020-01-31-at-10.41.00-AM.png" style="width: 250px;" class="fr-fic fr-dib"> From there select the bucket you would like to add the extension to.&nbsp;After selecting the bucket you will see the Contentful Importer extension in the left sidebar:<img src="https://cdn.cosmicjs.com/187825d0-4449-11ea-8591-67efe620f8ec-Screen-Shot-2020-01-31-at-10.45.15-AM.png" class="fr-fic fr-dib" style="width: 250px;"> Now to export your data from Contentful! The first thing you&#39;ll need to do is export data using the contentful-cli. Contentful has a full walkthrough on installing the CLI <a href="https://www.contentful.com/developers/docs/tutorials/cli/installation/">here</a> and <a href="https://www.contentful.com/developers/docs/tutorials/cli/authentication/">here</a>, and a walkthrough on exporting your data <a href="https://www.contentful.com/developers/docs/tutorials/cli/import-and-export/">here</a>.&nbsp;To install the contentful cli you can use homebrew, NPM or yarn:<pre># homebrew
brew install contentful-cli

# npm
npm install -g contentful-cli

#yarn
yarn global add contentful-cli</pre> Next you&#39;ll need to authenticate the CLI app with your account:<pre>$ contentful login</pre> After opening your browser you&#39;ll be prompted to login to Contentful then you&#39;ll be provided with a token:<img src="https://cdn.cosmicjs.com/9e6c9900-4449-11ea-8591-67efe620f8ec-contentful-key.png" style="width: 586px;" class="fr-fic fr-dib"> Finally, copy the token and paste it into the contentful login prompt in your console.&nbsp; Now you can generate the Contentful export:&nbsp;<pre>$ contentful space export --space-id=[Your space ID] </pre> The export tool will run and produce a JSON file.&nbsp; Go back to your space and upload the JSON file in the Contentful Importer extension page and click &quot;Run import&quot;:<img src="https://cdn.cosmicjs.com/1caa4be0-444b-11ea-8591-67efe620f8ec-cosmic-contentful-screen.png" style="width: 100%;" class="fr-fic fr-dib"> Congratulations! You&#39;ve successfully migrated your data from Contentful to Cosmic!

Blogs by Kevin Diem

Start building today

Blogs by Kevin Diem

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

Start building today