How to Build Your First Serverless Website♡Aws
Tags: aws, webdev, javascript, beginners
Published: 2018-05-29 03:34:06

---
title: How to Build Your First Serverless Website♡Aws
published: true
description: Build Your First Serverless Webpage Using Aws Lambda 
tags: aws,webdev,javascript,beginner
cover_image: https://cdn.pixabay.com/photo/2018/03/27/17/26/cat-3266675_960_720.jpg
---

**Today we are building Our  First serverless webpage using Aws Lambda.**

# What is ServerLess?

ServerLess means the name it says Don't worry More about servers instead of concentrate on Core Product.

Aws, take care of the servers and no need to worry about scaling up and scaling down one good thing about serverless is Aws only charges for you when someone hits your webpage if there is no traffic it means no charges.

I think now you have some understanding about serverless let's learn it more by building.

### What are Requirements?

- [Aws Free Tier Account](https://aws.amazon.com/free/)

- Nodejs v8+


**I'm using the serverless framework Cli to create and deploy apps**.

Open your terminal

```
npm install -g serverless

sls login // SLS is a shortcut of serverless

```

After sls login, You need to configure Your Aws Credentials with a serverless framework

[Get Aws Credentials](https://www.youtube.com/watch?v=tgb_MRVylWw)

Once It is done Your are good to go.

```
mkdir serverless-app

cd serverless-app
```

```
sls create --template  hello-world
```
The above command generates the boilerplate.

![structure](https://thepracticaldev.s3.amazonaws.com/i/h5tx01hpr8mvrils39w3.png)

Boilerplate generates Three files like in above image.

Now we need to install the express and other packages.

```
npm init  // to generate a package.json file

npm i --save express body-parser hbs serverless-http

```
Now open the handler.js file and clear it why because we writing it from scratch.

{% gist https://gist.github.com/saigowthamr/38937111c9f83a52090c83fd09adc049 %}


Just same as how we are building the express app.

 we need to export the app like i did in line 16.

Now create a views folder in your root directory.

![](https://thepracticaldev.s3.amazonaws.com/i/epptr5uixmg40zp3tgk2.png)

index.hbs code
{% gist https://gist.github.com/saigowthamr/00d85dd8ae8643d7a15f0978d86a65be %}


**Now final step  open the serverless.yml file.**

{% gist https://gist.github.com/saigowthamr/1d526b6f3c913a6ffd1eafd7fcde5273 %}

- runtime nodejs8.10 why because Aws lambda currently supports v8.10.

- In line 11 we need to specify the name of our function.

- In line 12 handler it means we need to tell on which file it needs to look.

Now in your terminal run.

```
sls deploy
```
![](https://thepracticaldev.s3.amazonaws.com/i/pu5mrwbt7u7l7c3ngo6z.png)

It will give us back endpoint copy and open in your browser 


![](https://thepracticaldev.s3.amazonaws.com/i/duvvh0tk7icc0utz8mpt.png)

That's it we are done.

If you build the same thing using Aws console it is not very easy for the new people. So that I'm using the serverless framework to show you in an easy way.

Above image is our output.

**Now open your  [aws console](https://console.aws.amazon.com/lambda/home?region=us-east-1#/functions)**

It will show the active functions 

![lambda](https://thepracticaldev.s3.amazonaws.com/i/j45j68oiangbqk54e017.png) 


For monitoring, Debugging and error detection of lambdas we are using [Dashbird](https://dashbird.io)

# Why Dashbird?

  -  Dashbird helps us actively monitoring the health and errors. 

  -  One main thing about Dashbird is its user-friendly Interface.

  -  Dashbird visualizes all your AWS Lambda metrics like
     memory utilization, invocation count, and execution duration.


## How to integrate Dashbird with our Aws Lambdas?

For these, we need to create an account on [Dashbird](https://dashbird.io/).

Once you are done then open  [Aws Iam](https://console.aws.amazon.com/iam/home?region=us-east-1#/home) for permissions.

click on [Roles](https://console.aws.amazon.com/iam/home?region=us-east-1#/roles$new?step=type).

![](https://thepracticaldev.s3.amazonaws.com/i/l8ztc5ut8o8pr5ak34md.png)

Select Another Aws Account It will ask for account id.


Now open your Dashbird account Click on Add new Organization it will show the Account Id and External ID paste it on your another Aws account page.

![Dashbird id](https://thepracticaldev.s3.amazonaws.com/i/x9doo9xpsugqh3z52mig.png)

Once Your are done it will redirect to policy page now click on create
The policy it will open on the new tab.


![](https://thepracticaldev.s3.amazonaws.com/i/i4r7onkd40e1i1xmx3rg.png)

Just like above image you can get this json on the Dashbird where you get the Account id and External id.

click on Review Policy on Aws it will ask for a name you can name it as *dashbird-delegation-role* Now click on Create Policy That's it we are successfully created
the policy.


Now go to roles tab click on refresh policies you can see the dashbird-delegation-role select it and click on the  Create role.

![](https://thepracticaldev.s3.amazonaws.com/i/wj49pudbi4n7juleewvb.png)

Copy the Arn and paste it on Dashbird that's it you are Done.


# DashBird Interface

![Dashbird monitoring](https://im4.ezgif.com/tmp/ezgif-4-b1b1b5a282.gif)



##### Hope you guys enjoyed if you have any doubts feel free to ask.

Happy coding.....

### [Code Repostiory](https://github.com/saigowthamr/Serveless-With-Aws)


other interesting Posts on Serverless

### [How to Build and Deploy a Rest API using Serverless Lambda](https://dev.to/saigowthamr/build-and-deploy-a-rest-api--using-serverless-express-and-nodejs-3331)