# Hosting  a Serverless Web Application in AWS - Part I

*This is the first article in this series about hosting a serverless web application in AWS. We will start with hosting a static website and then move towards deploying a dynamic web application.*

In this article, we will set up a static website using [Amazon Simple Storage Service](https://aws.amazon.com/s3/) (S3). With this approach, we can easily set up a scalable website without requiring any servers.

Before we jump in, let's clarify what we mean by a *static website*. A static website consists of fixed content: HTML, CSS, and JavaScript files. A *dynamic website*, on the other hand, depends on backend or server-side processing.

We will set up a simple Tic-Tac-Toe game using HTML, CSS and JavaScript using AWS. We will use the source code available at [https://www.geeksforgeeks.org/simple-tic-tac-toe-game-using-javascript/](https://www.geeksforgeeks.org/simple-tic-tac-toe-game-using-javascript/). You can download the files from [here](https://github.com/sjejurkar/aws-serverless-app/tree/main/tic_tac_toe).

### Why use S3

Amazon Simple Storage Service (S3) is a scalable object storage solution provided by AWS. It is highly durable, so you don't need to worry about losing your code or files. It offers high availability, so it greatly reduces the chances of our website being inaccessible. It is highly scalable - it can handle massive traffic spikes, making it an ideal choice for websites that demand high availability. We do not need to set up or manage any servers, so it eliminates the overhead of managing servers.

### Create an S3 bucket

First, let's create a new bucket that we want to use to store the files for our website. We will create a new S3 bucket with the name `tic-tac-toe-site-123`. Note that the bucket names should be globally unique, so your bucket name should be different. For instance, replace the `123` with some other number to make it unique. I am using the region `US East (N. Virginia)` for this bucket.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699094518157/917362b2-b21f-486a-9bea-8930f0b8f840.png align="center")

Our website will be publicly accessible. Hence our bucket will need public access. Uncheck the `Block all public access` box. This will uncheck all boxes underneath. Check the box in the warning section acknowledging that the bucket and objects in it will be publicly accessible.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699094740191/8fb78070-06af-4675-8bbe-5b626a2e3657.png align="center")

Leave default values for the remaining options and click `Create bucket` to create the bucket.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699095063803/e31949ce-a106-425b-9755-ebc5d48eb0ab.png align="center")

The bucket should now appear in the list of all buckets.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699095109416/8e59fcd5-d4b8-4c09-aa85-90e999db6a2b.png align="center")

### Upload website files

Click on the bucket name and go to `Objects` tab. Click the `Upload` button.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699095408517/48a59d4c-3d55-4d9d-8a1e-2705109e4777.png align="center")

On the `Upload` page, click the `Add files` button to choose the files to be uploaded or simply drag and drop the website files.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699095522270/17669e29-bd0f-460a-907b-03aad593e685.png align="center")

Go to the folder/directory containing the website files. Select all of them to upload.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699095589305/11781ed7-68ef-4e54-a243-9ccfc738d908.png align="center")

Once the files are listed, click the `Upload` button to upload the files.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699095789631/2a83faa5-aeac-4cf0-bff4-45b5fea8f46e.png align="center")

### Add permissions policy

The uploaded files need to be made publicly accessible. Navigate to the “Permissions” tab and click the `Edit` button in `Bucket Policy` section.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699095862883/884cf62b-cf1b-4f6e-a451-46b5c0979a2a.png align="center")

Copy and Paste the following policy to make the bucket content publicly readable. Note that you will need to replace `tic-tac-toe-site-123` with the name of your bucket.

```json
{
    "Version": "2012-10-17",
    "Statement":
    [
        {
            "Sid": "PublicRead",
            "Effect": "Allow",
            "Principal": "*",
            "Action": ["s3:GetObject"],
            "Resource": ["arn:aws:s3:::tic-tac-toe-site-123/*"]
        }
    ]
}
```

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699096343588/c5c0049c-3fea-4c45-bc1e-7c10d4f1e974.png align="center")

### Enable static website hosting

We need to let AWS know that this bucket is going to be used to host a static website. Navigate to the `Properties` tab, scroll down to the `Static website hosting` section and click the `Edit` button.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699096615054/04c01e30-aef4-448e-bb20-fef245c4427c.png align="center")

On the `Edit static website hosting` page, select the `Enable` radio button under `Static website hosting` and `Hosting a static website` radio button under `Hosting type`. In the `Index document` text field, put `index.html` as this is the home page on our website.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699096382581/b33d1d85-097a-42c9-8724-a494d4ffc97b.png align="center")

Click `Save changes` to save these changes. The link to access will now appear at the bottom of `Static website hosting` section.

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699097074057/86e9324c-3f3b-4224-8ed8-b93d73cc3357.png align="center")

### Accessing our website

Click the link in `Bucket website endpoint` to open our website. We are now ready to play Tic Tac Toe game!!

![](https://cdn.hashnode.com/res/hashnode/image/upload/v1699097201975/bcfbb5c4-64fd-4517-85d5-86b17f2658f4.png align="center")

### Conclusion

It's great that our website is up and running but there are some problems with this. First, the website is not secure - it does not use HTTPS. Also, we had to make our bucket publicly accessible, which is not a good practice. In the [next article](https://blog.cloudbuff.in/serverless-web-app-p2) in this series, we will see how we can avoid these problems by using CloudFront.