I created HipHip.app, a website and iPhone app that lets you create surprise celebration videos quickly and easily.
The website is written in Angular.
To help return some of these benefits back to Angular developers, the Angular team has released Angular Universal, a “server side rendering” technology. But in my own experience, at least through Angular v.11, I’ve found that it’s not quite ready for prime-time, with a whole lot of workarounds needed for most common Angular components and libraries. Among other things, when you use Angular Universal, any use of the “window” object in your code or third-party components has to be rewritten or worked-around.
Enter Scully, a Fast Static Site Builder
But recently, a team of developers took a different approach and created Scully, which allows you to easily pre-render the majority of the routes on your website. That is, with Scully, at build/test/deploy time, a Puppeteer bot is spun up in an Express application, and crawls your ready-for-production site in a variety of configurable, smart ways. You end up with a bunch of static “index.html” pages that are all ready to go, along with a bootstrapper that loads in your Angular application after page download. The result is that a user and a search engine spider each see a very fast initial page with most of the necessary content, while the rest of the app is downloaded in the background.
It brings the JAMStack philosophy to Angular.
So, I’ve added Scully to HipHip‘s build & deployment stack, resulting in much faster load times for end-users. I’ve been happy with it.
And over time, it should also lead to better search engine optimization for the site.
If you’ve read this far, you probably already know what a sitemap is, but it’s a file which tells the search engines which links you’d like it to crawl. It’s a helpful asset to have in a Search Engine Optimization strategy, because it can point the search engines to the routes you most care about, and away from the ones you do not.
Rendering a Sitemap from Scully Output
Since Scully generates a scully-routes.json file (you’ll see it in your “assets” subfolder by default after Scully completes its work), the natural next step in the build process for better SEO is to simply walk through that JSON file and create a sitemap.xml.
Here’s some quick Python code to do just that, which I’ve added as a step in my validator/build routine. It builds valid sitemap.xml files, and you can use it as a starting point for other work if you’d like.
Sharing here in case other Angular developers find this useful.
I place this file below, generate-sitemap.py in my “src” subfolder, then I run this script after Scully completes its work in the build process. Error and exception handling left up to the reader. Obviously, change “https://hiphip.app” in the code below to your root URL.
# generate-sitemap.py import json def generate_sitemap(): # the list of specific routes to ignore ignore_list=["/onem","/for"] # the list of route prefixes to ignore ignore_startswith=["/utils", "/dash", "/login", "/logout", "/create", "/account", "/error", "/settings"] print("Generating sitemap.xml from ./assets/scully-routes.json") with open('./assets/scully-routes.json') as f: data = json.load(f) f = open("sitemap.xml", "w") f.write('<?xml version="1.0" encoding="UTF-8"?>\n') f.write('<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9">\n') for route in data: path = route["route"] if path not in ignore_list: if (not path.startswith(tuple(ignore_startswith))): print(route["route"]) f.write('<url>\n') f.write('<loc>https://hiphip.app'+path+'</loc>\n') ## << CHANGE f.write('<changefreq>daily</changefreq>\n') f.write('</url>\n') else: print("SKIPPING: "+path) else: print("SKIPPING: "+path) f.write('</urlset>') f.close() print("SITEMAP GENERATED SUCCESSFULLY. Saved to src/sitemap.xml")
Steve’s an entrepreneur and software leader. Most recently, he founded HipHip.app, the easiest way to create celebration videos. He also founded bigthanks.org, helping people discover and share productive ways they can respond in times of crisis. Steve’s worked on consumer apps, online travel, games, relational databases, management consulting and telecom. He launched Alignvote in 2019, which helped Seattle voters find their best-match political candidates. Steve founded BigOven, the first recipe app for iPhone, now with more than 15 million downloads, which was purchased in 2018. Steve served as Chairman of Escapia Inc., the leading SaaS solution for the US vacation rental industry, sold to Homeaway, now part of Expedia. In 1997, Steve was cofounder, President, CEO and Chairman of VacationSpot, a pioneer in the online reservation of vacation rentals, bought by Expedia in January 2000. At Expedia, Steve was Vice President of Vacation Packages, leading the vacation package and destination services teams, helping to create two patents on the first-ever dynamic vacation packaging system on the Internet, which now represents billions in annual transactions for Expedia.
He has keynoted on several occasions at the Vacation Rental Managers Association (VRMA), and taught a graduate level course on the strategic management of innovation at the University of Washington Foster Business School in Seattle, Washington.
Steve worked for Microsoft from 1991 to 1997 in a variety of senior marketing and executive positions, and led the creation of the internet games group, helping develop several products and patents related to online multiplayer gaming. He helped launch Microsoft Access and was involved in the acquisition of Fox Software by Microsoft in 1993. He’s worked for IBM, Booz-Allen Hamilton and Bell Communications Research.
He holds an MS in Computer Science from Stanford University in Symbolic and Heuristic Computation (AI), an MBA from Harvard Business School, where he was named a George F. Baker Scholar (awarded to top 5% of graduating class), and a dual BS in Applied Mathematics / Computer Science and Industrial Management from Carnegie Mellon University (CMU) with University Honors. Steve volunteers when time allows with Habitat for Humanity, University District Food Bank, YMCA Seattle, Technology Access Foundation (TAF) and other organizations in Seattle.