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 existent 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 --proxy proxy.conf.json
npm run scully --proxyConfig proxy.conf.json
npm run scully --proxy-config proxy.conf.json
npm run scully --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! 🙂