How to use Serverless Components?

An article walking through the basic usage of serverless components using the serverless website component.

Serverless Guru
Nov 26, 2019 · 5 min read

This article is part of a series of related articles which dive into serverless components, we hope you enjoy.

In this article we will look at how to use the serverless website component released by Serverless Inc..

A simple website — Walk through tutorial

serverless.yml file
  • Line 1: we name our stack
  • Line 3: we specify our logical name
  • Line 4: we specify what component we are trying to use
  • Line 5: we specify our inputs these are the dynamic values that get passed into the @serverless/website component
  • Line 6–7: we specify the code property this will allow us to direct the @serverless/website component to a specific output folder where our website files live after being built
  • Line 8: we specify a hook this is a way to execute a terminal command. In the case above, the command will build the website files using npm run build
  • Line 9: we have the option to specify a domain which needs to already exist inside your AWS account under Route53. However, if it does exist this one line will connect your website to the domain and create an SSL so your website has HTTPS.

Hopefully it’s clear to understand how much time was saved in a couple of lines of code. On line 9, we are saving a couple of hours and potentially even more if we had any bugs pop up or lacked some knowledge for how this connection works.

Here is what the serverless website component structure looks like.

Project Structure

If you’re familiar with ReactJS development or web development in general then these files shown above should be straight forward. The src folder has our ReactJS files and everything else is straight forward.

Walk through tutorial

Install the Serverless CLI

$~: npm install -g serverless

Create a new project using the website template

$~: serverless create --template-url https://github.com/serverless/components/tree/master/templates/website

Install dependencies

$~: cd website
$website: npm install

Create a .env file

$website: touch .env

Add your ACCESS_KEY, SECRET_ACCESS_KEY, and REGION

AWS_ACCESS_KEY_ID=XXXXXXXXXXXXXXXXXXXXXX
AWS_SECRET_ACCESS_KEY=XXXXXXXXXXXXXx
AWS_REGION=us-west-2

Deploy to AWS

$website: serverless

Success 🎉

Website was deployed 🎉

Checkout the live site

Watch for live updates

$website: serverless --watch

The serverless website component is now listening for changes.

Before we saved

Now let’s modify the App.js file and save it.

After we saved

Our update was deployed.

After the changes were deployed

Now if you we view our updated site, you can see the message says “a website to sell state-of-the-art toasters” 🍞

Our updated site

Tear down

$website: serverless remove

After running the remove command.

website was removed in 1s 🔥

Review

In less than 20 seconds, we were able to deploy a website to AWS and view the live website without having to know “how” our website files were getting pushed up.

In less than 10 seconds, we were able to see our updates automatically reflected on the live website thanks to serverless --watch.

In less than 2 seconds, we were able to tear down our website.

Thanks to leveraging the serverless website component. The only manual steps we had to do was adding our AWS credentials to a .env file. Something which I’m sure will be streamlined in the future to leverage the ~/.aws/credentials file automatically.


Next Steps

If you would like to see more content around serverless components from our team at Serverless Guru, follow us here on Medium. We have a lot more content planned.

What does Serverless Guru do?

Serverless + Serverless Guru — Partnership

What did we miss?

Ryan Jones

LinkedIn — @ryanjonesirl

Twitter — @ryanjonesirl

Thanks for reading 😃

If you would like to learn more about Serverless Guru, please follow us on Medium, Twitter, Instagram, Facebook, or LinkedIn!

Serverless Guru

Serverless Guru can help you migrate to serverless, build serverless applications, and train your team on serverless best practices. We are a Serverless Development partner and an AWS Consulting partner.

Serverless Guru

Written by

We can help you migrate to serverless, build serverless applications, and train your team on serverless best practices. https://www.serverlessguru.com

Serverless Guru

Serverless Guru can help you migrate to serverless, build serverless applications, and train your team on serverless best practices. We are a Serverless Development partner and an AWS Consulting partner.

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch
Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore
Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade