Jamstack Explorers

Angular in the Jamstack with Tara Z. Manicsic

Creating a Pre-rendered Site Angular and Scully

Oh shucks the title may have given it all away BUT we're pre-rendering our Angular site with Angular's one and only static site generator, 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.

Now if we type in Netlify open and go to our dashboard, we will see that a new deploy has been triggered and we can actually go and see the site that has come up after we finished building the whole site. We can see our site is live here. If we go back to that deploy dashboard, click on the link for our project, we can see that yes, our project is there and we'll actually go inside of our Chrome dev tools. You see everything that's loading there. Now if we go ahead and disable JavaScript and rerun, we're actually just getting those static assets coming through, which is not as easy to see with such a simple site but down the road when we add more, we can see how we have made it a Jamstack site and static and it's up. It's live. It's pre-rendered, how exciting. Good job.


your progress