Deploying Angular 2 App to AWS S3 using BitBucket Pipelines

This post will explain how to automate the deployment of your Angular 2 application to an AWS S3 bucket using BitBucket Pipelines.

For the purpose of this post I’ve assumed you already have an AWS S3 bucket configured for hosting an Angular application.

To get things up and running you will need the following:

AWS Access Key Id

AWS Secret Key

AWS S3 Bucket name

Configuring BitBucket Repository

If you are not currently using Pipelines in BitBucket then you will need enable it. You can do this by going to your repository and then:

Settings > Pipelines > Settings > Enable Pipelines

Enabling Pipelines in BitBucket
Enabling Pipelines in BitBucket

Once enabled, you can go to the Environment Variables section and add the following keys:

AWS_ACCESS_KEY_ID

Your AWS Access Key Id (Tick Secured)

AWS_SECRET_ACCESS_KEY

Your AWS Secret Key (Tick Secured)

AWS_BUCKET_TARGET

Your S3 bucket name e.g. my-angular-app

Note: The names of these AWS environment variables are important as the AWS CLI automatically looks for these names for authentication. See this AWS CLI help page for more details.

In the root of your repository you need to have a file called “bitbucket-pipelines.yml” The file should look like this:

Bitbucket Pipelines will load the Docker Image file codingbadger/aws-cli-angular-cli and the run the commands specified in the script section.  The docker image can be found here

In order for the npm and ng build commands to run correctly you have to make sure you are in the right directory so if you’re SPA is not in the root of your repository you will have to change directory first.

The YAML file is also configured to only run on the master branch and to cache the node packages. You can change/remove these options if you want to.

Now when you commit to master BitBucket Pipeline will pick up your commit, check it out on a fresh Docker image, install any npm packages, build your Angular App in prod mode and deploy the dist folder to your AWS S3 bucket.

BitBucket Pipelines Log file
BitBucket Pipelines Log file

Slapper.AutoMapper with Dapper – mapping to spatial types

Slapper.AutoMapper is a really useful mapping tool when using Dapper. I recently needed to convert the spatial datatype SqlGeography from SQL Server to the DbGeography type in Entity Framework.

This is not handled by default in Slapper.AutoMapper and will throw an exception, so this is how to add it.

You need to first create a custom Type Converter.

You then need to register your Type Converter with Slapper:

Then you can happily continue to use Dapper and Slapper.AutoMapper to map your SqlGeography types to .NET types.