Scully.io in Docker

Published:

A SPA (single page application) build with Angular is not accessible by many crawlers (for example for search engines), due to the fact that it requires Javascript interpretation.Furthermore it also requires the Javascript code to be fully downloaded and executed before anything is visible in the browser. It is possible to pre-render your Angular application, which improves your SEO score and makes the web application better suited for mobile use.Pre-render actually means that you run your Angular application locally (as it would be interpreted by the browser) and save the generated HTML for each page. There are currently 2 ways to pre-render an Angular application:

  1. Use Angular Universal. This is geared towards server-side rendering instead of pre-rendering and deploying static files ( aka JAM stack).Pre-rendering is possible however.
  2. Scully.io This is a solution specifically designed for JAMstack style deployment of Angular applications.

Scully is based on Puppeteer. This in turn requires Google Chrome of Chromium to be installed. This works well on your local PC, but if you want to run Scully inside a Docker container (for example on a build server / CICD), it doesn’t work out of the box.

Follow these steps if you want to run Scully on your Angular project inside a Docker container.

  1. Use beeman/scully-docker as the base image for your Docker container. This image already contains Scully pre-configured based on a Node.js Alpine image.
  2. Add a few “puppeteerLaunchOptions” to your scully.projectname.config.ts file as indicated in the sample code below.
export const config: ScullyConfig = {
  projectRoot: "./src",
  puppeteerLaunchOptions: { args: ['--no-sandbox', '--disable-setuid-sandbox'] },
  projectName: "myproject",
  outDir: './dist/static',
  routes: {},
};