Angular in the Jamstack with Tara Z. Manicsic
Creating a Pre-rendered Site Angular and Scully
It's time to Jamstack-ify our Angular site even more by pre-rendering it with a static site generator, Scully. If you're new to Scully, it is the one and only static site generator for Angular. You can find more information about it at scullyio.com. You can find all the instructions for installing and learning more about Scully and how it works and how to use it.
The first thing we need to do is use the NG add command and use @scullyio dash init. This will install all of the schematics for Scully and get everything you need to get Scully working. Then we have to run the build command for our Angular project, NG build dash dash prod, so it knows what to read. Now, we can actually run NPM run Scully to pre-render all of our Angular application. We're going to say yes to improve services with analytics. Now, you can see all the things that have changed in there. With our Git workflow, we're going to add all these changes to our Git repository for our project, commit that and push it up to our repo.
When we run Scully, we actually save the built project in a new folder in our dist folder called static. If we go inside of dist and we see there's now a static folder. Inside there, you can see all the static files. Now, we want to actually change our Netlify configuration file to reflect those changes. First of all, the new directory and now we have to add that npm run Scully to our build command to actually pre-render our site. With those changes, we can push it all up to our project repository and this will actually, on that push to the repo, trigger a new build at Netlify.