This is a submission for the Pulumi Deploy and Document Challenge: Fast Static Website Deployment

What I Built

DevMood is a web application designed to enhance a developer's coding experience by offering dev jokes, coding music, and weather updates. The app is hosted on AWS and uses Pulumi for Infrastructure as Code (IaC), ensuring seamless deployment and scalability. The app includes:

• Dev Jokes 💬: A collection of funny developer jokes.
• Coding Music 🎶: Background music to help stay focused.
• Weather Info 🌤️: Real-time weather updates based on your location.
• Responsive Design 📱: Adapts to various screen sizes.

Live Demo Link

DevMood Live Demo

Project Repo

DevMood GitHub Repo

My Journey

When I decided to participate in the Pulumi Deploy and Document Challenge, my goal was to build a project that demonstrates Pulumi’s power in deploying cloud infrastructure on AWS. I had some experience with cloud deployments, but Pulumi provided the opportunity to dive deeper into Infrastructure as Code with a TypeScript-first approach.

Setting up the Project

The first step was to set up the project structure, including Next.js for the frontend and configuring the backend services on AWS with Pulumi. I used Tailwind CSS for styling to ensure the app was responsive and dynamic across devices. The frontend was a bit tricky in terms of layout, but once I got the hang of it, the combination of Next.js and Tailwind made it much smoother.

Frontend Setup

For the frontend, I used Next.js with Tailwind CSS for utility-first styling. Next.js allowed me to implement server-side rendering for better performance, while Tailwind CSS ensured a responsive layout. Here's a preview:

Infrastructure-1 (Static Website Hosting with S3)

For the basic version of DevMood, I used Amazon S3's static website hosting feature. It’s a cost-effective and scalable solution for hosting the frontend. The infrastructure is managed with Pulumi.

Key Components:

• S3 Bucket: Stores the static website files (HTML, CSS, JS).
• Static Website Hosting: Configured for the app to be served with an index and error document.
• Bucket Policy: Ensures public access to the static assets.

Infrastructure-1 Preview

Infrastructure-2 (Static Website Hosting with S3, CloudFront, and OAC)

For the enhanced version of DevMood, I added CloudFront for content delivery and Origin Access Control (OAC) for security, ensuring that only CloudFront could access the S3 bucket. This optimized infrastructure is also managed by Pulumi.

Key Components:

• S3 Bucket: Hosts static files but with public access restricted to CloudFront.
• CloudFront CDN: Caches and delivers static content globally, improving performance.
• OAC (Origin Access Control): Ensures that only CloudFront can securely access the S3 files.

Infrastructure-2 Preview

Continuous Integration (CI)

The CI pipeline ensures that code is continuously linted and checked for quality with each pull request. It lints the frontend, Infrastructure-1, and Infrastructure-2 code to ensure consistency and catch errors early in the process. Here's how it works:

Steps:

1. Code Checkout: Pulls the latest code from the repository.
2. Node.js Setup: Installs the latest version of Node.js (v18).
3. Linting: Runs the linting process to catch any coding errors or style violations before merging to the main branch.

Technologies Used:

• GitHub Actions: Automates the linting process with pull request triggers.
• ESLint: Used for linting the frontend and infrastructure code.

Continuous Deployment (CD)

The CD pipeline automates the deployment of the application whenever there is a push to the main branch. It deploys Infrastructure-1 (Static Website Hosting with S3) and Infrastructure-2 (Static Website Hosting with S3, CloudFront, and OAC). Here's how the process works:

Steps:

1. Code Checkout: Pulls the latest code from the repository.
2. Static Website Build: Builds the static website assets from the frontend.
3. AWS Credentials Configuration: Configures AWS access keys for secure deployment.
4. Deploy Infrastructure-1 via Pulumi: Deploys Infrastructure-1 by uploading the static website files to the S3 bucket.
5. Deploy Infrastructure-2 via Pulumi: Deploys Infrastructure-2 by uploading the static website files to the S3 bucket, while ensuring CloudFront and OAC are properly configured for enhanced security and performance.

Technologies Used:

• GitHub Actions: Automates the deployment process.
• Pulumi GitHub Action: Deploys infrastructure as code using Pulumi.
• AWS GitHub Action: Manages AWS deployments and configurations.

Using Pulumi

I used Pulumi as my Infrastructure as Code (IaC) tool to deploy all the infrastructure, including S3 buckets, CloudFront distributions, and Origin Access Control (OAC) to secure the S3 bucket. Here's how Pulumi helped me:

Syntax

Having prior experience with AWS CDK and Serverless Framework, Pulumi’s TypeScript-first approach was both familiar and intuitive. The learning curve was steep at first, but the Pulumi documentation was super helpful in getting me up and running in less than 24 hours.

Multi-Stack Management

One of the more challenging aspects was managing the different stacks for the basic static hosting and the optimized version with CloudFront and OAC. Pulumi’s multi-stack management feature made it easy to handle the separation of concerns while keeping the infrastructure as code clean and manageable.

Pulumi Action

For the Continuous Deployment (CD) setup, I used Pulumi GitHub Action to automate the deployment of my infrastructure. It integrates seamlessly with GitHub Actions and was a perfect fit for managing the deployment pipeline. Pulumi’s action makes it easy to trigger the deployment process and manage the infrastructure via code, ensuring a smooth and reliable CD pipeline.

Check out the Pulumi GitHub Actions for more information.

Conclusion

In less than 24 hours, I successfully built and deployed DevMood using Pulumi and AWS. Despite some challenges with multi-stack management and initial syntax hurdles, Pulumi’s TypeScript-first approach made it easy to automate infrastructure deployment. If you’re looking to simplify your cloud deployments and enjoy the benefits of IaC, I highly recommend giving Pulumi a try.

Feel free to check out the repo and contribute!

---

Thanks for reading and thank you to Pulumi for creating such an amazing tool!