<p>In this tutorial, Cosmic co-founder <a href="https://cosmicjs.com/tony" rel="noopener noreferrer" target="_blank">Tony Spiro</a> takes you on a tour of <a href="https://cosmicjs.com/docs/webhooks" rel="noopener noreferrer" target="_blank">Cosmic Webhooks</a>. Learn how webhooks work, see how to easily create integrations with Slack, auto-deploy websites to Netlify, and get an intro to Cosmic Functions. Thanks to everyone who attended our live Webhooks Webinar this week, but if you missed it, check out the video and be sure to attend our next one. 🚀</p><p><br></p><h3>Webinar Recap: The Power of Webhook Automation&nbsp;</h3><p><span class="fr-video fr-fvc fr-dvb fr-draggable" contenteditable="false" draggable="true"><iframe width="640" height="360" src="https://www.youtube.com/embed/0ikB09e2GHA?wmode=opaque" frameborder="0" allowfullscreen=""></iframe></span><br></p><p><a href="https://cosmicjs.com/tony" rel="noopener noreferrer" target="_blank">Tony Spiro</a> introduces workflows users can create with Cosmic <a href="https://cosmicjs.com/docs/webhooks" rel="noopener noreferrer" target="_blank">Webhooks</a>, <a href="https://cosmicjs.com/integrations" rel="noopener noreferrer" target="_blank">Integrations</a> and <a href="https://cosmicjs.com/docs/functions" rel="noopener noreferrer" target="_blank">Functions</a>. Whether it&#39;s integrating with Slack to notify your team of content edits, auto-deploying websites to Netlify that are automatically rebuilt upon content edits or starting to experiment with Functions, Cosmic provides integrations that helps teams of developers and marketers build apps faster, together.&nbsp;</p><p><br></p><h3>Conclusion</h3><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>

Webinar Recap: The Power of Webhook Automation

<p><a href="https://zapier.com/" rel="noopener noreferrer" target="_blank">Zapier</a> gives people internet superpowers by allowing them to connect and automate the apps they use. Using Zapier to connect your Cosmic-powered content with third-party apps is easy and requires zero coding. I&rsquo;m going to demonstrate how to get started integrating your Cosmic-powered content with your favorite third-party applications using Zapier. Let&#39;s get started.</p><p><br></p><p><a href="https://zapier.com/app/login?next=/platform/public-invite/5784/d94417b158f78245932516dc472dbfbe/" rel="noopener noreferrer" target="_blank"><strong>Click here to connect Cosmic to Your Favorite Apps using Zapier &raquo;</strong></a></p><h3><br></h3><h3>Select a Trigger App</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/d83d7230-c0fb-11e8-860e-21bfa9e630af-ice_screenshot_20180925-144716.png" style="width: 100%;" class="fr-fic fr-dib"></p><h3><br></h3><h3>Select Your Trigger Account</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/1c896ca0-c0fc-11e8-96ea-b52342e17887-ice_screenshot_20180925-144840.png" style="width: 100%;" class="fr-fic fr-dib"></p><h3><br></h3><h3>Select Your Trigger</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/7a0ce060-c295-11e8-b3a9-355c4a096f37-ice_screenshot_20180927-153919.png" style="width: 100%;" class="fr-fic fr-dib"></p><h3><br></h3><h3>Select an Action App</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/df27e6d0-c334-11e8-aeb8-498e7e54d178-1*VLH7Jp94IK1cHa_JDydIvw.png" style="width: 100%;" class="fr-fic fr-dib"></p><h3><br></h3><p>Once your Cosmic Bucket is connected you can simply select the Action App, workflow and account information. You can pull through Sample Data from Cosmic or any other Trigger app to test communicating with your favorite API services.&nbsp;</p><p>&nbsp;</p><p><strong><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/1724ad10-c336-11e8-9b91-ff4008d8d868-6f323ca0-9bfb-11e8-b537-ef194154deda-1*TRRW9Wp_ZqD8MJ5gS_7c5w.gif" style="width: 100%;" class="fr-fic fr-dib"></strong></p><p><br></p><p><strong>Notes</strong>: Using the Zapier integration, you can set up workflows that originate in a third-party app and write to Cosmic, rather than the workflow originally starting in Cosmic (<a href="https://cosmicjs.com/articles/integrating-typeform-data-into-cosmic-js-jmjmkoyz" rel="noopener noreferrer" target="_blank">see an example</a>). While Cosmic triggers support Zapier&rsquo;s instant feature, several other integrations still use polling methods, which means Zapier will delay the firing of these events depending on your plan. For free Zapier accounts, this delay is typically 15 minutes. For free accounts, Zapier limits the amount of Items in a Zap to only 2, with a maximum of 5 Zaps registered to an account. To implement a filter within your Zap you will need to upgrade from a free account to a paid one. To learn more about Zapier Filters and extending your Zaps, <a href="https://zapier.com/help/filter/" rel="noopener noreferrer" target="_blank">click here</a>.&nbsp;</p><p><br></p><h3>Conclusion&nbsp;</h3><p>The moment you connect your Cosmic account to Zapier, you can more easily integrate your content into the web application of your choice. Automate workflows with Google Sheets, Google Calendar, Hubspot, <a href="https://www.typeform.com" rel="noopener noreferrer" target="_blank">Typeform</a>, Salesforce and your other favorite apps in a few simple clicks. To view more Integrations, <a href="https://cosmicjs.com/integrations" rel="noopener noreferrer" target="_blank">click here</a>.&nbsp;</p><p>If you have any comments or questions about Cosmic Integrations, <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>

Integrating Cosmic-powered Content with Your Favorite Apps using Zapier

<p><a href="https://www.hubspot.com" rel="noopener noreferrer" target="_blank">Hubspot</a> is an inbound marketing and sales platform that helps companies attract visitors, convert leads, and close customers. <a href="https://zapier.com/" rel="noopener noreferrer" target="_blank">Zapier</a> gives people internet superpowers by allowing them to connect and automate the apps they use. Using Zapier to connect your Cosmic-powered content with Hubspot is easy and requires zero coding. In this article I&rsquo;m going demonstrate how to add new form submissions to Hubspot when you Publish Objects in your Cosmic Bucket.&nbsp;</p><p><a href="https://zapier.com/app/login?next=/platform/public-invite/5784/d94417b158f78245932516dc472dbfbe/" rel="noopener noreferrer" target="_blank"><strong>Click here to connect Cosmic to Hubspot using Zapier &raquo;</strong></a></p><p><br></p><h3>Select a Trigger App: Cosmic</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/d83d7230-c0fb-11e8-860e-21bfa9e630af-ice_screenshot_20180925-144716.png" style="width: 100%;" class="fr-fic fr-dib"></p><h3><br></h3><h3>Select Your Trigger Account</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/1c896ca0-c0fc-11e8-96ea-b52342e17887-ice_screenshot_20180925-144840.png" style="width: 100%;" class="fr-fic fr-dib"></p><h3><br></h3><h3>Select Your Trigger</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/7a0ce060-c295-11e8-b3a9-355c4a096f37-ice_screenshot_20180927-153919.png" style="width: 100%;" class="fr-fic fr-dib"></p><h3><br></h3><h3>Select an Action App: Hubspot</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/b2124a70-c29c-11e8-b3a9-355c4a096f37-ice_screenshot_20180927-163111.png" style="width: 100%;" class="fr-fic fr-dib"></p><h3><br></h3><h3>Select Hubspot Action</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/b40c70f0-c295-11e8-aeb8-498e7e54d178-ice_screenshot_20180927-145427.png" style="width: 100%;" class="fr-fic fr-dib"></p><h3><br></h3><h3>Select Your Hubspot Account</h3><h3><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/c3e41320-c295-11e8-b3a9-355c4a096f37-ice_screenshot_20180927-145554.png" style="width: 100%;" class="fr-fic fr-dib"></h3><h3><br></h3><p><br></p><h3>Testing</h3><p>I set up a test to pull through New Published Objects in my Bucket to add a form in my Hubspot Dashboard: for this example the published Objects are populating a new form submission with an email address and photo attachment.&nbsp;</p><p><br></p><h3>Zapier Test</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/29d99720-c29d-11e8-aeb8-498e7e54d178-ice_screenshot_20180927-163432.png" style="width: 100%;" class="fr-fic fr-dib"></p><h3><br></h3><h3>Hubspot Test</h3><p><strong>Hubspot Dashboard View</strong></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/419a37c0-c29d-11e8-801e-a73ac6baaa87-ice_screenshot_20180927-152937.png" style="width: 100%;" class="fr-fic fr-dib"></p><p><strong>Hubspot Email Notification</strong>&nbsp;</p><p><br></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/a5ad2b00-c2a2-11e8-aeb8-498e7e54d178-ice_screenshot_20180927-163608.png" style="width: 678px;" class="fr-fic fr-dib"></p><p>Your zap is now ready to be turned on and enjoyed! Now every time I publish a new Object in my Bucket, a new form submission will be submitted in Hubspot, ready for even faster team collaboration.&nbsp;</p><h3><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/98e8fca0-c29d-11e8-aeb8-498e7e54d178-ice_screenshot_20180927-163742.png" style="width: 100%;" class="fr-fic fr-dib"></h3><h3><br></h3><h3>Conclusion&nbsp;</h3><p>It&#39;s easy to automate workflows with your favorite apps using the <a href="https://zapier.com/platform/public-invite/5784/d94417b158f78245932516dc472dbfbe/" rel="noopener noreferrer" target="_blank">Cosmic Zapier Integration</a>. By starting your content in an API, you&#39;re ensuring ultimate portability and scalability of your content, workflows and processes.&nbsp;</p><p>If you have any comments or questions about integrating your Cosmic Objects into workflows with other apps using Zapier, <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>

Integrating Cosmic-powered Content with Hubspot

<p data-default-tab="js,result" data-height="396" data-pen-title="MPWrvr" data-slug-hash="MPWrvr" data-theme-id="0" data-user="Gurmeet142">In this tutorial, I&rsquo;m going to show you how to build a blog powered by Angular and hosted on the Cosmic App Server.</p><h2>TL;DR</h2><p><a href="https://github.com/cosmicjs/angular-blog" rel="noopener noreferrer" target="_blank">Download the GitHub repo</a><a href="https://github.com/Dev0515/Cosmo-Angular" rel="noopener noreferrer" target="_blank">.</a><br><a href="https://cosmicjs.com/apps/angular-blog" rel="noopener noreferrer" target="_blank">Check out the demo</a>.</p><h2>Prerequisites</h2><p>You&rsquo;ll need the node JS, npm and Angular cli pre-installed. Make sure you already have them before you start. You can refer to <a href="https://angular.io/guide/quickstart">Angular docs</a> on how to do this.</p><h2>Getting Started</h2><p>Here we are going to create the Angular project. We&rsquo;ll use ng cli to do it. So once you&rsquo;ll have all prerequisites installed, you&rsquo;ll need to setup the new Angular project:</p><p><code>ng new cosmic-angular</code></p><p>It will install the Angular app on your system with the name&nbsp;&ldquo;cosmic-angular&rdquo;. Now run the following commands:</p><p><code>cd cosmic-angular<br>ng serve --open</code></p><p>It will run your app on the browser on default port 4200 i.e. <a href="http://localhost:4200/"></a><a href="http://localhost:4200/">http://localhost:4200/</a></p><h2>Setting things up with Cosmic</h2><p>Start by creating the bucket and remember the bucket name:</p><p>Then create a new object type named &lsquo;blogs&rsquo; and please remember the object type slug (&rsquo;blogs&rsquo;). It will store all the blogs published. Now create a new object name &lsquo;registeruser&rsquo;, which will store the information about new users and we will also use it for logging in purpose.</p><p>You&#39;ll also need to create the Bucket write key. It&#39;s necessary to allow users upload blogs and create accounts. Open Settings page and click &#39;Generate new key&#39; on API Write Access Key then copy generated key and save the changes.</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/1ca843f0-c228-11e8-b221-e37a82f35b47-Screenshot%20from%202018-09-26%2013-37-49.png" class="fr-fic fr-dii"></p><h2>Angular Configuration</h2><p>Create file: src/config/cosmo.config.ts to match the following:</p><div class="fr-embedly     " data-original-embed="<a href='https://gist.github.com/Dev0515/f5f6456358b8e74a2df066f13ce6300a#file-cosmo-config-ts' class='embedly-card'></a>"><a href="https://gist.github.com/Dev0515/f5f6456358b8e74a2df066f13ce6300a#file-cosmo-config-ts" class="embedly-card"></a></div><p>Keep in mind that, components, services, models and configuration files should be in different folders so that they can be differentiated easily.</p><h2>Cosmic Service for Angular</h2><p>We&#39;re planning to use Cosmic Objects in more than one Angular component. In such case makes sense to create a dedicated service and store all Cosmic related things such as bucket name, write key, etc in a single place. Let&#39;s create src/app/services/cosmic.service.ts with the following contents:</p><div class="fr-embedly     " data-original-embed="<a href='https://gist.github.com/Dev0515/f72a7a5bef0e6cd84f1600bd062bd901#file-cosmic-service-ts' class='embedly-card'></a>"><a href="https://gist.github.com/Dev0515/f72a7a5bef0e6cd84f1600bd062bd901#file-cosmic-service-ts" class="embedly-card"></a></div><p>This service has many methods, we are explaining them:</p><ul><li>getUser(): It is used to get details of a registered user</li><li>addUser(): To register the new user</li><li>addBlog(): To save blog to Cosmic server</li><li>showAllBlogs(): To fetch all blogs saved on server</li><li>showBlogs(): Fetch blogs of logged in user</li><li>singlePostHome(): To show single selected blog</li><li>login(): Used to log user in</li></ul><h2>Cosmic Model for Angular</h2><p>Create a model under src/app/models/cosmic.model.ts with content:</p><div class="fr-embedly     " data-original-embed="<a href='https://gist.github.com/Dev0515/eefcc4030cbc00abb9b59dbad9df8f5e#file-cosmic-model-ts' class='embedly-card'></a>"><a href="https://gist.github.com/Dev0515/eefcc4030cbc00abb9b59dbad9df8f5e#file-cosmic-model-ts" class="embedly-card"></a></div><p>Here we declared two classes for registering user and for saving blogs on server.</p><h2>View All Blogs Component</h2><p>Create src/app/components/allblogs/allblogs.component.ts file with the following content:</p><div class="fr-embedly     " data-original-embed="<a href='https://gist.github.com/Dev0515/01332f41e9aac1391a7398c921a18dfa#file-allblogs-component-ts' class='embedly-card'></a>"><a href="https://gist.github.com/Dev0515/01332f41e9aac1391a7398c921a18dfa#file-allblogs-component-ts" class="embedly-card"></a></div><p>Here we imported the cosmic service to hit the API of Cosmic server. The main function showAllBlogs() is fetching complete data from server stored under the object &lsquo;blogs&rsquo;.</p><h2>Dashboard Component in Angular</h2><p>Create dashboard component in component section for logged in users. Here make some navigation for user to add blog, view his own posts, view all posts and for logout too. path of this component will be: src/app/components/dashboard/dashboard.component.ts, and content will be:</p><div class="fr-embedly     " data-original-embed="<a href='https://gist.github.com/Dev0515/d65162de7eb1b8404e21129e53036e31#file-dashboard-component-ts' class='embedly-card'></a>"><a href="https://gist.github.com/Dev0515/d65162de7eb1b8404e21129e53036e31#file-dashboard-component-ts" class="embedly-card"></a></div><p>In this component we made some navigation Add Blog, My Blogs, All Blogs, Logout with functions addNewBlog(), viewBlogs(), viewAllBlogs() and logout() respectively.&nbsp;</p><h2>Showing Single Blog&nbsp;</h2><p>Create a new component to show the selected single post to user with name usersinglepost.component.ts. The code is:&nbsp;</p><div class="fr-embedly     " data-original-embed="<a href='https://gist.github.com/Dev0515/571e358107372a86043afd47324517bb#file-usersinglepost-component-ts' class='embedly-card'></a>"><a href="https://gist.github.com/Dev0515/571e358107372a86043afd47324517bb#file-usersinglepost-component-ts" class="embedly-card"></a></div><p>Here we created a method post() which is fetching one blog from the server according to blog_id provided to it.</p><h2>User Registration - An Angular Part</h2><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/9e436f20-c228-11e8-bbad-bb8b19df5f76-Screenshot%20from%202018-09-20%2016-23-54.png" class="fr-fic fr-dii"></p><p>This is the main part in which you will have to make a register component to register the user, and also it should check the duplicate user at the same time. Path is: src/app/components/register/register.component.ts. The content is:</p><div class="fr-embedly     " data-original-embed="<a href='https://gist.github.com/Dev0515/a8cb7e6ebfa3f7774eb879bde77c8839#file-register-component-ts' class='embedly-card'></a>"><a href="https://gist.github.com/Dev0515/a8cb7e6ebfa3f7774eb879bde77c8839#file-register-component-ts" class="embedly-card"></a></div><p>Here is the main function named register(), which is registering the new user. In which firstly we are checking for duplicate user, and if username already exists it will show a message otherwise it will create new account and navigate to login page.&nbsp;</p><h2>Logging User In</h2><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/bc4837d0-c228-11e8-8563-5b3b852ee4ac-Screenshot%20from%202018-09-26%2015-37-40.png" class="fr-fic fr-dii"></p><p>In this component, we will log the user in by matching provided user details in registeruser object available on server. The content of login.component.ts is:</p><div class="fr-embedly     " data-original-embed="<a href='https://gist.github.com/Dev0515/3a20a7fd548855812e8776208c28809c#file-login-component-ts' class='embedly-card'></a>"><a href="https://gist.github.com/Dev0515/3a20a7fd548855812e8776208c28809c#file-login-component-ts" class="embedly-card"></a></div><p>In login() function we are calling the cosmic server and login() function present there. It is matching the records on cosmic server and saving the user details on local storage to keep the user login.&nbsp;</p><h2>Exactly What&rsquo;s Happening Here?</h2><p>On this blog, at home page you will get all blogs from all users. And you can read one single blog by clicking Read More button. Here you can register a new account and after successful register you can login. Since we are using Cosmic server as back-end so everything is stored on this server.&nbsp;</p><p>After login, you will be navigate to dashboard on which you can publish a blog, read your own blogs, check all blogs from all users and finally you can logout .</p><p>Now you can run complete project on localhost.</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/d15e03c0-c228-11e8-8cd9-2fa167d223d5-Screenshot%20from%202018-09-26%2016-02-47.png" class="fr-fic fr-dii"></p><h2>Content Modeling</h2><p>You should create different object types for different types of data. In our case, we created an object type names blogs and second registerusers. Blogs with contain all blogs published on our blog and register user will store data of users registered. <strong>Later we will add another object type named posts and photos</strong>, which will contain all posts published under some blogs and media uploaded for each blog or post respectively.&nbsp;</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/ed0cf590-c228-11e8-b221-e37a82f35b47-Screenshot%20from%202018-09-26%2015-45-34.png" class="fr-fic fr-dii"></p><p><br></p><p>Above screenshot is showing our blogs -object type. Blogs published are shown here.&nbsp;</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/ffee7c60-c228-11e8-b221-e37a82f35b47-Screenshot%20from%202018-09-26%2015-57-16.png" class="fr-fic fr-dii"></p><p>This picture is showing all objects present on our server. There are two object types are shown, named: blogs and registerusers. So we store all data on Cosmic server in the form of different objects and these objects are categorised as object types. &nbsp;</p><h2>Deploy to Cosmic servers</h2><p>This is main step of this tutorial, in which we are going to deploy this Angular blog on Cosmic server. There are some requirements:</p><ul><li><p>You must have a public GIt repo</p><p><a href="https://devcenter.heroku.com/">Specific requirements</a> depending on your platform must be met</p></li></ul><p>Now follow the following steps:</p><h2>Modify package.json</h2><p>Here you have to specify the versions of angular cli and compiler cli that means angular version:</p><div class="fr-embedly     " data-original-embed="<a href='https://gist.github.com/Dev0515/59c08abbca14ac42c92d86d5898225d7#file-package-json' class='embedly-card'></a>"><a href="https://gist.github.com/Dev0515/59c08abbca14ac42c92d86d5898225d7#file-package-json" class="embedly-card"></a></div><p><br></p><h2>Prepare software</h2><p>Now run the following command:</p><p><code>npm install --save express</code></p><p>now add following code to package.json</p><div class="fr-embedly     " data-original-embed="<a href='https://gist.github.com/Dev0515/13852d826cdfeb95683d431ce55cbe63#file-package-json2' class='embedly-card'></a>"><a href="https://gist.github.com/Dev0515/13852d826cdfeb95683d431ce55cbe63#file-package-json2" class="embedly-card"></a></div><p>Now create an app.js file and add following code:</p><div class="fr-embedly    " data-original-embed="<a href='https://gist.github.com/Dev0515/60f98c33c96535460e559159610652a8#file-app-js' class='embedly-card'></a>"><a href="https://gist.github.com/Dev0515/60f98c33c96535460e559159610652a8#file-app-js" class="embedly-card"></a></div><p><br></p><h2>Now Build Angular App for Production</h2><p>Add the following code to app.json:</p><div class="fr-embedly    " data-original-embed="<a href='https://gist.github.com/Dev0515/994860a7ef8aead9ab0187cdfdb3045a#file-app-json' class='embedly-card'></a>"><a href="https://gist.github.com/Dev0515/994860a7ef8aead9ab0187cdfdb3045a#file-app-json" class="embedly-card"></a></div><p>Now all tasks are completed and your app is ready to deploy on Cosmic server.</p><p><br></p><h2>Deploy it</h2><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/2dc93990-c229-11e8-b221-e37a82f35b47-Screenshot%20from%202018-09-26%2013-43-06.png" class="fr-fic fr-dii"></p><p><br></p><p>Go to deploy section under settings&gt;web hosting on your Cosmic server dashboard. Add git repo and click on the deploy button.</p><h2>Conclusion</h2><p>By using the Cosmic app server you can quickly deploy your app to hosting by using your public git repo. Here you are free free from worries of server configuration and software installation.</p><p>If you have any comments or questions about building websites and 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 Blog Using Angular and Cosmic

<p><a href="https://www.typeform.com" rel="noopener noreferrer" target="_blank">Typeform</a> is an online software-as-a-service that lets you build conversational forms, surveys, quizzes, landing pages, and more. <a href="https://zapier.com/" rel="noopener noreferrer" target="_blank">Zapier</a> gives people internet superpowers by allowing them to connect and automate the apps they use. Using Zapier to connect your Typeform-generated content with Cosmic is easy and requires zero coding. In this article I&rsquo;m going to demonstrate how to publish new Objects containing survey responses in Cosmic as they are completed in Typeform.&nbsp;</p><p><a href="https://zapier.com/app/login?next=/platform/public-invite/5784/d94417b158f78245932516dc472dbfbe/" rel="noopener noreferrer" target="_blank"><strong>Click here to connect Typeform to Cosmic using Zapier &raquo;</strong></a></p><p><br></p><h3>Select a Trigger App: Typeform</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/8bdaaa20-c1cd-11e8-bd04-2969145afc83-ice_screenshot_20180926-153423.png" style="width: 100%;" class="fr-fic fr-dib"></p><h3><br></h3><h3>Select Your Trigger Account</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/94efcc80-c1cd-11e8-bdb5-070d97b5609f-ice_screenshot_20180926-153507.png" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><h3>Select Your Trigger Form</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/a0041a40-c1cd-11e8-bdb5-070d97b5609f-ice_screenshot_20180926-153542.png" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><p>I went ahead and pulled through an entry from a recent Typeform to test my Zap.&nbsp;</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/b1b13fc0-c1cd-11e8-b7aa-658167b35a7e-ice_screenshot_20180926-153622.png" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><h3>Select an Action App: Cosmic</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/bd2783a0-c1cd-11e8-bd04-2969145afc83-ice_screenshot_20180926-153653.png" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><h3>Select Your Cosmic Account&nbsp;</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/14119340-c1ce-11e8-bdb5-070d97b5609f-ice_screenshot_20180926-153736.png" style="width: 100%;" class="fr-fic fr-dib"></p><h3><br></h3><p>At this point I simply clarify the Object Type I&#39;m sending my Typeform responses to and how I want my content model laid out. I select that I want to pull through first name / last name + the registration response, as pictured below.&nbsp;</p><p><br></p><h3>Zapier Test View</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/454a2170-c1ce-11e8-ab77-f52a5c4218fd-ice_screenshot_20180926-155326.png" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><h3>Cosmic Object View</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/ed01ba50-c1cd-11e8-9d2c-1158197de06b-ice_screenshot_20180926-154553.png" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><h3>See it in Action</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/1816b910-c1d4-11e8-bd04-2969145afc83-ezgif-4-bed0303cc4.gif" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><h3><br></h3><h3>Conclusion&nbsp;</h3><p>I encourage you to start automating workflows with your favorite apps using the <a href="https://zapier.com/platform/public-invite/5784/d94417b158f78245932516dc472dbfbe/" rel="noopener noreferrer" target="_blank">Cosmic Zapier Integration</a>. It&#39;s
our goal to help your team build apps faster using your favorite tools.&nbsp;</p><p>If you have any comments or questions about integrating your Cosmic Objects into workflows with other apps using Zapier, <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>

Integrating Typeform Data into Cosmic

<p><a href="https://www.salesforce.com/" rel="noopener noreferrer" target="_blank">Salesforce</a> is the world&rsquo;s leading enterprise CRM application. <a href="https://zapier.com/" rel="noopener noreferrer" target="_blank">Zapier</a> gives people internet superpowers by allowing them to connect and automate the apps they use. Using Zapier to connect your Cosmic-powered content with Salesforce is easy and requires zero coding. In this article I&rsquo;m going demonstrate how to add new leads to Salesforce when you add Objects in your Cosmic Bucket.&nbsp;</p><p><a href="https://zapier.com/app/login?next=/platform/public-invite/5784/d94417b158f78245932516dc472dbfbe/" rel="noopener noreferrer" target="_blank"><strong>Click here to connect Cosmic to Salesforce using Zapier &raquo;</strong></a></p><p><br></p><h3>Choose a Trigger App: Cosmic</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/d83d7230-c0fb-11e8-860e-21bfa9e630af-ice_screenshot_20180925-144716.png" style="width: 100%;" class="fr-fic fr-dib"></p><h3><br></h3><h3>Select Your Trigger Account</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/1c896ca0-c0fc-11e8-96ea-b52342e17887-ice_screenshot_20180925-144840.png" style="width: 100%;" class="fr-fic fr-dib"></p><h3><br></h3><h3>Select Your Trigger</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/05d26940-c0fb-11e8-96ea-b52342e17887-ice_screenshot_20180925-143708.png" style="width: 100%;" class="fr-fic fr-dib"></p><h3><br></h3><h3>Choose an Action App: Salesforce</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/1495dc50-c0fb-11e8-8360-cbe52c55c6c2-ice_screenshot_20180925-143637.png" style="width: 100%;" class="fr-fic fr-dib"></p><h3><br></h3><h3>Choose Salesforce Action</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/465ca0c0-c0fb-11e8-8360-cbe52c55c6c2-ice_screenshot_20180925-143619.png" style="width: 100%;" class="fr-fic fr-dib"></p><h3><br></h3><h3>Connect Your Salesforce Account<img src="https://s3-us-west-2.amazonaws.com/cosmicjs/612b92d0-c0fb-11e8-8360-cbe52c55c6c2-ice_screenshot_20180925-143557.png" style="width: 100%;" class="fr-fic fr-dib"></h3><h3><br></h3><h3>Login to Salesforce</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/8b227430-c0fd-11e8-bc2f-db7ac46c5aec-ice_screenshot_20180925-145207.png" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><h3>Select Your Salesforce Account</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/a0ef3410-c0fd-11e8-8360-cbe52c55c6c2-ice_screenshot_20180925-145439.png" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><h3>Testing</h3><p>I set up a test to pull through New Published Objects in Cosmic to add a Lead (by Last Name) in Salesforce: for this example the Last Name is &quot;Google Analytics View ID&quot; to test the zap.&nbsp;</p><h3>Zapier Test</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/aa7b3420-c0fd-11e8-8360-cbe52c55c6c2-ice_screenshot_20180925-145840.png" style="width: 100%;" class="fr-fic fr-dib"></p><h3><br></h3><h3>Salesforce Test</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/b4736380-c0fd-11e8-890b-4331599d2cfe-ice_screenshot_20180925-145901.png" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><p>Your zap is now ready to be turned on and enjoyed! Now every time I publish a new lead in the system, a new Lead will be created in Salesforce, ready for my team to devour.&nbsp;</p><h3><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/ba975c90-c101-11e8-bc2f-db7ac46c5aec-ice_screenshot_20180925-152900.png" style="width: 100%;" class="fr-fic fr-dib"></h3><h3><br></h3><h3>Conclusion&nbsp;</h3><p>It&#39;s easy to automate workflows with your favorite apps using the <a href="https://zapier.com/platform/public-invite/5784/d94417b158f78245932516dc472dbfbe/" rel="noopener noreferrer" target="_blank">Cosmic Zapier Integration</a>. By starting your content in an API, you&#39;re ensuring ultimate portability and scalability of your content, workflows and processes.&nbsp;</p><p>If you have any comments or questions about integrating your Cosmic Objects into workflows with other apps using Zapier, <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>

Integrating Cosmic-powered Content with Salesforce

<p>Our digital world is being built on top of API services. And Webhooks are the operators that enable these API services to communicate with each other. Using Cosmic Webhooks to customize your service-to-service communications, you can create some powerful
automated workflows, helping you better communicate with your team and the world.</p><p>Below are a few practical use-cases for Cosmic Webhooks:<br><br><strong>Add Webhooks to your Bucket by going to&nbsp;</strong><a href="https://cosmicjs.com/buckets" rel="noopener noreferrer" target="_blank">Your Bucket &gt; Settings &gt; Billing &gt; Add-ons</a><br><br></p><h3>1. Slack: Send notifications to your team</h3><p><br></p><p style="text-align: center;"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/274fddc0-c0d6-11e8-9b44-5583ac3a75ef-slack.svg" class="fr-fic fr-dii" style="width: 100%; max-width: 400px;"></p><p><br></p><p>Slack is a preferred chat tool to help teams stay in constant communication. Cosmic integrates easily with your Slack workspaces, allowing you to send chat notifications whenever content is added, edited, or deleted in your Cosmic Bucket. &nbsp;This
is great for when you would like to maintain a channel to log all content edits in between mocking co-workers with gifs.</p><p><a href="https://slack.com/oauth/authorize?&client_id=11020550018.203122635188&scope=incoming-webhook" rel="noopener noreferrer" target="_blank">Add Slack to your Cosmic Bucket &raquo;</a></p><p><br></p><h3>2. Netlify: Build your website automatically</h3><p><br></p><p style="text-align: center;"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/4a604e80-c0d6-11e8-9b44-5583ac3a75ef-netlify.png" class="fr-fic fr-dii" style="width: 100%; max-width: 400px;"></p><p><br></p><p><a href="https://www.netlify.com/" rel="noopener noreferrer" target="_blank">Netlify</a> is a web hosting provider for your modern web projects that allows for some amazing automation capabilities. One of these nice automated capabilities is the ability to trigger automatic builds. Connecting your Cosmic Bucket to Netlify is a cinch, allowing you to rebuild your Netlify-hosted web project automagically whenever content is edited in your Cosmic Bucket. Follow the link below to learn exactly how to do this:</p><p><a href="https://cosmicjs.com/articles/netlify-gatsby-cosmic-js-automatic-builds-with-webhooks-ji3fhda9" rel="noopener noreferrer" target="_blank">Add the Netlify build hook to your Cosmic Bucket &raquo;</a></p><p><br></p><h3>3. SendGrid: Send email notifications to your team</h3><p><br></p><p style="text-align: center;"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/549f4ae0-c0d6-11e8-9b44-5583ac3a75ef-sendgrid.png" class="fr-fic fr-dii" style="width: 100%; max-width: 400px;"></p><p><br></p><p>We recently released <a href="https://cosmicjs.com/docs/functions" rel="noopener noreferrer" target="_blank">Cosmic Functions</a> to help developers deploy code quickly and easily. A clear use-case for quickly deployed endpoints via Cosmic Functions is to use them for Webhook endpoints. Check out the <a href="https://github.com/cosmicjs/webhook-email-function" rel="noopener noreferrer" target="_blank">Webhook SendGrid Email Function</a> that enables you to send an email whenever content is added, edited, or deleted in your Cosmic Bucket. This is great for when your micro-managing content editor absolutely <strong>must</strong> read every draft from the comfort of their email inbox.</p><p><a href="https://cosmicjs.com/buckets" rel="noopener noreferrer" target="_blank">Go to Your Bucket &gt; Settings &gt; Functions to add the Send Email Webhook &raquo;</a></p><p><br></p><h3>BONUS: Zapier Integrations</h3><p><br></p><p style="text-align: center;"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/67005710-c0d6-11e8-9b44-5583ac3a75ef-zapier-logo.png" class="fr-fic fr-dii" style="width: 100%; max-width: 400px;"></p><p><br></p><p><a href="https://zapier.com/" rel="noopener noreferrer" target="_blank">Zapier</a> may be the undisputed king of webhooks. Their ecosystem of thousands of apps that communicate with each other allow you to create some powerful integrations. Use the <a href="https://zapier.com/platform/public-invite/5784/d94417b158f78245932516dc472dbfbe/" rel="noopener noreferrer" target="_blank">Cosmic Zapier App</a> (currently invite only 😉) to connect your Cosmic Bucket to any number of services including Google&#39;s Product Suite, Salesforce, Facebook, Twitter, and more.</p><p><a href="https://zapier.com/platform/public-invite/5784/d94417b158f78245932516dc472dbfbe/" rel="noopener noreferrer" target="_blank">Connect thousands of services to your Cosmic Bucket &raquo;</a></p><h3><br></h3><h3>Conclusion</h3><p>Our digital world is powered by API services. &nbsp;Cosmic Webhooks connects your Bucket to the world of API services allowing your team to automate communications to help you build better products together.&nbsp;</p><p>Let me know if you have any questions or comments about Cosmic Webhooks. <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 our Slack community</a>.</p>

3 Simple, but Powerful, Automation Webhooks

<p>We&#39;ve all seen it: You&#39;re on the last column of a time-consuming spreadsheet, the last thought in a blog article or putting the last touch on a new press release. You either hit the wrong key and all of your hard work evaporates into thin air or a co-editor is simultaneously editing and overwrites your content changes. You frantically scramble to &quot;Edit Undo&quot; and finally resort to refreshing the page to see if your changes have been saved. Alas, another workflow stretched longer by tools that don&#39;t keep up with you and your team in real-time.&nbsp;</p><h4><br></h4><h3>What is Revision History?</h3><p>Revision History: Or, as I like to call it, the global &quot;CYA&quot; (cover your ass) for all marketers everywhere 😀 Revision history becomes especially important in a cross-functional team environment. When developers and editors are collaborating in a Bucket to manage content, data and files, it helps to have a system that is memorizing every version of your content, in the event that you want to revert back, save drafted content to a published object, retrieve a revision history API endpoint or simply view prior changes.&nbsp;</p><p>With revision history, you no longer have to worry about editing mistakes. You now have the power to go back in time and revert to to prior versions. You can even have multiple editors working on the same piece of content at once and rest assured that you will never write over each other. Hey, even if you did, you have Revision History! (Refer to viewing prior versions below) <span class="fr-emoticon fr-deletable">😉</span>&nbsp;</p><p><br></p><h3>How to Add Revision History to Your Bucket</h3><p>To add Cosmic Revision History to your Bucket, simply navigate to your Bucket &gt; Bucket Settings &gt; Billing:</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/7ec8c980-c01e-11e8-b9f3-29af768e6e25-ice_screenshot_20180924-122219.png" style="width: 651px;" class="fr-fic fr-dib"></p><p><br></p><h3>How To View Prior Versions</h3><p>Navigate to the Object whose revision history you&#39;re querying and click on &quot;Revision History&quot;. You can click any of the linked timestamps to access that version of content, revert back to it, or simply make changes to the published content in draft state.&nbsp;</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/50029280-c02c-11e8-b9f3-29af768e6e25-ice_screenshot_20180924-140139.png" style="width: 530px;" class="fr-fic fr-dib"></p><p>Once you click into a timestamped version, you&#39;ll have the ability to modify content and preview your content just as you would in the live version. Notice the banner at the top alerting you that this is a prior version:</p><p><br></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/396e1c30-c034-11e8-b9f3-29af768e6e25-ice_screenshot_20180924-145725.png" style="width: 677px;" class="fr-fic fr-dib"></p><h3><br></h3><h3>How to Access Your Revision API Endpoint</h3><p>Navigate to the Object whose revision history endpoint you&#39;re querying and click on &quot;Revision Endpoint&quot;. Your API endpoint opens in a new tab. Note: only developers and admins have access to the Revision Endpoint. You can toggle to the Editor view to see how only Revision History is an option for that particular role type.</p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/1e8f9df0-c02d-11e8-b9f3-29af768e6e25-ezgif-4-717f7ac3eb.gif" style="width: 608px;" class="fr-fic fr-dib"></p><p><br></p><h3>When is Revision History Used?</h3><p>There are many examples, but here&#39;s a few we&#39;ve seen since releasing the feature:</p><ul><li>Colleague edits and publishes existing piece of content that needs to be reverted back to original version</li><li>Team needs multiple versions of the content available via API endpoint for testing</li><li>Team needs access to change log to see who has been active in content management</li><li>Editor accidentally erases existing content</li></ul><p><br></p><p>Need more peace of mind when managing your team&#39;s content? Check out our next powerful feature for editors and developers alike: <a href="https://cosmicjs.com/articles/how-to-schedule-automatic-backups-in-cosmic-js-jgqjsa87?ref=search" rel="noopener noreferrer" target="_blank">Automatic Backups</a>.&nbsp;</p><p><br></p><h3>Conclusion</h3><p>I hope you have found this tutorial on Revision History helpful. If you have any other questions or comments about managing content in Cosmic, feel free to <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 our Slack community</a>.</p>

Cosmic Revision History

<p>Cosmic provides a best-in-class headless CMS designed for your modern digital projects. By providing an intuitive admin dashboard, powerful APIs and flexible user roles, Cosmic enables content creators and developers to work better together. Applications are built faster, more light-weight, and your whole team saves time in the process. You can get started out-of-the-box with pre-built websites and apps available for easy install. I&#39;ll highlight 5 popular website boilerplates built specifically for zippy API-first dynamic content management using the Cosmic headless CMS API.&nbsp;</p><p><br></p><h3>TL;DR:</h3><p><a href="https://cosmicjs.com/apps" rel="noopener noreferrer" target="_blank">Cosmic Apps Marketplace</a><br><a href="https://github.com/cosmicjs" rel="noopener noreferrer" target="_blank">Cosmic Open-Source</a><br><a href="https://cosmicjs.com/docs" rel="noopener noreferrer" target="_blank">Cosmic Documentation</a></p><p><br></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/e2417130-bb44-11e8-ac9f-67e4f371d8e5-ezgif-4-fe526e7f0a.gif" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><h3>5 Website Boilerplates Built for API-first Content Management</h3><p>All of the website templates presented in this blog satisfy some common website requirements including:</p><p>- dynamic pages<br>- blog articles<br>- author management<br>- SEO ability<br>- contact form<br>- global website search</p><p><br></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/30adba70-bb5b-11e8-b1b9-535ca6d890a2-DallasStandup.com-21.png" style="width: 100%;" class="fr-fic fr-dib"></p><h3><a href="https://github.com/cosmicjs/nextjs-website-boilerplate" rel="noopener noreferrer" target="_blank">Next.js Website Boilerplate</a></h3><p><a href="https://github.com/cosmicjs/nextjs-website-boilerplate" rel="noopener noreferrer" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/34c89f10-bb49-11e8-b1b9-535ca6d890a2-289eec20-47fa-11e8-9edf-034361a9eeb5-next.png" style="width: 300px;" class="fr-fic fr-dib"></a></p><p><a href="https://cosmicjs.com/apps/nextjs-website-boilerplate" rel="nofollow">Click here to view the demo</a><br><a href="https://cosmicjs.com/articles/nextjs-website-boilerplate-jeoea8au" rel="nofollow">Read how this app was built</a></p><p><br></p><p>Next.js is a minimalistic framework for server-rendered React applications. See more <a href="https://cosmicjs.com/apps?q=next.js" rel="noopener noreferrer" target="_blank">Next.js Apps</a> available for easy install.</p><h3><a href="https://github.com/cosmicjs/nuxtjs-website-boilerplate" rel="noopener noreferrer" target="_blank">Nuxt.js Website Boilerplate</a></h3><p><a href="https://github.com/cosmicjs/nuxtjs-website-boilerplate" rel="noopener noreferrer" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/30f3f060-bb49-11e8-b1b9-535ca6d890a2-8a9bd6e0-471e-11e8-9273-6f3edf3e559e-nuxt.png" style="width: 300px;" class="fr-fic fr-dib"></a></p><p><br></p><p><a href="https://cosmicjs.com/apps/nuxtjs-website-boilerplate" rel="nofollow">Click here to view the demo</a><br><a href="https://cosmicjs.com/articles/nuxtjs-website-boilerplate-jezdxaxb" rel="nofollow">Read how this app was built</a></p><p>Nuxt.js is a minimal framework for creating Vue.js applications with server side rendering, code-splitting, hot-reloading, static generation and more! See more <a href="https://cosmicjs.com/apps?languages=Nuxt.js" rel="noopener noreferrer" target="_blank">Nuxt.js Apps</a> available for easy install.</p><p><br></p><h3><a href="https://github.com/cosmicjs/react-website-boilerplate" rel="noopener noreferrer" target="_blank">React Website Boilerplate</a></h3><p><a href="https://github.com/cosmicjs/react-website-boilerplate" rel="noopener noreferrer" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/10c283b0-bb49-11e8-ac9f-67e4f371d8e5-a1e22810-27b0-11e7-b6ae-8108cf4caa96-react.svg" style="width: 300px;" class="fr-fic fr-dib"></a></p><p><a href="https://cosmicjs.com/apps/nextjs-website-boilerplate" rel="nofollow">Click here to view the demo</a><br><a href="https://cosmicjs.com/articles/nextjs-website-boilerplate-jeoea8au" rel="nofollow">Read how this app was built</a></p><p><br></p><p>React makes it painless to create interactive UIs. Design simple views for each state in your application, and React will efficiently update and render just the right components when your data changes. See more <a href="https://cosmicjs.com/apps?languages=React" rel="noopener noreferrer" target="_blank">React Apps</a> available for easy install.</p><p><br></p><h3><a href="https://github.com/cosmicjs/vue-website-boilerplate" rel="noopener noreferrer" target="_blank">Vue Website Boilerplate</a></h3><p><a href="https://github.com/cosmicjs/vue-website-boilerplate" rel="noopener noreferrer" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/268e3220-bb49-11e8-ac9f-67e4f371d8e5-858dda70-6288-11e7-ab3d-9ddd8313526f-96da6390-e18a-11e6-a19e-716cc90a0c51-Vue.js_Logo.svg" style="width: 300px;" class="fr-fic fr-dib"></a></p><p><a href="https://cosmicjs.com/apps/nuxtjs-website-boilerplate" rel="nofollow">Click here to view the demo</a><br><a href="https://cosmicjs.com/articles/nuxtjs-website-boilerplate-jezdxaxb" rel="nofollow">Read how this app was built</a></p><p><br></p><p>Vue is a <strong>progressive framework</strong> for building user interfaces. Unlike other monolithic frameworks, Vue is designed from the ground up to be incrementally adoptable. The core library is focused on the view layer only, and is easy to pick up and integrate with other libraries or existing projects. See more <a href="https://cosmicjs.com/apps?languages=Vue.js" rel="noopener noreferrer" target="_blank">Vue.js Apps</a> available for easy install</p><p><br></p><h3><a href="https://github.com/cosmicjs/nodejs-website-boilerplate" rel="noopener noreferrer" target="_blank">Node.js Website Boilerplate</a>&nbsp;</h3><p><a href="https://github.com/cosmicjs/nodejs-website-boilerplate" rel="noopener noreferrer" target="_blank"><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/2b8826f0-bb49-11e8-b1b9-535ca6d890a2-759e85a0-27b0-11e7-b6ae-8108cf4caa96-nodejs.svg" style="width: 300px;" class="fr-fic fr-dib"></a></p><p><a href="https://cosmicjs.com/apps/medical-professional" rel="nofollow">Click here to view a demo website</a></p><p>Node.js is an open-source, cross-platform JavaScript run-time environment that executes JavaScript code outside of a browser. See more <a href="https://cosmicjs.com/apps?languages=Node.js" rel="noopener noreferrer" target="_blank">Node.js Apps</a> available for easy install.</p><p data-empty="true"><br></p><h3>Conclusion</h3><p>When ditching the installed content management system and going API-first isn&#39;t quick enough, check out the <a href="https://cosmicjs.com/getting-started" rel="noopener noreferrer" target="_blank">Starter Apps</a> from Cosmic &nbsp;to get a project up and running in seconds. 🔥</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>

Start building today