How to use Serverless Components?

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

Serverless Guru
Nov 26 · 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

To kick this article off, we are going to take a look at the Serverless Inc. serverless website component example.

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

Now that we have an idea for how the serverless website component is structured, let’s walk through the commands.

$~: npm install -g serverless
$~: serverless create --template-url https://github.com/serverless/components/tree/master/templates/website
$~: cd website
$website: npm install
$website: touch .env
AWS_ACCESS_KEY_ID=XXXXXXXXXXXXXXXXXXXXXX
AWS_SECRET_ACCESS_KEY=XXXXXXXXXXXXXx
AWS_REGION=us-west-2
$website: serverless
Website was deployed 🎉

Let’s update the ReactJS code and use the --watch command to see what happens.

$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
$website: serverless remove

After running the remove command.

website was removed in 1s 🔥

Review

In less than a few minutes, we were able to leverage a pre-built serverless component to get a website up and able to be accessed without having to know any minor details.

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 want to learn more about how to use Serverless components, check out these articles as well:

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.

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 + Serverless Guru — Partnership

When you leave your answer make sure to either comment below or tweet your answer to @serverlessgurux on Twitter because then we can quickly get back to you!

Founder, CEO/CTO — Serverless Guru

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