DEV Community: Shane McGowan

Path Aliases in TypeScript (with Vite or Webpack bundlers)

Shane McGowan — Sat, 09 Aug 2025 16:30:00 +0000

A Path Alias in TypeScript lets us simplify our import paths with an alias

So rather than doing ugly relative imports like this:

import { User } from '../../model/user'

We can do something like clean like this:

import { User } from '@model/user'

To set this up, go to your tsconfig.json and add the following under compilerOptions

// tsconfig.json
{
  "compilerOptions": {
    // ...some other compiler options

    "paths": {
      "@model/*": [
        "./src/model/*"
      ],
    },
  },
}

To see this change come into affect in your editor, restart your TypeScript language server.

Path Aliases with a bundler

If you are using a bundler you will also need to let your bundler know about your new alias. I won't give an example for every bunlder out there but here is how to do it in either Vite or Webpack. I am covering those specifically as I currently have active TypeScript based projects using both and don't care to migrate the Webpack one to Vite as Webpack still works fine.

Vite

In your vite.config.js add the following (or create a vite.config.js file in the root of your project (beside your package.json) if you haven't created one yet.

// vite.config.js
import { defineConfig } from "vite";
import path from "path";

export default defineConfig({
  resolve: {
    alias: {
      "@model": path.resolve(__dirname, "./src/model"),
    },
  },
});

Webpack

Basically the same as your Vite config above (probably intentionally similar), add the following to your webpack.config.js file.

// webpack.config.js
const path = require('path');

module.exports = {
  // ... some other config here
  resolve: {
    alias: {
      '@model': path.resolve(__dirname, "./src/model"),
    },
    extensions: ['.ts', '.js'], // I can't remember if this is needed so remove it if it isn't
  },
}

👋 Checkout more of my stuff at shanemcgowan.com or feel free to reach out to me at my email hi@shanemcgowan.com 👋

Configure M1 Mac to use JDK8 with Maven

Shane McGowan — Sun, 23 May 2021 00:28:33 +0000

Getting started with the new ARM based M1 Macs can be a bit awkward so here is how you get Maven working with JDK 8.

Install Homebrew

Homebrew is what we will use to install Maven. You can instructions on downloading Brew here https://brew.sh/ or by simply running this script in your terminal

/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/HEAD/install.sh)"

Install Maven via Homebrew

Run the following command in your terminal

brew install maven

Install ARM based JDK 8 from Azul

We need to get a version of JDK 8 that works on the ARM based M1 Mac, Azul provide just what we need. At the link below, enter the following if the link doesn't populate it for you.

Java Version - Java 8 (LTS)
Operating System - macOS
Architecture - ARM 64-bit
Java Package - JDK

Download the .dmg file here
https://www.azul.com/downloads/?version=java-8-lts&os=macos&architecture=arm-64-bit&package=jdk

Install the .dmg file

Set JAVA_HOME environment variable

Now you need to set the JAVA_HOME environment variable to point at our new JDK 8 install. This is the environment variable that Maven looks for.
To add the environment variable, you need to add it to your zsh profile. This can be done by adding the following line to your .zshrc file.
The .zshrc file should be located in home directory.
You can navigate to it via

# Navigate to directory
cd ~
# Editing the file
vim .zshrc

Add the following line to the file and then save

export JAVA_HOME=/Library/Java/JavaVirtualMachines/zulu-8.jdk/Contents/Home/jre

Now restart your terminal

That's it!

When running Maven from your terminal then now it will use JDK8

YYYY vs yyyy - The day the Java Date Formatter hurt my brain

Shane McGowan — Wed, 09 Sep 2020 16:36:13 +0000

Intro

Dates in programming are hard. The ISO-8601 Date standard made them easier but to be entirely honest I'm not ISO-8601 Certified so I'm not very good at my job. What I do know though is the very important difference between YYYY and yyyy when formatting dates.

The Difference between y and Y

According to the DateTimeFormatter Java Docs (which implements the ISO-8601 specification)

y (lowercase) is year
Y (uppercase) is 'week-based-year'.

This difference will cause your code to work perfectly fine, except for when dealing with dates at the very end of some years.

Here is an example that I had the absolute PLEASURE of dealing with last year. For the date 31/12/2019 (December 31st 2019), yyyy will output 2019 but YYYY will output 2020. The reason for this is the week that the 31st of December falls in technically is the first week of 2020. This issue can be a pain to notice and debug.
In my case, 31/12/2019 was being sent from the frontend, being stored correctly in the DB, but was turning into 31/12/2020 when being returned and no one had any idea why. Our default JSON date formatter was the culprit, using YYYY where it should have been using yyyy (some clumsily copied and pasted quick solution by myself ofcourse).

Example

Declare formatters

// y (Lowercase) 
DateTimeFormatter formatteryyyy = DateTimeFormatter.ofPattern("yyyy-MM-dd");
// Y (Uppercase)
DateTimeFormatter formatterYYYY = DateTimeFormatter.ofPattern("YYYY-MM-dd");

When converting from Date to String

// Contains value from Database (December 31st 2019) 
LocalDateTime dateTime;

// String value will be 2019-12-31
String yyyy = dateTime.format(formatteryyyy);

// String value will be 2020-12-31
String YYYY = dateTime.format(formatterYYYY);

When convert from String to Date

// Actual date value will be 2020-12-31
LocalDateTime parsedDateyyyy = LocalDateTime.parse("2020-12-31", formatteryyyy); 

// Actual date value will be 2019-12-31
LocalDateTime parsedDateYYYY= LocalDateTime.parse("2020-12-31", formatterYYYY);

Conclusion

In 99% of use cases, the following is true:

yyyy good
YYYY bad

How to use different SSH Keys for different Bitbucket (git) Repositories

Shane McGowan — Sun, 02 Aug 2020 13:20:26 +0000

Bitbucket doesn't allow you to use the same SSH Key on more than one account. This means if you have more than 1 account but need to access the repositories on both (in my case a work account and a personal account) you will need to configure your SSH agent to allow you to choose which SSH Key to use when cloning over SSH.

Navigate to your SSH Directory

cd ~/.ssh

Ensure SSH Agent is running

eval $(ssh-agent)

Create your SSH Keys

# Run the following replacing EMAIL_ADDRESS with the email address associated with your bitbucket account
ssh-keygen -t rsa -b 4096 -C "EMAIL_ADDRESS"

# When prompted to enter a file name, enter a name to help you differentiate your two keys
Enter file in which to save the key (/c/Users/shane/.ssh/id_rsa): key-1

(optional) Remove previous SSH Keys for your SSH Agent (this does not delete the actual key from your ~/.ssh directory)

ssh-add -D

Add your newly generated SSH Keys to your SSH Agent

ssh-add ~/.ssh/key-1
ssh-add ~/.ssh/key-2

Check that your SSH Keys have been added

ssh-add -l

# Sample output
4096 SHA256:Mo+oiomJASfjlksc6Qj0KcQpUXRVpyvsEIHdXNYDL1c user@website1.com (RSA)
4096 SHA256:6Jt908009upoASFjjkljsflkj9iaGebl7pNr6vuezPI user@website2.com (RSA)

Create your SSH Config file

touch config

The format of our SSH Config

Host bitbucket-key-1 # Friendly name
  HostName bitbucket.org # The server we opening the SSH connection with
  User git # The SSH user (which for bitbucket is git eg. git@bitbucket.org)
  IdentityFile ~/.ssh/id_rsa # The private key file
  IdentitiesOnly yes # Tells SSH to only use keys provided by IdentityFile above

Create your different SSH Configs

# Bitbucket - SSH Key 1
Host bitbucket-key-1
  HostName bitbucket.org  
  User git
  IdentityFile ~/.ssh/key-1-id_rsa
  IdentitiesOnly yes

# Bitbucket - SSH Key 2
Host bitbucket-key-2
  HostName bitbucket.org
  User git
  IdentityFile ~/.ssh/key-2-id_rsa
  IdentitiesOnly yes

Important At this point, reload your terminal

Now when cloning via SSH we replace the usual host name (bitbucket.org) with our new "friendly" name

# Usual format
git clone USER@HOST:ACCOUNT_NAME/REPOSITORY_NAME.git
# Example
git clone git@bitbucket.org:username/repository.git

# Format using our new SSH Host config (replace bitbucket.org with the user friendly host name from our .config file)
git clone git@bitbucket-key-1:username/repository.git

RxJS Unsubscribe patterns with Angular

Shane McGowan — Fri, 03 Jul 2020 17:08:04 +0000

RxJS Observables are classsss (if you know how to use them) but there are quite a few common issues people encounter. If you don't use them correctly you can end up with memory leaks. If you don't use them efficiently you can end up with a lot of unnecessarily verbose code.

How to get memory leaks

In RxJS, each time you subscribe to an Observable or Subject, you then need to unsubscribe. If you don't unsubscribe, the subscription will exist in memory and any time the subject emits a value, the logic in the subscription will run.

export class MemoryLeakComponent {

  // Our subject that we will subscribe to
  subjectA$: Subject<number> = new Subject<number>();

  constructor(){
    // Create your memory leaks
    this.subjectA$.subscribe(value => { 
      // logic goes here ...
    });
    this.subjectA$.subscribe(value => {
    // logic goes here ...
    });
    this.subjectA$.subscribe(value => {
    // logic goes here ...
    });
    this.subjectA$.subscribe(value => {
    // logic goes here ...
    });
  }

}

When you navigate away from this component and then navigate back, the subscriptions still exist and 4 more subscriptions will be added upon each return to this component. If you had, for example, subscribed to a Subject from an injected service, the logic in your subscription would run in the background any time a value was emitted from the Subject, even though the instance of the component it was relating to no longer exists. This can lead to memory leaks and performance issues.

To avoid this, you need to unsubscribe which comes with it's own caveats.

How to end up with unnecessarily verbose code

export class VerboseSubscriptionComponent implements OnDestroy {

  // Our subject that we will subscribe to
  subjectA$: Subject<number> = new Subject<number>();

  // The references we will use for our subscriptions;
  subscriptionA: Subscription;
  subscriptionB: Subscription;
  subscriptionC: Subscription;
  subscriptionD: Subscription;

  constructor(){
    // Create our verbose subscriptions
    this.subscriptionA = this.subjectA$.subscribe(value => { 
      // logic goes here ...
    });
    this.subscriptionB = this.subjectA$.subscribe(value => { 
      // logic goes here ...
    });
    this.subscriptionC = this.subjectA$.subscribe(value => { 
      // logic goes here ...
    });
    this.subscriptionD = this.subjectA$.subscribe(value => { 
      // logic goes here ...
    });
  }

  ngOnDestroy(){
    // Manually unsubscribe from each subscription
    this.subscriptionA.unsubscribe();
    this.subscriptionB.unsubscribe();
    this.subscriptionC.unsubscribe();
    this.subscriptionD.unsubscribe();
  }
}

This solves the memory leak issue but leaves room for error and is very verbose if we have a large amount of subscriptions. If at any point one of our subscripton variables is unsubscribed from or if it is never actually assigned to, when unsubscribe() is called in ngOnDestroy() it will error and break our app.

Below are some solutions that completely avoid this issue.

A solution involving (wo)man's best friend; LOOPS!

We can create an Array<Subscription> to store all our subscriptions. Then we itterate over the array in the ngOnDestroy() method. With this solution, our code is much less verbose, we don't need to worry about keeping track of individual subscriptions and which one has or hasn't been unsubscribed from.

export class LoopSubscriptionComponent implements OnDestroy {
  // Our subject that we will subscribe to
  subjectA$: Subject<number> = new Subject<number>();

  // An array to hold our subscriptions
  subscriptions: Array<Subscription> = new Array<Subscription>()

  constructor(){
    // Add our subscription to
    this.subscriptions.push(
      this.subjectA$.subscribe(value => { 
        // logic goes here ...
      })
    );
  }

  ngOnDestroy(){
    // We loop our subscriptions array and unsubscribe
    this.subscriptions.forEach(subscription => subscription.unsubcribe());
  }

}

This is the solution I used to use when I thought I was really smart and cool. I have since been humbled and use the below, superior, solution.

A better solution involving the `takeUntil()` pipeable operator

Using the takeUntil() pipeable operator, we no longer need to call unsubscribe() on each individual subscription. This operator takes an observable as a paramater, and when a value is emitted from that observable, it will gracefully close the subscription is is applied to.

export class TakeUntilComponent implements OnDestroy {
  // Our magical observable that will be passed to takeUntil()
  private readonly ngUnsubscribe$: Subject<void> = new Subject<void>();

  // Our subject that we will subscribe to
  subjectA$: Subject<number> = new Subject<number>();

  constructor() {
    this.subjectA$
      .pipe(takeUntil(this.ngUnsubscribe$))
      .subscribe(value => {
      // logic goes here ...
    });
  }

  ngOnDestroy(){
    // Emit a value so that takeUntil will handle the closing of our subscriptions;
    this.ngUnsubscribe$.next();
    // Unsubscribe from our unsubscriber to avoid creating a memory leak
    this.ngUnsubscribe$.unsubscribe();
  }

}

Outro

Hopefully you learned something new here! I am by no means an expert but I write this hoping you can skip the first 3 itterations of learning and jump straight into the best pattern to work with (best being my opinion ofcourse).

If you know of a better pattern or solution, or if there are any issues with what I have written above, please let me know!

And most importantly, have a nice day ♥

Working with Enums in Angular components

Shane McGowan — Tue, 28 Apr 2020 23:47:34 +0000

This is a short guide on using Enums in an Angular application.
Below you will see how to:

Reference an Enum in your component.html templates
Itterate over an enum using *ngFor and the keyvalue pipe
Conditionally show content using an Enum and *ngIf
Get all the values of an enum as an Array<sting>

Intro

You can skip the next block of text if you just want to get the actual details (I respect that)

I love using Enums in TypeScript as I am a terrible developer with a terrible memory and let my editor's auto complete do 80% of my job. Enums let you avoid using strings and having to remember what string values you used. They also allow you to lock down the values a property can be, so that a user can't just submit any value they want. So if you aren't using them, start using them, and if you are already using them, use them more, use them to a fault. Be the Enums you want to see in the world.

Example use of an enum for those unfamiliar

// This is our PropertyType enum
// We give each value a string value otherwise PropertyType.House would return 0, Property.Apartment would return 1, and so on
enum PropertyType {
  House = 'House',
  Apartment = 'Apartment',
  Flat = 'Flat',
  Studio = 'Studio'
}

// Our class which has a 'type' property.
// We want to lock type down to a set of predefined values
class Property {
  constructor(
    public monthlyPrice: number,
    public type: PropertyType
  ) { }
}

// Creates a property successfully
const property = new Property(1250, PropertyType.Apartment);

// Will display an error from our linter and in the Angular CLI
const property = new Property(1250, PropertyType.RANDOM_VALUE);

Enums can be used in your Angular templates. This is handy for situations like avoiding a hard coded set of values for a dropdown menu or displaying different content based on your component state. In my opinion, this pairs very nicely with reactive forms.
To make an Enum accessible in your Angular template you need to first store it in a variable in our component.ts file. For this example, we will create a simple reactive form to create a Property

// Declaring our Enum. The Enum could also be imported from another file if needed 
enum PropertyType {
  House = 'House',
  Apartment = 'Apartment',
  Flat = 'Flat',
  Studio = 'Studio'
}

@Component({
  selector: 'app-property-component',
  templateUrl: './property.component.html'
})
export class PropertyComponent{

  // Make a variable reference to our Enum
  ePropertyType = PropertyType;

  // Build our form
  form: FormGroup;
  type: FormControl;
  price: FormControl; // This is only here to make the form look more l3g1t

  constructor(private formBuilder: FormBuilder){
    this.form = this.formBuilder.group({
      type: [null, [Validators.required]],
      price: [0, [Validators.required]]
    });

    this.type = this.form.controls.type as FormControl;
    this.price = this.form.controls.price as FormControl;
  }
}

Then in our property.html template, we can utilize our Enum as follows. We will use the keyvalue pipe. This takes our PropertyType enum (referenced as ePropertyType) and turns it into a KeyValue array, which we can iterate over with *ngFor. As we declared our PropertyType with a string value (ie. Apartment = 'Apartment') the KeyValue.key and KeyValue.value will both contain the string value of the enum so we can use either.

We then can use our Enum as part of an *ngIf to conditionally display a message.

<form [formGroup]="form">
  <!-- Property type form control -->
  <label for="propertyType">Property Type</label>
  <select id="propertyType" [formControl]="type">
    <option [ngValue]="null">Select one...</option>
    <option *ngFor="let type of ePropertyType | keyvalue" [ngValue]="type.value">{{type.value}}</option>
  </select>

  <!-- Property price form control -->
  <label for="propertyPrice">Property Price</label>
  <input id="propertyPrice" class="form-control" type="number" [formControl]="price" placeholder="Street...">

</form>

<!-- Conditionally display a message if a certain PropertyType is selected (or not selected) -->
<ng-container *ngIf="type.value !== ePropertyType.House">
Wouldn't you prefer a nice garden?
</ng-container>

How to get an array of strings from an Enum

A nice little trick to get an array of strings (string[], or Array<string> if you're a cool boi like myself) from an Enum is to use use Object.keys and Array.filter

// Declare your enum
enum PropertyType {
  House = 'House',
  Apartment = 'Apartment',
  Flat = 'Flat',
  Studio = 'Studio'
}

/* Get an array of keys, filtering out number values
*  as the enum object itself is as follows
*  { 0: 'House', 1: 'Apartment' ...}
*/
const propertyType: Array<string> = Object.keys(PropertyType).filter(key => isNaN(+key));

Conclusion

Enums are lit, use them more often.

Angular - How to pass arrays via Query Parameters

Shane McGowan — Mon, 13 Apr 2020 15:36:52 +0000

This is a quick guide on how to pass an array of values via query string in Angular. This is working in Angular 9+ as of 13/04/2020 but will most likely work just fine for any version from Angular 2+.

In the example below we will create an array of values in ComponentA and pass them to ComponentB via navigation. This method will work for a direct navigation to ComponentB via a link and also via programmatic navigation with the Angular router.

The short version is: JSON.stringify your array and pass it as query param, thend JSON.parse it back into an array after navigation

Component A - Passing the array

export class ComponentA {

  // We need access to the Angular router object to navigate programatically
  constructor(private router: Router){}

  navigateWithArray(): void {
    // Create our query parameters object
    const queryParams: any = {};
    // Create our array of values we want to pass as a query parameter
    const arrayOfValues = ['a','b','c','d'];

    // Add the array of values to the query parameter as a JSON string
    queryParams.myArray = JSON.stringify(arrayOfVAlues);

    // Create our 'NaviationExtras' object which is expected by the Angular Router
    const navigationExtras: NavigationExtras = {
      queryParams
    };

    // Navigate to component B
    this.router.navigate(['/componentB'], navigationExtras);
  }

}

Component B - parsing the array

export class ComponentB {
  // Where we will be storing the values we get from the query string
  arrayOfValues: Array<string>;

  // We need use the ActivatedRoute object to get access 
  // to information about the current route
  constructor(private activatedRoute: ActivatedRoute){

    // Get the query string value from our route
    const myArray = this.activatedRoute.snapshot.queryParamMap.get('myArray');

    // If the value is null, create a new array and store it
    // Else parse the JSON string we sent into an array
    if (myArray === null) {
      this.arrayOfValues = new Array<string>();
    } else {
      this.arrayOfValues = JSON.parse(myArray));
    }
  }

}

Enjoy

Using Postman with Java Spring and CSRF Tokens

Shane McGowan — Tue, 07 Apr 2020 16:40:42 +0000

Java Spring will return a 403 Forbidden if any request besides a GET request is missing a Cross Site Request Forgery Token (CSRF Token) in the X-XSRF-TOKEN Header. Here is how to fix that issue when using Postman. I have seen people online suggest that you disable CSRF Tokens but please don't do that. That is silly. Those people are sily.

Creating an environment

We need to create an environment in which to store our CSRF Token

In the top right of Postman, click the cog.
In the Pop Up window, Click Add
Enter an appropriate Environment Name
Enter xsrf-token in the first column.
Click Add in the bottom right corner

Ensure your environment is selected in the drop-down in the top right.

Getting the CSRF Token

GET requests do not require a CSRF Token to be allowed through our SpringSecurityConfig

Create a GET request
Navigate to the Tests tab
Enter pm.environment.set("xsrf-token", decodeURIComponent(pm.cookies.get("XSRF-TOKEN")));

Now when you call this endpoint in Postman, your CSRF Token will be stored in your environment variables.

Using the CSRF Token

Go to your request that requires the CSRF Token
Navigate to the Headers tab
Enter a key of X-XSRF-TOKEN and a value of {{xsrf-token}}, the {{xsrf-token}} value will be populated from our Environment we created earlier.

Your request should now be from from CSRF errors

Things to watch out for

Be sure you have actually selected an Environment. I have forgotten to do this several times.
Be sure to call the GET request again to populate the value in case it has become invalid or has expired.
Have a nice day

How to create an AWS S3 hosted Angular App with a Custom Domain, HTTPS and Continuous Deployment

Shane McGowan — Mon, 16 Dec 2019 01:54:49 +0000

A guide on how to host an Angular app in AWS S3 with a custom domain, HTTPS and continuous deployment from a GitHub repo. (accurate as of 16th of December 2019 common era)

Requirements

A GitHub Account
A GitHub Repo containing an Angular App created in the root directory
An AWS Account
A domain name with the ability to update it's DNS settings

Basic Static Site Setup

S3

Create a bucket with site name (example.com)
Go to the 'Properties' tab
Select 'Static Website'
Select 'Use this bucket to host a website' and enter index.html for both Index document and Error document (for single page app)
Manually add an index.html file to the bucket for testing purposes
Make note of the Endpoint, we will be needing this later when setting up our CDN.
Go to the 'Permissions' tab
Select 'Bucket Policy'
Copy the following json replacing BUCKET_NAME with the name of the bucket (example.com).

{
    "Statement": [
        {
            "Sid": "AllowPublicRead",
            "Effect": "Allow",
            "Principal": {
                "AWS": "*"
            },
            "Action": [
                "s3:GetObject"
            ],
            "Resource": [
                "arn:aws:s3:::BUCKET_NAME/*"
            ]
        }
    ]
}

Note: The policy found in bucket-policy.json will cause all objects in this bucket to be publicly available by default, this is required later by our deployment script as normally objects are made private by default. If you do not do this, your site will not be accessible.

Create bucket with site name and subdomain (www.example.com)
Go to 'Properties' tab
Select 'Static Website'
Select 'Redirect requests' and choose 'http' for the protocol

Custom Domain and HTTPS

Route 53 and DNS

Click 'Create Hosted Zone' and enter your domain example.com with type 'Public Hosted Zone'
Go to the Domain Registrar where you got your domain (eg hover.com)
Copy the ns values from your newly created hosted zone to nameserver settings for your domain

AWS Certificate Manager (SSL Certs)

Ensure the us-east-1 region is selected as Cloud Front needs this (top right of dashboard). More info on this here https://aws.amazon.com/certificate-manager/faqs/
Add your domain example.com and your domain with the 'www' subdomain www.example.com then click 'Next'
Select 'DNS Validation' then click 'Next'
Click 'Review'
Click 'Confirm and Request'
Expand the area for each domain and click 'Create record in route53'
Click 'Continue'

AWS Cloud Front (CDN)

Click 'Create Distribution'
Under 'Web' click 'Get Started'
Under 'Origin Domain Name' enter the S3 Site Endpoint you made a note of earlier. It should be in the format bucket.name.s3-website-aws-region.amazonaws.com
Under 'Viewer Protocol Policy', select 'redirect http to https'
Under 'Price class' select 'use only US, Canada and Europe'. Users outside these regions will experience more latency but this is cheaper
Under 'Alternate Domain Names (CNAMEs)' enter your apex domain (example.com) and then on a new line enter your domain with the 'www' subdomain (www.example.com)
Under 'SSL Certificate' select 'Custom SSL Certificate' and choose the Certificate we just created in AWS Certificate Manager
Under 'Default Root Object' enter 'index.html'
Click 'Create Distribuion'

Note: It will take 15 to 20 minutes to create your distribution, be patient and wait before moving on to the next step.

Note: Your first 1,000 invalidation path requests each month are free, but invalidations after this will cost $0.005 per additonal path invalidated.

Note: You can have a max of 3,000 path invalidation requests in progress at once. A wildcard '*' request can invalidate a max of 15 paths at once so if your app contains more than 15 files, you will need to remove each path manually in your deployment script, not using the wild card path.

Back to Route 53

Click 'Hosted Zones'
Click your domain example.com
Click 'Create Record Set' and leave name blank Set 'Alias' to 'Yes' Select 'Alias Target' and select the Cloud Front deployment that we created earlier from the dropdown Click Create
Repeat as above but enter 'www' as the name this time.

Note: This may take several minutes to propogate, I have experienced site without www subdomain working before site with www subdomain. Eventually the www subdomain will work also so be patient.

Your site should now be live under https://example.com and https://www.example.com

Continuous Delivery

AWS Code Pipeline

Navigate to AWS Code Pipeline
Enter a name for your pipeline
Select 'New service role', the default name is fine
Ensure 'Allow AWS CodePipeline to create a service role so it can be used with this new pipeline' is checked
Click 'Next'
In the 'Source provider' dropdown, select 'GitHub'
Click 'Connect To GitHub' and allow AWS access to your GitHub account
In the 'Repository' dropdown, select your repo
In the 'Branch' dropdown, select your desired branch
Under 'Change detection options' ensure 'GitHub webhooks' is selected
Click 'Next'
In the 'Build provider' dropdown, select 'AWS CodeBuild'
In the 'Region' dropdown, select your desired AWS region
Under 'Project name', click 'Create project'. This will bring you to a popup window.
In the Popup Window, under 'Project Name' enter a desired name
Under 'Environment image' select 'Managed image'
Under 'Operating System' select 'Ubuntu'. This includes the language runtimes we need for building our Angular App
Under 'Runtimes' select 'Standard'
Under 'Image' select 'aws/codebuild/standard:3.0'. This contains NodeJS version 12 which we want.
Under 'Image version' select 'Always use the latest image for this runtime version'
Under 'Environment Type' select 'Linux'
Under 'Service role' select 'New Service Role' and enter an appropriate name (for example 'codebuild-service-role-s3-angular')
Under 'Build specifications' select 'User a buildspec file'
Click 'Continue to CodePipeline'
You should be brought back to CodePipeline
Click 'Next'
Click 'Skip deploy stage' as we covered this in our build pipeline.
Click 'Create pipeline'

AWS CodeBuild

Create a buildspec.yaml file in the root of your repo. This will be used during the CodeBuild part of our CD pipeline to build your angular app and copy it to the root of the S3 bucket.

Copy the following to the buildspec.yaml file.
Replace @SITE_NAME with your site name (example.com).
Replace @ANGULAR_APP_NAME with the name of the folder which contains your angular app after running ng build which can be found inside the dist folder for default angular apps
Replace @ANGULAR_APP_ENVIRONMENT with the build environment for your angular app, prod being the default value
Replace @CLOUDFRONT_DISTRIBUTION_ID with the ID of the cloudfront distrubtion you created earlier. This can be found in your Cloudfront Dashboard.

version: 0.2

env:
  variables:
    S3_BUCKET: "@SITE_NAME"
    APP_NAME: "@ANGULAR_APP_NAME"
    BUILD_ENV: "@ANGULAR_APP_ENVIRONMENT"
    CDN_DISTRIBUTION_ID: "@CLOUDFRONT_DISTRIBUTION_ID"

phases:
  install:
    runtime-versions:
      # NodeJS included in the docker image
      nodejs: 12
    commands:
      # Install node dependancies.
      - npm install

  build:
    commands:
      # Builds Angular application.
      - node ./node_modules/@angular/cli/bin/ng build --$BUILD_ENV

  post_build:
    commands:
      # Clear S3 bucket.
      - aws s3 rm s3://$S3_BUCKET --recursive
      # Copy files from dist to S3
      - cd dist
      - aws s3 cp $APP_NAME s3://$S3_BUCKET --recursive
      # Begin cloudfront invalidation
      - aws cloudfront create-invalidation --distribution-id $CDN_DISTRIBUTION_ID --paths "/*"

CodePipeline IAM Role Permissions

An IAM Role will have been created for both Code Pipeline and CodeBuild. You need to give the CodeBuild role the permission to access S3 and Cloudfront

Go to the IAM Dashboard
Click on 'Roles'
In the table, click on the role that was created during the CodeBuild in the previous step.
Click 'Attach Policy'
Enter 'S3' into the search bar and click the checkbox beside 'AmazonS3FullAccess'.
Enter 'CloudFront' into the search bar and click the checkbox beside 'CloudFrontFullAccess'.
Click 'Attach Policy' to add the policy to this role.

The End

You did it, good work friend ❤️

DEV Community: Shane McGowan

Path Aliases in TypeScript (with Vite or Webpack bundlers)

Path Aliases with a bundler

Vite

Webpack

Configure M1 Mac to use JDK8 with Maven

Install Homebrew

Install Maven via Homebrew

Install ARM based JDK 8 from Azul

Set JAVA_HOME environment variable

That's it!

YYYY vs yyyy - The day the Java Date Formatter hurt my brain

Intro

The Difference between y and Y

Example

Declare formatters

When converting from Date to String

When convert from String to Date

Conclusion

How to use different SSH Keys for different Bitbucket (git) Repositories

RxJS Unsubscribe patterns with Angular

How to get memory leaks

How to end up with unnecessarily verbose code

A solution involving (wo)man's best friend; LOOPS!

A better solution involving the takeUntil() pipeable operator

Outro

Working with Enums in Angular components

Intro

Example use of an enum for those unfamiliar

How to get an array of strings from an Enum

Conclusion

Angular - How to pass arrays via Query Parameters

Component A - Passing the array

Component B - parsing the array

Enjoy

Using Postman with Java Spring and CSRF Tokens

Creating an environment

Getting the CSRF Token

Using the CSRF Token

Things to watch out for

How to create an AWS S3 hosted Angular App with a Custom Domain, HTTPS and Continuous Deployment

Requirements

Basic Static Site Setup

S3

Custom Domain and HTTPS

Route 53 and DNS

AWS Certificate Manager (SSL Certs)

AWS Cloud Front (CDN)

Back to Route 53

Continuous Delivery

AWS Code Pipeline

AWS CodeBuild

CodePipeline IAM Role Permissions

The End

A better solution involving the `takeUntil()` pipeable operator