VITE : Website using AWS, Terraform and CircleCI

Jorge Tovar
2 min readFeb 28, 2022

This repository is a getting started example about how to create a static website simply with IaC, compilation time of milliseconds, and CI/CD. The tech stack includes:

- [Vite](https://vitejs.dev/): Next Generation Frontend Tooling

https://github.com/jorgetovar/vite-aws-terraform/tree/main/vite-aws-terraform-app

- [AWS](https://aws.amazon.com/): Hosting the website using S3 (In the future I will post an update with Cloudfront and Route53)

http://vite-aws-website-bucket.s3-website-us-east-1.amazonaws.com/

- [Terraform](https://www.terraform.io/): Infrastructure as Code

https://github.com/jorgetovar/vite-aws-terraform/tree/main/infra

- [CircleCI](https://circleci.com/): Continuous integration and deployment

https://github.com/jorgetovar/vite-aws-terraform/tree/main/.circleci

Vite (Ultrafast hot-reload and build)

It can often take an unreasonably long wait to spin up a dev server. Component updates can take a couple of seconds or even minutes in some cases to be reflected in the browser. Vite aims to address these issues.

“The slow feedback loop can greatly affect developers’ productivity and happiness.”

```javascript

npm create vite@latest

npm run dev

npm run build

```

AWS

Amazon Simple Storage Service (Amazon S3) is an object storage service that offers industry-leading scalability, data availability, security, and performance.

Terraform

Terraform is an open-source infrastructure as code software tool that provides a consistent CLI workflow to manage hundreds of cloud services.

1. Create the remote backend to handle the terraform state (Information about what resources have been created)

2. Create the bucket and apply the policies and rules needed

```shell

terraform init

terraform plan

terraform apply

```

CircleCI

Fast, customizable, and reliable service to create pipelines and automate your deployments. The ORBs make it very easy to integrate and deploy in AWS and others providers.

12 seconds to update the website.

--

--

Jorge Tovar

System Engineer who loves coding and minimalism @jorgetovar621 in Twitter