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

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

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. 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.

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

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

Bootstrap 5 Complete Course with Examples

Bootstrap 5 Tutorial - Bootstrap 5 Crash Course for Beginners

Nest.JS Tutorial for Beginners

Hello Vue 3: A First Look at Vue 3 and the Composition API

Building a simple Applications with Vue 3

Deno Crash Course: Explore Deno and Create a full REST API with Deno

How to Build a Real-time Chat App with Deno and WebSockets

Convert HTML to Markdown Online

HTML entity encoder decoder Online

8 Popular Websites That Use The Vue.JS Framework

In this article, we are going to list out the most popular websites using Vue JS as their frontend framework. Vue JS is one of those elite progressive JavaScript frameworks that has huge demand in the web development industry. Many popular websites are developed using Vue in their frontend development because of its imperative features.

Why Vue CLI? - Vue.js

In this article, I'll show you the reasons behind Vue CLI's creation and take you on a journey through its evolution. This will help you not only appreciate it more but also have a deeper understanding of its possibilities. If you're new to the Vue ecosystem and frontend development you may not have an appreciation yet for how much power a tool like Vue CLI provides.

How to build enterprise Vue.js applications with Nuxt?

Learn How to build enterprise Vue.js applications with Nuxt: Nuxt is a progressive framework based on Vue.js to create modern web applications. It is based on Vue.js official libraries (vue, vue-router and vuex) and powerful development tools (webpack, Babel and PostCSS). Nuxt goal is to make web development powerful and performant with a great developer experience in mind.

Getting started with MDX and Vue.js/Nuxt.js

We will have a look at MDX and how to get started with it in Vue.js/Nuxt.js applications. Markdown, since its introduction to the web, has allowed content creators to have a more simplistic tool to do their authoring in.

Simple shopping cart with Vue.js and Deno.js

Simple shopping cart with Vue.js and Deno.js.