Publish a localized Angular app with Scully

Making Scully work with our localized Angular App

In the first part of the series we have localized our Angular App using the official @angular/localize. Now we need to make Scully work with our setup.

First of all, install scully, we are using the Scully schematic for this task:

ng add @scullyio/init

The --localize option when building the Angular app does creates builds for each locale and changes the baseHref of the those index.html file. Unfortunately this does stop Scully from traversing the routes correctly. To bypass this issue we set the base path back to '/' before building the Scully app. Afterwards we need to set it back and correct the paths of the static assets. Fortunately there are plugins for both latter issues. You can find a discussion on the topic Github

The first Plugin is from Sander Elias: base-href-rewrite and can be installad via npm npm install -D @scullyio/scully-plugin-base-href-rewrite

The second plugin is from Alexander Spies and you can create it directly in your project. Create a scully/plugins/fixStaticLinks.js:

const {registerPlugin} = require('@scullyio/scully');

const FixStaticLinksPlugin = 'fixStaticLinks';

const fixStaticLinksPlugin = async (html) => {
    const regex = new RegExp('(<a[^>]* href="\/)([^"]*)"', 'gmi');
    html = html.replace(regex, `$1${process.env.LOCALE}/$2"`);

    return Promise.resolve(html);
};


registerPlugin('router', 'fixStaticLinks', fixStaticLinksPlugin);
exports.FixStaticLinksPlugin = FixStaticLinksPlugin;

Then we are ready to adapt the scully.localization.config.ts file:

import {baseHrefRewrite} from '@scullyio/scully-plugin-base-href-rewrite';
import {ScullyConfig, setPluginConfig} from '@scullyio/scully';

const {FixStaticLinks} = require('./scully/plugins/fixStaticLinks');

const defaultPostRenderers = [baseHrefRewrite, FixStaticLinks];
setPluginConfig(baseHrefRewrite, {href: `/${process.env.LOCALE}/`});

export const config: ScullyConfig = {
    projectRoot: './src',
    projectName: 'localization',
    distFolder: `./dist/localization/${process.env.LOCALE}`,
    outDir: `./dist/static/${process.env.LOCALE}`,
    puppeteerLaunchOptions: {args: ['--no-sandbox', '--disable-setuid-sandbox']},
    defaultPostRenderers,
    routes: {}
};

We have registered both renderer plugins in the config. We have also added the distFolder and we are using an Environment variable for constructing the file system paths.

Let's put everything together. Here is a Bash script that replaces the base href of the index.html files (/de/ -> /) and then runs Scully for both locales.

#!/bin/bash

languages=(en de)

for language in "${languages[@]}"
do
    index_file="dist/novaloop-ch/$language/index.html"
    echo "Replace base href for $language in $index_file"
    sed -i -e 's/"\/'$language'\/"/"\/"/g' $index_file
    echo "Build scully for $language"
    LOCALE=$language npm run scully
done

cp htaccess.file dist/static/.htaccess

The last line is only needed if you publish to an Apache server and want some redirect magic. The htaccess.file reads as follows:

RewriteEngine On

RewriteRule ^de$ /de/home/ [L]
RewriteRule ^en$ /en/home/ [L]
RewriteRule !^[a-z]{2}/ /de%{REQUEST_URI} [L,R=302]

The full source code of the sample project can be found on Gitlab

There is also a bash script (and a Docker file) for starting and testing the Scully build with an Apache server in Docker.