Getting your Universal app ready to work with CloudFront

If you've followed along from the previous tutorial, you should now have an Angular Universal application served using AWS CloudFront. However, you might spot a few things aren't quite right. For a start, you've probably spotted that your styles aren't loading. If you look a bit closer, you might also spot that the JavaScript files that the build process has generated (main, polyfills and a couple of others) aren't loading. You might even note that it's because the build process has added an extraneous /production/ to the base href.

There's two places you'll need to change this. The first is in the package.json, which now contains a load of useful custom commands for building and generating your app. You should see a line like this, defining the build:browser:serverless commmand:

Remove the --base-href /production/ part. If we were sticking with our long, cumbersome API URL we'd probably want to keep it. But we're not.

The second is in the serverless environment file (src/app/environments/environment.serverless.ts). You'll see that there's a base href in there set to production. You just want it set to /.