Scully - Angular Static Site Generator
In the Static Site Generator (SSG) space, ReactJs has Gatsby and VueJs has Vuepress/Gridsome. This left for a space to be filled for Angular, introducing Scully the Angular solution for SSG.
JAMStack with SSG
The best way to build the fastest Angular apps. Scully is a static site generator for Angular projects looking to embrace the JAMStack.
Just like the other frameworks what Scully offers is the ability to pre-render pages and then create HTML and CSS that loads highly performant pages for your browser to utilize without the SPA effect and whitescreen where you get loading times in the mix.
Make sure to checkout the Scully Docs.
Scully pre-renders each page in your app to plain HTML & CSS. To do this, Scully uses machine learning techniques to find all of the routes in your project. Scully then visits each route, rendering the view and saving it to an HTML file. You can then ship all of those HTML files to production. Each view in your app can now be delivered to your users in just a few KBs, as opposed to the hundreds/thousands of KBs require to download your entire Angular app. Your app appears INSTANTLY on any device (including mobile 3G).
- Scully Docs
Alpha Release Video
Of course you just need an Angular project. For an example I cloned the example from our Angular Material Course.
git clone https://github.com/AJONPLLC/lesson13-angular-material-reactive-forms
Then opening the terminal at the root of this project I ran the commands to initialize scully
This produced 6 file changes in my examplepackage.json and package-lock.json
Next you will create an Angular build just like normal, followed by
npm run scully .
If you get an error I did have to place `"fs-extra": "^8.1.0",` as a dev dependency [https://github.com/scullyio/scully/issues/28](https://github.com/scullyio/scully/issues/28)
You will see your normal build file in
dist folder and a new
static folder that contains your SSG files. You can then run the site by switching to the static directory and using a local server like http-server to run the compliled code.
What to Try Next
Add scully to your project and utilize @schematics/angular. This command will add the necessary packages that allow you to use the Angular CLI for scaffolding out
The below command allows you to create a blog and make posts. Try this out in a new Angular app to start up your blog from scratch.
ng g @scullyio/init:blog
ng g @scullyio/init:post
I know that Aaron Frost, Sander Elias, Jorge Cano, and Andres Villanueva are Angular Wizards so the project is in good hands. It is just the beginning, but if you are looking for an amazing Angular project to be part of make sure you star this one!