<p dir="ltr">If you are looking into the question of what a headless CMS can offer you that a traditional, full stack, front to back CMS cannot, then there are probably a couple of things that can be assumed about you. One is that you have probably dealt with a traditional web publishing CMS like WordPress or Drupal. Also that you have some technical acumen, you are probably a developer, designer, or have an interest in a web presence. Another is that you have hit some struggle or have some pain point that has led to you to look into if a headless CMS can solve that for you. This article will point out some of the advantages that a <a href="https://cosmicjs.com/headless-cms" rel="noopener noreferrer" target="_blank">headless CMS</a> offers. Hopefully, your pain point is covered in here or it sparks an idea for a new way of thinking about what you can do with a CMS.&nbsp;</p><p data-empty="true"><br></p><h3 dir="ltr">Language Flexibility</h3><p dir="ltr">If you have dealt with a traditional CMS, there is a good chance that you have lived in the land of PHP. But maybe your shop is not a PHP shop. Maybe you are a .NET or Java shop and a client has brought a new blog project to you. Maybe you are on the cutting edge and only deal in the newest of JavaScript front end frameworks like React, Vue, or Angular. With a headless CMS, you can write in whatever language you want. As long as you can make an http request to an API, you are golden. It allows you to focus on crafting the presentation of the content that gets your message across, in a language or framework that you are most comfortable working with.&nbsp;</p><p data-empty="true"><br></p><h3 dir="ltr">Design Flexibility</h3><p dir="ltr">Most CMS systems have a few types of objects that you can choose to implement, such as Pages, Posts, or Forms. With a headless CMS, you can <a href="https://cosmicjs.com/headless-cms/content-modeling" rel="noopener noreferrer" target="_blank">create objects of different types</a> and model them however you like. It is a blank canvas for you to create your content in a way that makes sense to your use case and needs. It basically allows you to create your own wide-open API-powered database without having to know about indexes and sharding.</p><p data-empty="true"><br></p><h3 dir="ltr">CMS as a Service (CaaS)</h3><p dir="ltr">Everything is &quot;X as a service&quot; now thanks to the movement to the cloud. There are some that wear knowledge of Apache server or IIS like it is a badge of honor. They know how to bounce a server when the connections to the database start pooling up. That is fantastic, but that is not for everyone. Some don&rsquo;t want those concerns. They don&rsquo;t want to have to spend nights or weekends rebooting and updating servers when traffic is low. They only want to have to worry about the endpoint where their content lives. Having a headless CMS offloads a great deal of these infrastructure concerns. For small shops or freelancers, this can be a great weight lifted off of their shoulders when they no longer have to spend time on this.</p><p data-empty="true"><br></p><h3 dir="ltr">Debugging and Testing</h3><p dir="ltr">There can be a steep learning curve for even experienced developers when developing for a traditional CMS. The inherent decoupling that a headless CMS offers allows you to use tools such as Postman or curl to test your endpoints. This can be especially useful when &nbsp;chasing down pesky bugs by allowing you to easily determine if your problem is before your request for the content, what you are requesting, or what you are doing with the data you receive from the CMS. This also allows you to build out a full test suite where you can mock your data that would be returned from the CMS.</p><p data-empty="true"><br></p><h3 dir="ltr">Futureproofing</h3><p dir="ltr">Most reliable API products take great care to version their API and not introduce breaking changes. They know that one thing that gives them an advantage is that they are more available and reliable than other solutions. They may introduce other features, but they leave it up to you if you want to implement them or you can just leave things working as they currently are. No forced updates, no library versioning hell. You are not going to have to worry if you have the right version of some obscure package installed on your server in order for your application to run properly. Also, migration to another server or horizontal scaling is as easy as just spinning your application up on another server. You don&rsquo;t have to worry about what tables in some arcane database have references to your original server. You don&rsquo;t have to have any tools to go through and update those to your new server, hoping than none of your data gets corrupted in the process as things are overwritten.</p><p data-empty="true"><br></p><p dir="ltr">These are just a few of the aspects that a <a href="https://cosmicjs.com" rel="noopener noreferrer" target="_blank">headless CMS such as Cosmic</a> can offer to developers over more traditional CMS systems. Hopefully, one or more of these struck on a problem that you have been having or sparked some imagination of something new that you now envision creating.&nbsp;</p><p dir="ltr"><a href="https://cosmicjs.com/jintrocaso" rel="noopener noreferrer" target="_blank">Jamie Introcaso</a> is a Full-Stack Developer in the <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">Cosmic Community</a>. Read about Jamie&#39;s migration from WordPress to the Cosmic Headless CMS <a href="https://cosmicjs.com/articles/moving-from-wordpress-to-limitless-opportunity-using-cosmic-js-jx2ei3kz" rel="noopener noreferrer" target="_blank">here</a>. If you have any comments or questions about building apps with <a href="https://cosmicjs.com" rel="noopener noreferrer" target="_blank">Cosmic</a>, 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><p dir="ltr">Photo by <a href="https://unsplash.com/@joelfilip?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Joel Filipe</a> on <a href="https://unsplash.com/search/photos/grid?utm_source=unsplash&utm_medium=referral&utm_content=creditCopyText">Unsplash</a></p>

5 Advantages to Using a Headless CMS

<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 data-empty="true">This article will walk you through creating a marketing landing page using <a href="https://www.cosmicjs.com">Cosmic</a> and <a href="https://angular.io/" rel="noopener noreferrer">Angular</a>. This landing page allows for an organization to collect contact information in exchange for some &quot;gated&quot; materials. You may have seen something like this used to distribute white papers, exclusive wallpapers or images, ebooks, or even new music. We will be building out the Cosmic Bucket structure and then show how you can set up a simple Angular application to hook into the Bucket and start gathering those leads for your sales team to grow the business. I say &ldquo;simple&rdquo; not to say that it is something self-evident, but that it covers the basics and serves as a starting point for you to expand upon.</p><h2 dir="ltr">TL;DR<a rel="noopener noreferrer" href="https://github.com/cosmicjs/angular-marketing-landing-page"></a></h2><p><a href="https://github.com/cosmicjs/angular-marketing-landing-page" rel="noopener noreferrer">Link to Code</a> <a rel="noopener noreferrer" href="http://cosmic-landing-page.jamieintrocaso.com"></a> <a rel="noopener noreferrer" href="https://www.cosmicjs.com/apps/angular-marketing-landing-page"></a><br><a href="https://www.cosmicjs.com/apps/angular-marketing-landing-page" rel="noopener noreferrer">Link To Demo</a></p><h2 dir="ltr">Setting up the Bucket</h2><p dir="ltr">Our Bucket will only consist of a few Objects to accomplish our goals. These Objects will be a Campaign Object to store information about our marketing campaign, a Contact Object to store information of visitors to our page who sign up, and a Materials Object to store the files we will be offering to those who sign up on the page.<br><br>First we start with the campaign Object which will consist of the following Metafields:</p><ul><li dir="ltr"><p dir="ltr">Headline: text area</p></li><li dir="ltr"><p dir="ltr">Thank You Message: text area</p></li><li dir="ltr"><p dir="ltr">Hero Image: File/Image</p></li><li dir="ltr"><p dir="ltr">Sign Up List: One to Many Object Relationship</p></li><li dir="ltr"><p dir="ltr">Campaign Materials: One to Many Object Relationship</p></li></ul><p dir="ltr"><br>We will mark the Headline, Thank You Message, and Hero Image fields as required to ensure that we have the data needed to display on the site.</p><div style="display: block; text-align:center;"><img alt="Check out the simple interface Cosmic's Headless CMS provides you for building out this page" class="fr-fic fr-dib" style="width: 100%;" src="https://cdn.cosmicjs.com/9b1d1c30-08d3-11eb-9dca-1f61b4b5e858-angular-cosmic-model.png"></div><p dir="ltr"><br></p><p dir="ltr">Next we will create the Contact Object. This will hold the data we are going to ask the visitors to the site to submit. For our example, we are only going to create the following Metafields:</p><ul><li dir="ltr"><p dir="ltr">First Name: text area</p></li><li dir="ltr"><p dir="ltr">Last Name: text area</p></li><li dir="ltr"><p dir="ltr">Email Address: text area</p></li></ul><div style="display: block; text-align:center;"><img alt="Here we'll add a few more metafields to make sure our landing page collects all the information marketing team members may need." class="fr-fic fr-dib" style="width: 100%;" src="https://cdn.cosmicjs.com/c096ebd0-08d3-11eb-9dca-1f61b4b5e858-angular-cosmic-contact-model.png"></div><p dir="ltr"><br>We will be marking all of these as required as well. The Sign Up List Metafield we set up in the Campaign Object will be a collection of these Objects. Next, we will create a Material Object to hold the files that we are going to be delivering in our application. This Object will only have a File/Image Metafield to hold the file. The Campaign Materials Metafield in the Campaign Object will be a collection of these Objects.<br><br>We will also need to create an Object to hold the contacts that we are gathering from the landing page. We will use the contact Object for that. Ours will only hold first name, last name, and email address for now. Cosmic gives us the tools to create some constraints on these fields. We are going to mark these as required and use that in our front end application later.<br><br>Finally, we will need an Object to hold the files that we are going to distribute after a visitor submits their information. We can use the file Object in Cosmic to store this file so we can download it from the application.</p><h2 dir="ltr">Setting up the Application</h2><p dir="ltr">We will be using the Angular framework to handle our presentation and interaction with visitors to our page. This application assumes that you have some familiarity with Angular, but you do not need a deep understanding of the ins-and-outs of the framework.
Also, since we are keeping this a bare bones example, we won&#39;t be using some of the more complex offerings of the framework.</p><p dir="ltr">Our application is basically going to have three different presentations to the user:</p><p dir="ltr">1. The first is the initial landing page to introduce our product, offering, and campaign to the user visiting our page.</p><p dir="ltr"><img alt="A first glance at our completed marketing landing page" class="fr-fic fr-dib" style="width: 100%;" data-name="angular-cms.png" src="https://imgix.cosmicjs.com/c628f430-08ce-11eb-9dca-1f61b4b5e858-angular-cms.png"></p><p dir="ltr"><br></p><p dir="ltr">2. Next, we will need to have a component to present the form to collect the visitor&#39;s information.</p><p dir="ltr"><img alt="Our example form with those metafields we entered on the Cosmic CMS a few steps earlier" class="fr-fic fr-dib" style="width: 100%;" src="https://cdn.cosmicjs.com/f66814f0-08d3-11eb-9dca-1f61b4b5e858-angular-cosmic-form.png"></p><p dir="ltr">3. And finally, we will need to distribute the content and communicate that to our visitors and thank them for signing up.</p><p dir="ltr"><img alt="Say thanks with angular on a simple thank you page!" class="fr-fic fr-dib" style="width: 100%;" src="https://cdn.cosmicjs.com/29165330-08d4-11eb-9dca-1f61b4b5e858-angular-cosmic-thank-you.png">&nbsp;</p><p dir="ltr">We are going to start by creating a landing page component that will hold our three presentations that we will show and hide as the user travels through the application flow. We will also create a service to interact with our Cosmic Bucket. The last supporting
piece we will need is going to be a config file to hold some data for us such as our Bucket slug and read and write keys.</p><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JIntrocaso/bb7fb412136e4661043b722b8a0ab436' class='embedly-card'></a>" style="height: 1025px;"><a href="https://gist.github.com/JIntrocaso/bb7fb412136e4661043b722b8a0ab436" class="embedly-card"></a></div><div style="display: block;">The first of our three presentation components will be our welcome page. This page will be the first page that our visitors will see and will communicate information about the campaign. We will also include a hero image that we saw when we set up our
Campaign Object. We will also have a button in this component that when clicked will show the fields to allow the visitor to enter in the data to sign up.</div><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JIntrocaso/8a4e520500d4e6c27c07c62c1ee64291' class='embedly-card'></a>" style="height: 739px;"><a href="https://gist.github.com/JIntrocaso/8a4e520500d4e6c27c07c62c1ee64291" class="embedly-card"></a></div><div style="display: block;">Next we will need to create a component to display our form for taking in the information from our visitors. We will want to set this up so that we will be able to take a wide range of types of input from the users. We will also use our metadata to create
some validation rules for our fields. Here we are going to use the required property on the Metafield to add that validation to the form field in the UI.</div><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JIntrocaso/857ac5cbda1f34d0ca1afdd948f2a455' class='embedly-card'></a>" style="height: 673px;"><a href="https://gist.github.com/JIntrocaso/857ac5cbda1f34d0ca1afdd948f2a455" class="embedly-card"></a></div><p dir="ltr">On the button click, we will use the data from our form to save a new contact in our Bucket via our Campaign service. Once we have the id from the Contact Object, we can then add it to the list of contacts that already exist for our campaign and update
that in our Campaign Object creating the relationship between the Campaign and the Contact. We are also going to create a service to convert the fields for the sign up form to form controls for a reactive form in our UI.</p><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JIntrocaso/718f11a701c7901e9bc326ec5a6969b8' class='embedly-card'></a>" style="height: 524px;"><a href="https://gist.github.com/JIntrocaso/718f11a701c7901e9bc326ec5a6969b8" class="embedly-card"></a></div><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JIntrocaso/77ba0cb8fa369bbea3cf39d968a48dfc' class='embedly-card'></a>" style="height: 612px;"><a href="https://gist.github.com/JIntrocaso/77ba0cb8fa369bbea3cf39d968a48dfc" class="embedly-card"></a></div><p dir="ltr">Now that we have obtained the data from the user and saved that to our Signup List in our Campaign Object, we need to deliver our files to the user by downloading them to the user&#39;s machine. We will create this component which the application owner
will be able to communicate any last words to the visitor to thank them for signing up. We will also use the OnInit() function of the component to trigger the downloads of the files in the Campaign Materials Metafield of the Campaign Object.</p><div class="fr-embedly " data-original-embed="<a href='https://gist.github.com/JIntrocaso/5cb1e8eed27c49ba638389e28550f37c' class='embedly-card'></a>" style="height: 326px;"><a href="https://gist.github.com/JIntrocaso/5cb1e8eed27c49ba638389e28550f37c" class="embedly-card"></a></div><p dir="ltr">And just like that, we have everything we need to stand up a marketing landing page website that will allow users to sign up in exchange for some materials that your marketing team needs to get into the hands of potential customers! As I said in the beginning of the article this is just one approach that I took to achieve this goal. You may find a totally different way to set up your Bucket and Objects and that is the beauty of what Cosmic offers: flexibility. Thanks for reading and learning more about different things you can do with Cosmic. Feel free to follow me on <a href="https://twitter.com/JLIntro">Twitter</a>, <a href="https://www.linkedin.com/in/jamieintrocaso/">LinkedIn</a>, <a href="https://github.com/JIntrocaso">GitHub</a>, or at my <a href="http://jamieintrocaso.com">blog</a>.</p><p dir="ltr">Images from <a href="https://unsplash.com" rel="noopener noreferrer">Unsplash</a>.</p>

Blogs by Jamie Introcaso

Start building today

Blogs by Jamie Introcaso

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

Start building today