Creating an Image thumbnail generator using Vue, AWS, and Serverless (Part 1) — The Setup

Part 1 — The Setup (you’re here)
Part 2 — The Upload
Part 3 — The Lambda
Part 4 — The Finish

Here’s the repo containing all the code for the finished project

Intro

Woah, buzzwords. In this tutorial we’ll create a basic web application that uploads an image to an Amazon Web Services S3 bucket which will trigger an AWS Lambda function that will create several thumbnail images at different sizes. Once the images have been created, they’ll be put into a different S3 bucket and rendered! We’ll be using the Serverless framework to easily setup, manage, and deploy our AWS resources and lambda function. We’ll be using Vue on the front-end to build several components.

This might sound like overkill for such a simple application, but it will teach you the foundations of building a modern full-stack application using JavaScript.

Prerequisites

• Node 6.5 or higher
• An AWS account. You can create a free-tier account here.
• Serverless CLI v1.9.0 or later. You can run npm install -g serverless to install it.
• Provide Serverless with your AWS Credentials. Here’s a walk-through and Video.
• You’ll probably want to install the AWS CLI as well. Installation varies based on operating system. Documentation.

Setup

The Client

We’ll start by using the Vue-CLI to create a new application for us. If you don’t have the Vue-CLI then run npm install -g vue-cli from your terminal.

Create a new directory for this project. Inside the root directory, run vue init webpack client in your terminal. There will be a few prompts to enter in the project name and author. Make sure you type Y to install vue-router and Y for es-lint (I prefer to use the Standard set of rules which is the default). You can skip setting up unit tests.

This will create a client directory inside the root directory of this project. Next, run the following:

cd client/
npm install
npm run dev

Webpack should bundle some stuff up and a new browser tab/window should open to localhost:8080 with the default Vue application! We’ll keep this for now. Next, lets use Serverless to deploy this application to an S3 bucket!

Serverless

Serverless is a tool that will help us setup and manage our AWS resources. First, we’ll need to create a serverless.yml file which will act as a template for our application. The initial file will have enough to create an S3 bucket that will host our web application, but we’ll be adding more to it later in this tutorial.

Here’s what the initial serverless.yml file should look like.

Please not that on 4 you’ll need to change <your-bucket-name-here> to a unique bucket name.

When we run our deploy command through the serverless CLI, it will parse this template and, using AWS CloudFormation, create an S3 bucket to host our web application (technically it creates a second bucket to store the compiled template as JSON but that isn’t important).

To deploy, we simply run:

sls deploy

And you should see something similar to this:

Serverless: Packaging service...
Serverless: Uploading CloudFormation file to S3...
Serverless: Uploading artifacts...
Serverless: Validating template...
Serverless: Updating Stack...
Serverless: Checking Stack update progress...
.........
Serverless: Stack update finished...

And then some details about the service you created. Now, you can log into the AWS S3 console and see your newly created bucket.

bucketzzzzzz

But, the first bucket is empty. Yes, silly, because we didn’t actually put any files in there yet. Lets bundle up our default Vue application and then deploy it to our S3 bucket.

First, in your terminal run this from the root directory of your project:

cd client/
npm run build

This will create a dist/ directory inside of the client directory containing all the files we want to put into S3. Now, you could upload the index.html file and the static directory into S3 using the AWS S3 console, but that’s cheating. Instead, we’ll use the AWS CLI that you (hopefully) installed as part of the prerequisites.

Run this from the client directory

aws s3 sync dist/ s3://<your-bucket-name> --delete

This will sync whatever is currently in distribution directory (your compiled Vue application) with whats in your S3 bucket (nothing, the first time). We add the --delete flag because when webpack compiles our files, it adds a hash to the filename if they have changed. We want to delete the old files and replace them with the new files. If not, every time we deploy the application to S3 we’ll get a new set of about 8 files which will unnecessarily add up.

Lastly, lets make the deploy command an npm script so all we have to do is type npm run deploy and it will build our application and sync it with S3.

In the package.json file, add the following on line 12, right after the build script.

"deploy": "npm run build && aws s3 sync dist/ s3://<your-bucket-name-here>"

The scripts object should look like this:

remember to replace <your-bucket-name-here> with your actual bucket name

Awesome. Now, you should be able to see your basic Vue application in the wild. In the S3 Console, click on the name of your bucket, then the properties tab, then the Static Website Hosting box. You should see something similar:

The endpoint is where your live application lives. Click that link and presto, you’ve got a live application.

In the next part, we’ll modify our Vue application to allow us to upload a file to a new S3 bucket.

Ramsay is a full-stack JavaScript developer for a data analytics company in Springfield, VA. You can follow him on twitter or github. He likes when you do that.