Serverless-side rendering with Vue.js, Nuxt.js and AWS Lambda

That’s a mouthful of a title right there. Don’t let it scare you away. What it boils down to is rather simple.

We want the best of both worlds. The SEO boost server-side rendering provides, and the speed of a Single Page Application. All this while hosted basically for free in a serverless environment on AWS Lambda.

TL;DR

Here’s a quick overview of what we’ll be building for you to get up to speed. Feel free to jump to the step that interests you the most. Don’t mind me guilt tripping you into reading the whole thing… stares guilt trippingly

What’re we building?
Configure and install dependencies
Build the app with the Serverless Framework and Nuxt.js
Deploy the app to AWS Lambda
Test the app with Dashbird

Note: The code we will write is already on GitHub if you need further reference or miss any steps, feel free to check it out.

What’re we building?

Well, first thing’s first. We want a super fast Single Page Application. But, this usually comes with a cost. Lousy SEO capabilities. That won’t do, meaning we also want the app to have server-side rendering. Okay, sounds simple. We’ll grab Nuxt.js, which is a framework for creating universal Vue.js applications, and configure it to server-side render our pages.

To accomplish this we need to spin up a simple Express server and configure the Nuxt renderer to serve files through Express. It is way simpler than it sounds.

However, the key takeaway here is the word server. Ew, we don’t like mentioning that word. So, what do we need to do? Well, deploy this whole application to AWS Lambda! It is a tiny Node.js instance after all.

But this raises a concern. How to monitor and debug it if everything goes horribly wrong? I usually have Dashbird opened in a separate tab to monitor all my serverless resources in real time.

Phew, with that out of the way, let’s get crackin’!

Configure and install dependencies

As always, we’re starting with the boring part, setting up the project and installing dependencies.

1. Install the Serverless Framework

In order for serverless development to not be absolute torture, go ahead and install the Serverless framework.

$ npm i -g serverless

Note: If you’re using Linux or Mac, you may need to run the command as sudo.

Once installed globally on your machine, the commands will be available to you from wherever in the terminal. But for it to communicate with your AWS account you need to configure an IAM User. Jump over here for the explanation, then come back and run the command below, with the provided keys.

$ serverless config credentials \ 
    --provider aws \ 
    --key xxxxxxxxxxxxxx \ 
    --secret xxxxxxxxxxxxxx

Now your Serverless installation knows what account to connect to when you run any terminal command. Let’s jump in and see it in action.

2. Create a service

Create a new directory to house your Serverless application services. Fire up a terminal in there. Now you’re ready to create a new service.

What’s a service you ask? View it like a project. But not really. It’s where you define AWS Lambda functions, the events that trigger them and any AWS infrastructure resources they require, all in a file called serverless.yml.

Back in your terminal type:

$ serverless create --template aws-nodejs --path serverless-side-rendering-vue-nuxt

The create command will create a new service. Shocker! But here’s the fun part. We need to pick a runtime for the function. This is called the template. Passing in aws-nodejs will set the runtime to Node.js. Just what we want. The path will create a folder for the service.

3. Install npm modules

Change into the serverless-side-rendering-vue-nuxt folder in your terminal. There should be three files in there, but for now, let’s first initialize npm.

$ npm init -y

After the package.json file is created, you can install a few dependencies.

$ npm i axios nuxt express serverless-http serverless-apigw-binary

These are our production dependencies, and I’ll go into more detail explaining what they do a bit further down. Apart from them, we need one more as a development dependency. This one will let us tie a domain to our endpoints. Sweet!

$ npm i --save-dev serverless-domain-manager

Now, your package.json should look something like this.

{
  "name": "serverless-side-rendering-vue-nuxt",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": { // <= add these scripts
    "dev": "nuxt",
    "deploy": "nuxt build && sls deploy"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "axios": "^0.18.0",
    "express": "^4.16.3",
    "nuxt": "^1.4.2",
    "serverless-apigw-binary": "^0.4.4",
    "serverless-http": "^1.6.0"
  },
  "devDependencies": {
    "serverless-domain-manager": "^2.6.0"
  }
}

We also need to add two scripts, one for running nuxt on our local dev machine and one for building and deploying the app. You can see them in the scripts section of the package.json.

#vue #vue.js #nuxt.js #aws #programming