Configure Proxy Redirect with Scully - The Static Site Generator for Angular apps

• Introduction
• Proxy Configuration with Scully
  • Using the scully configuration file
  • Using the CLI
• Conclusion

Introduction

Scully is the awesome new static site generator for Angular, and I've been working on integrating it into Xamcademy.

The biggest hurdle so far has been the unavailability of samples to follow for an existing Angular application, so it's taken a lot of trial and error to get things working as expected. I'll be writing more blog posts on my experience as I continue to use it.

Proxy Configuration with Scully

Scully uses the same config format as webpackDevServer, also used by the Angular CLI. Here's an example proxy config file located at src/proxy.conf.json in an Angular project.

{
  "/api": {
    "target": "http://localhost:8200",
    "secure": false,
    "pathRewrite": {"^/api": ""}
  }
}

What this means is we can take our Angular app's already existing proxy configuration file and pass it to Scully, ensuring requests are properly redirected as Scully prerenders our routes.

We can point Scully to our proxy configuration file in two ways.

Using the scully configuration file

The proxyConfig property can be added to scully.config.js, it's value being a relative filename for a proxy config file.

To point Scully to our proxy configuration file, we add the following entry to scully.config.js:

exports.config = {
  projectRoot: "./src",
  projectName: "xamcademy",
  outDir: './dist/static',

  proxyConfig: './src/proxy.conf.json', // <---- ADD THIS

  // ...
};

If say our proxy config file is at the root of the project instead, we can change the relative path to:

exports.config = {
  projectRoot: "./src",
  projectName: "xamcademy",
  outDir: './dist/static',

  proxyConfig: './proxy.conf.json', // <---- ADD THIS

  // ...
};

I got a hint after looking at the outDir value, ./dist/static, which points to a relative path from the root ./. Here's the code that loads the proxy config! Hopefully that link doesn't get broken 😑.

Using the CLI

Our proxy config file can be passed in using the proxy cli option. It's aliases are --proxy, --proxyConfig, --proxy-config, and --proxyConfigFile. Below are usage examples.

npm run scully --proxy src/proxy.conf.json

npm run scully --proxyConfig src/proxy.conf.json

npm run scully --proxy-config src/proxy.conf.json

npm run scully --proxyConfigFile src/proxy.conf.json

If our proxy config file was located at the root of our project instead, we can adjust as follows (using the scully:serve command in this example).

npm run scully:serve --proxy proxy.conf.json

npm run scully:serve --proxyConfig proxy.conf.json

npm run scully:serve --proxy-config proxy.conf.json

npm run scully:serve --proxyConfigFile proxy.conf.json

Note: You should be aware a proxy config file passed through the command line has priority over one added in the scully configuration file, more here.

Conclusion

With this set up, Scully will now correctly use your proxy configuration to redirect requests while pre-rendering your app's routes.

You can read the docs here, and if you have a specific proxy redirect issue you'd like to discuss, do reach out to me on Twitter, or leave a comment below.

Happy coding! 🙂