{"id":320969,"date":"2020-09-23T07:50:00","date_gmt":"2020-09-23T14:50:00","guid":{"rendered":"https:\/\/css-tricks.com\/?page_id=320969"},"modified":"2020-09-23T08:23:52","modified_gmt":"2020-09-23T15:23:52","slug":"193-scully-the-ssg-for-angular","status":"publish","type":"page","link":"https:\/\/css-tricks.com\/video-screencasts\/193-scully-the-ssg-for-angular\/","title":{"rendered":"#193: Scully: the SSG for Angular"},"content":{"rendered":"\n

Tara Z. Manicsic joined me for this video, setting up the very basics of Scully<\/a>, which is a Static Site Generator for Angular \u2014 nay, the<\/em> SSG for Angular, as Tara pointed out to me.<\/p>\n\n\n\n

I don’t know much Angular at all. In fact, I didn’t have the Angular CLI installed on my machine at all when we started this video, so that ends up being one of the first things we do. Then we get into scaffolding a new Angular project, installing Scully, and looking at what the build process is like for setting up a blog.<\/p>\n\n\n\n

One of the things I liked is that Tara said that you don’t have to “learn” Scully. If you’re already an Angular person, this is just Angular. Scully is doing the smart behind-the-scenes stuff to pre-render pages rather than having everything rendered client-side. And with Angular, many of the decisions are made for you up-front in a way they aren’t with some other popular frameworks. If you need routing, that’s baked in. If you need state management, that’s baked in. It is both prescriptive and opinionated. And because of that, it makes powerful scaffolding possible. The CLI can do a lot for you, prepping your project for new pages and things. <\/p>\n\n\n\n

Tara has an in-depth guide on Scully and making a blog over on the the Netlify blog: Creating an Angular Jamstack Blog<\/a><\/p>\n\n\n\n

<\/p>\n","protected":false},"excerpt":{"rendered":"

Tara Z. Manicsic joined me for this video, setting up the very basics of Scully, which is a Static Site Generator for Angular \u2014 nay, the SSG for Angular, as Tara pointed out to me. I don’t know much Angular at all. In fact, I didn’t have the Angular CLI installed on my machine at all […]<\/p>\n","protected":false},"author":3,"featured_media":321455,"parent":1283,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"video-single.php","meta":{"_bbp_topic_count":0,"_bbp_reply_count":0,"_bbp_total_topic_count":0,"_bbp_total_reply_count":0,"_bbp_voice_count":0,"_bbp_anonymous_reply_count":0,"_bbp_topic_count_hidden":0,"_bbp_reply_count_hidden":0,"_bbp_forum_subforum_count":0,"sig_custom_text":"","sig_image_type":"featured-image","sig_custom_image":0,"sig_is_disabled":false,"inline_featured_image":false,"c2c_always_allow_admin_comments":false,"footnotes":""},"tags":[1194,13031],"acf":[],"jetpack-related-posts":[{"id":1686,"url":"https:\/\/css-tricks.com\/video-screencasts\/45-using-foxycart-for-ecommerce\/","url_meta":{"origin":320969,"position":0},"title":"#45: Using FoxyCart for eCommerce","date":"January 15, 2009","format":false,"excerpt":"FoxyCart is my new favorite eCommerce system. It is extremely easy to get started with. You have full design control over all aspects of it (cart, checkout, receipts). It has the features you need (downloadables, security, saved accounts, subscriptions). Best of all, it's not a bloated CMS. You can build\u2026","rel":"","context":"In "Article"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14121,"url":"https:\/\/css-tricks.com\/almanac\/properties\/t\/top-right-bottom-left\/","url_meta":{"origin":320969,"position":1},"title":"top \/ bottom \/ left \/ right","date":"September 6, 2011","format":false,"excerpt":"The top, bottom, left, and right properties are used with position to set the placement of an element. They only have an effect on positioned elements, which are elements with the position property set to anything other than static. For example: relative, absolute, fixed, or sticky. div { : ||\u2026","rel":"","context":"In \"bottom\"","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18578,"url":"https:\/\/css-tricks.com\/lodge\/v10\/98-building-the-almanac-part-1\/","url_meta":{"origin":320969,"position":2},"title":"#98: Building the Almanac, Part 1","date":"September 30, 2012","format":false,"excerpt":"This is an extra special EMPIRE STRIKES BACK themed episode of the v10 redesign series! Everything starts out just fine. We start moving some things over to our WordPress template from our static mockup. We have the header working in our static mockup, so we start with that. That's always\u2026","rel":"","context":"With 1 comment","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":18364,"url":"https:\/\/css-tricks.com\/lodge\/v10\/055-getting-static-mockup-into-version-control\/","url_meta":{"origin":320969,"position":3},"title":"#055: Getting Static Mockup into Version Control","date":"September 18, 2012","format":false,"excerpt":"Up until now, we've been making code changes locally without using any sort of version control. With the complexity of this site rising, that's becoming more and more irresponsible. What changed and when? Why did it change? How can we see what it was before in case it causes problems\u2026","rel":"","context":"Similar post","img":{"alt_text":"","src":"","width":0,"height":0},"classes":[]},{"id":14142,"url":"https:\/\/css-tricks.com\/almanac\/properties\/z\/z-index\/","url_meta":{"origin":320969,"position":4},"title":"z-index","date":"September 6, 2011","format":false,"excerpt":"div { z-index: 1; \/* integer *\/ } The z-index property in CSS controls the vertical stacking order of elements that overlap. As in, which one appears as if it is physically closer to you. z-index only affects elements that have a position value other than static (the default). Elements\u2026","rel":"","context":"With 53 comments","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2011\/09\/context.png?resize=350%2C200&ssl=1","width":350,"height":200},"classes":[]},{"id":346482,"url":"https:\/\/css-tricks.com\/video-screencasts\/210-yapping-about-astro\/","url_meta":{"origin":320969,"position":5},"title":"#210: Yapping About Astro","date":"August 9, 2021","format":false,"excerpt":"I think Astro is a pretty cool bit of technology for building websites! Should we call it a framework? We'll get into that in the video. How can we call it a framework if it asks you to \"bring your own framework\"?! I'd say the main thing that compels me\u2026","rel":"","context":"In \"astro\"","img":{"alt_text":"","src":"https:\/\/i0.wp.com\/css-tricks.com\/wp-content\/uploads\/2021\/08\/astro-thumb-no-text.png?fit=1200%2C675&ssl=1&resize=350%2C200","width":350,"height":200},"classes":[]}],"_links":{"self":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/320969"}],"collection":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/comments?post=320969"}],"version-history":[{"count":8,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/320969\/revisions"}],"predecessor-version":[{"id":321873,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/320969\/revisions\/321873"}],"up":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/pages\/1283"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media\/321455"}],"wp:attachment":[{"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/media?parent=320969"}],"wp:term":[{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/css-tricks.com\/wp-json\/wp\/v2\/tags?post=320969"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}