My thoughts on software engineering

Typescript and the Beanstalk

Typescript and the Beanstalk

Deploying typescript apps to Beanstalk with CircleCI

Before we get started, note that this post assumes that you have your CircleCI/Beanstalk integration working already. The reason for this is that setting that up itself is a very long-winded process. I may make a video about it some time, but in the mean time there is a very good medium post that explains how to set that up.

Also, a big special thanks to Rokt33r for the example repo that I shamelessly copied everything from 🙂

Why is this so different?

So, you may have seen examples of deploying node apps to Beanstalk and even got them working, but now you want to deploy a typescript app. You may be wondering how to ship your built files, since just shipping your source code isn’t enough to get it running, unlike plain node.js.

So the key thing to remember is that you deploy your built assets, not your source code. That’s actually true for even plain node apps, but it just so happens that in that case the build and the source is the same.

So, how do you do this? Well, assuming you’ve done the ~~impossible~~ hard bit of setting up AWS, Beanstalk, and CircleCI, the rest is actually quite easy.

Step 1: tsconfig.json

You should have that set up to compile your code. If you already have it, you don’t need to change it, just take a note of what outDir is as you’ll need it. If you don’t have it, or want to see an example, here is one.

Step 2: package.json

You should already have start and build scripts, but if not, here is an example:

"scripts": {
"build": "tsc",
"start": "node dist/index.js"
},

build is the command used to build your software; in this case it’s tsc to compile the typescript down to javascript.

start is how you start your software, obviously this depends on your app but it’s usually something like node dist/index.js. Note that you’re pointing to your compiled js code. The location may not be dist; but it’s whatever you have set as outDir in tsconfig.json.

Step 3: dist step

If you’ve seen the UI for Elastic Beanstalk for AWS, you basically deploy apps to it by uploading .zip files. If you use the command line (eb deploy), it does that for you. What we essentially want to do is to build your distribution .zip file to upload. How? Essentially by zipping your dist directory.

This will actually generate dist/.zip – that’s because when you run it manually, $npm_package_name is not set. Feel free to look at that zip file and verify that all your built javascript is in there. If it’s correct, delete the file, we’ll tell npm to generate it instead in the next step!

Step 4: Set up the npm dist script

Really simple, just add another script to your package.json. For example:

Now you can run your dist step by doing npm run dist! If you run that, you will now have a zip file in your dist folder that is actually named after your app, and you can open it and again verify that you have all your compiled javascript there.

Step 5: Ammend CircleCI configuration

Now we need to tell CircleCI to run npm run build and npm run dist. This will depend on your configuration, but basically edit .circleci/config.yml and make sure that npm run build and npm run dist is ran before eb deploy. For example, I have the following:

This will install all my dependencies, compile my app down to javascript, run npm run dist to generate the zip file, and deploy to Beanstalk. Hang on, though, how do we tell Beanstalk to use that zip file?

Step 6: Beanstalk configuration

Create or ammend your .elasticbeanstalk/config.yml file. In there, you need to add the following:

deploy:
artifact: dist/YOUR-APP-NAME.zip

The name of the zip should be the same as your npm package name if you have set up the dist.sh script to use $npm_package_name. You can always manually run npm run dist and then see the name of the file it generates.

If you don’t have an elasticbeanstalk/config.yml file, here is a simple one that works for me:

You should change your branch names and environnment names to match your deployed branches and your Beanstalk environment names respectively, and you can change the region and platform if you ned to. The important thing is for the artifact to be correct, this will tell beanstalk to deploy your zip file

That’s it!

If you set up all this correctly, circleci should now be deploying your zip file to beanstalk. You can check the CircleCI build information and verify that it runs tsc, zips up your files, and deploys to Beanstalk. Here’s what mine looks like for comparison: