Quickstart: Serve static websites serverless

(using serverless and tailwind on AWS lambda)

This small guide will walk you step by step from the installation of your environment to the first small website based on tailwindcss.

Prerequisites

Before we start, we have to install some dependencies. In summary, we need nodejs (npm is normally included), the serverless framework and tailwindcss.

The installer for Node.js is found here. You can just install the most current version.

After installing Node.js we need to check if and what version of npm (the package manager of Node.js) is installed. To do this, we open a terminal (i am using the standard terminal of Mac OSX) and run the following command.

> npm -v

The output should look like this:

> npm -v
6.7.0

In my case, I have the version 6.7.0 of npm.

After checking the version of npm, we can start installing our other dependencies via npm.

To install the serverless framework we just call the following command:

> npm install serverless -g

After some time the installer should tell you, that serverless was installed successfully.

At this point, we can decide if we want to use the full potential of tailwindcss or just the basics. For this small example, we can stick with the basics and just include the CDN-Link into our HTML output later.

If you are using this guide as a precursor for a more complex project, you might want to install the full tailwindcss cli toolchain by invoking the following command:

> npm install tailwindcss — save-dev

The output should look similar to the one from the serverless installation.

At this point our toolchain is set up and we can start building our first serverless app.

Start

To start our first project we create a new dictionary. In my case, I named my project tailwind-sample-project. To do the same, just run the following to commands and you have your own empty project folder.

> mkdir tailwind-sample-project
> cd tailwind-sample-project

Inside the project folder we now create our serverless app from a template. The serverless CLI provides a simple interface to do this. Just run

> serverless create — template hello-world

and you go yourself a ready to go app.

After initializing your project you should see the following files and folders in your project dictionary:

  • handler.js (where your functions life)
  • node_modules (all modules your app uses in context of nodejs)
  • serverless.yml (the config file for the serverless actions)

At this point, only the handler.js and the serverless.yml files are important.

Develop

Let’s have a look at the generated serverless.yml file:

The first thing you see is the service name. This name indicates how to name your service in your AWS Lambda or other FaaS providers dashboard.

For our purposes the hello-world would be perfectly fine, but we want it to be the same as our projects name.

Next we see the provider section of the YML file. This section provides any information for the used provider (default is Amazon WebServices, short AWS) and the runtime (default is nodejs6.10) which is used to start your functions later.

The functions section is the part of the file where it gets interesting. Here are all the different functions defined and how they are called (or not called).

By default the helloWorld function inside our handler.js is defined as helloWorld function that is accessable via the HTTP GET method.

We change this to fit our naming. The file should look after editing like this:

Now we open the handler.js file and modify it to fit the new YML configuration.

To serve static html directly from our function we can just create a new function inside our handler.js that create the HTML as a string.

This code just serves a static string a response. This is only a sample app. The good and more reliable way is to host your static code (the whole frontend application) on a something like AWS S3 (filehosting in AWS) and only have logic inside the functions at your FaaS provider.

Deploy

To deploy our new app, we need a account at one of the differenz FaaS provider. For this article we use AWS, but you are free to choose any other provider for this.

After the creation of a AWS free tier account, we generate a api key via the dashboard (Amazon has a good documentation for that right here).

Right after we got the api key, we can tell the serverless cli how we want to communicate with our FaaS provider.

> serverless config credentials — provider aws — key <APIKEY> — secret <APISECRET>

If the api key and secret are valid, the deployment can start. Just tell the serverless cli, that you want to deploy your app with the following command:

> serverless deploy

After the deployment you should see the endpoint URL in your terminal. If you open that url, you should see the following website:

I hope this small guide helped you creating your first serverless app. In further medium stories I will show you, how to server pages the classical serverless way and how the communication between JavaScript frontend apps and the underlying serverless APIs works.

Until then, I invite you to follow me on Twitter and Medium.