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


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.

Image for post
Image for post



The Client

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!


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.

Image for post
Image for post

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:

Image for post
Image for post
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:

Image for post
Image for post

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.

I’m a senior web developer at @Novettasol and senior dad-joke developer at home.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store