<p>Thanks to those who attended the live Twitch stream of <a href="https://twitter.com/jlengstorf" rel="noopener noreferrer" target="_blank">Jason Lengstorf</a> and <a href="https://cosmicjs.com/tony" rel="noopener noreferrer" target="_blank">Tony Spiro</a> building a Cosmic-powered Gatsby application. In the stream, Tony and Jason pair program a basic Gatsby application from scratch. In case you missed it, the video and resources are available below.&nbsp;</p><p><br></p><h3>The Main Points Discussed Are:</h3><p>✅ Creating a Cosmic website<br>✅ Adding content<br>✅ Displaying content on a Gatsby website<br>✅ Building dynamic header and footers</p><p><br></p><h3>Video: Build a Cosmic-powered blog using Gatsby</h3><p><span class="fr-video fr-fvc fr-dvb fr-draggable" contenteditable="false" draggable="true"><iframe src="https://www.youtube.com/embed/mGcAWs1xRnY?wmode=opaque" frameborder="0" allowfullscreen="" style="width: 100%; height: 360px;"></iframe></span><br></p><h3>Resources to build apps with Cosmic and Gatsby:</h3><p><a href="https://github.com/cosmicjs/gatsby-source-cosmicjs" rel="noopener noreferrer" target="_blank">Cosmic Gatsby Source Plugin</a><br><a href="https://github.com/cosmicjs/gatsby-starter" rel="noopener noreferrer" target="_blank">Cosmic Gatsby Starter</a><br><a href="https://github.com/cosmicjs/gatsby-localization-starter" rel="noopener noreferrer" target="_blank">Gatsby Localization Starter</a><br><a href="https://cosmicjs.com/articles/webinar-video-localization-with-gatsby-and-cosmic-js-jnyqtjoa" rel="noopener noreferrer" target="_blank">Webinar Video: Localization with Cosmic and Gatsby</a></p><h3><br></h3><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>

Video: Build a Cosmic-powered blog using Gatsby

<p>Thanks to everyone in Dallas who came out to the Vuetiful Holiday Meetup at <a href="https://simplemedia.co" rel="noopener noreferrer" target="_blank">Simple Media</a>, featuring <a href="https://vuetifyjs.com/en/" rel="noopener noreferrer" target="_blank">Vuetify</a>, <a href="https://www.netlify.com" rel="noopener noreferrer" target="_blank">Netlify</a> and Cosmic. We enjoyed holiday eats and drinks as well as great presentations from Cosmic partner-agency Simple Media, Cosmic co-founder <a href="https://cosmicjs.com/tony" rel="noopener noreferrer" target="_blank">Tony Spiro</a> and Vuetify Founder <a href="https://twitter.com/zeroskillz" rel="noopener noreferrer" target="_blank">John Leider</a>.&nbsp;</p><p>Getting the <a href="https://cosmicjs.com/community" rel="noopener noreferrer" target="_blank">Cosmic Community</a> together is always great, especially during the holidays. If you&#39;re in our community but missed the discussion, we&#39;ve included links to the presentation decks from Cosmic and Vuetify below.&nbsp;</p><p><br></p><h3>Vuetiful Meetup Recap: Presentation Links</h3><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/1647ac40-ffcb-11e8-b3a6-4de7ce04af18-971f5800-e9e0-11e8-b12e-ebba23490524-Artboard.jpg" style="width: 100%;" class="fr-fic fr-dib"></p><h4><br></h4><h4 style="text-align: center;"><strong>Tony Spiro, Cosmic:</strong></h4><h4 style="text-align: center;"><a href="https://docs.google.com/presentation/d/e/2PACX-1vRCcDALmkbjRezRoUk07dOoQvL9HP8Gr4-L9gdHW3HmodJjqEGUZUJuVMpU7CuPeMQJBLIApHlW5EWj/pub?start=false&loop=false&delayms=3000&slide=id.g40731b0bfe_0_0" rel="noopener noreferrer" target="_blank">&quot;A Vuetiful Holiday Meetup&quot;</a></h4><h4 style="text-align: center;"><br></h4><h4 style="text-align: center;"><strong>John Leider, Vuetify:</strong></h4><h4 style="text-align: center;"><a href="https://slides.com/johnjleider/vuetify-2-1#/" rel="noopener noreferrer" target="_blank">&quot;The Path to Vuetify 2.0&quot;</a></h4><p><br></p><p><br></p><p><img src="https://s3-us-west-2.amazonaws.com/cosmicjs/79e65390-ff04-11e8-81fd-39eafbe9421d-IMG_6205.jpeg-copy.jpg" style="width: 100%;" class="fr-fic fr-dib"></p><p><br></p><p>Special thanks to <a href="https://www.svb.com" rel="noopener noreferrer" target="_blank">Silicon Valley Bank</a> for providing food and beverage for this event, as well as to Simple Media for hosting us at their Design District offices in Dallas.&nbsp;</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>

Vuetiful Meetup Recap: featuring Vuetify, Netlify and Cosmic

<p>Thank you to everyone who joined us for our Halloween edition of our Wednesday Webinar series. In this presentation, we teamed up with <a href="https://www.gatsbyjs.org/" rel="noopener noreferrer" target="_blank">Gatsby</a> developer advocate <a href="https://twitter.com/jlengstorf" rel="noopener noreferrer" target="_blank">Jason Lengstorf</a> to discuss how to make localization for websites less spooky using Gatsby and Cosmic.</p><p><strong>The main points discussed are:</strong><br><strong>✅&nbsp;</strong>How to create localized content models in Cosmic<br><strong>✅&nbsp;</strong>How to install the Cosmic <a href="https://github.com/cosmicjs/gatsby-localization-starter" rel="noopener noreferrer" target="_blank">Gatsby Localization Starter</a><br><strong>✅&nbsp;</strong>How Gatsby builds your localized website for performance and SEO</p><p><br><strong><a href="https://github.com/cosmicjs/gatsby-starter-localization" rel="noreferrer nofollow noopener" target="_blank"></a></strong></p><p><span class="fr-video fr-fvc fr-dvb fr-draggable" contenteditable="false" draggable="true"><iframe width="640" height="360" src="//www.youtube.com/embed/16m3wRFPGAY?wmode=opaque" frameborder="0" allowfullscreen=""></iframe></span></p><p>Also we had a curveball thrown at us about localizing the language selectors. &nbsp;This has now been added to the <a href="https://github.com/cosmicjs/gatsby-localization-starter/blob/master/gatsby-config.js" rel="noopener noreferrer" target="_blank">gatsby-config.js</a> in the Gatsby Localization Starter by adding a <code>localized_name</code> property with different values for each locale:</p><div class="fr-embedly      " data-original-embed="<a href='https://gist.github.com/tonyspiro/d99317cf37f6e316ec5ab3a45e250d7d' class='embedly-card'></a>"><a href="https://gist.github.com/tonyspiro/d99317cf37f6e316ec5ab3a45e250d7d" class="embedly-card"></a></div><p><br></p><p><br></p>

Webinar Video: Localization with Gatsby and Cosmic 🌏

<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>

Start building today