Publish a localized Angular app with Scully
Tags: angular, scully
Published: 2020-11-10 20:50:53

## 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](https://github.com/scullyio/scully/issues/318)

The first Plugin is from [Sander Elias](https://github.com/SanderElias): [base-href-rewrite](https://github.com/scullyio/scully/tree/master/libs/plugins/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](https://github.com/dyingangel666) 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](https://gitlab.com/novaloop-oss/angular/localization)

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