From Pull Request to Preview: Automating Cloud Deployments with Pulumi + GitHub

Vivien Ogoun — Mon, 07 Apr 2025 06:59:20 +0000

This is a submission for the Pulumi Deploy and Document Challenge: Get Creative with Pulumi and GitHub

What I Built

I created Pulumi Preview Environment Deployer, a Node.js-based tool that automatically deploys preview environments to AWS S3 when a pull request is opened, and tears them down when the PR is closed. It uses Pulumi's Automation API to provide an efficient and isolated testing environment for every PR.

How It Works

A webhook listener receives GitHub PR events.
On PR open, Pulumi deploys a static website using the PR number as the stack name.
On PR close, the stack is destroyed.
Each preview environment is isolated by PR.

Demo

Pull request opened (or reopened) on github

Event received by the nodejs server

Preview deployment start automatically for the PR

Preview deployment finish and output preview site url

Preview deployment accessible in the browser

The deployed preview environments are tied to active pull requests and hosted on AWS S3. You can see a typical deployed preview site using a link like:

http://<unique-bucket>.s3-website-us-east-1.amazonaws.com

You can test it yourself by following the project repo README, opening a PR on your repo and watching the magic happen!

Project Repo

vivienogoun / pulumi-preview-deployer

Deploy preview environments for PRs using Pulumi and GitHub

Pulumi Preview Environment Deployer 🚀

This project automatically deploys preview environments to AWS S3 when a pull request is opened, and destroys them when the PR is closed — all using Pulumi's Automation API and GitHub webhooks.

✨ Features

Automatic deployment on PR open
Auto-destroy on PR close
Uses Pulumi's Automation API with Node.js
Static site hosted via AWS S3

📸 Demo

Pull request opened (or reopened) on github

Event received by the nodejs server

Preview deployment start automatically for the PR

Preview deployment finish and output preview site url

Preview deployment accessible in the browser

🛠 Tech Stack

Pulumi (TypeScript)
Node.js (Express + Automation API)
AWS S3
GitHub Webhooks
ngrok (for local testing)

🚀 How It Works

A webhook listener receives GitHub PR events.
On PR open, Pulumi deploys a static website using the PR number as the stack name.
On PR close, the stack is destroyed.
Each preview…

View on GitHub

My Journey

This project was both challenging and rewarding. I started by designing a simple static site deployment to AWS using Pulumi. I ran into issues with S3 public access settings (block public ACLs and policies), which required multiple iterations and research into the correct use of BucketV2, BucketPublicAccessBlock, and ownership settings.

The real fun began with integrating Pulumi’s Automation API. I learned how to manage stacks programmatically, respond to PR events in real time, and tie everything together using GitHub webhooks and an Express server.

What stood out most was how flexible Pulumi is, letting me script infrastructure logic just like any other application code.

Using Pulumi with GitHub

I used:

Pulumi Automation API (in Node.js) to deploy and destroy stacks on demand
Pulumi AWS provider to deploy the static site to S3
GitHub Webhooks to trigger Pulumi workflows on PR events

The ability to programmatically manage stacks and resources via code is a game-changer — I didn’t have to rely on GitHub Actions or manual pulumi up/down commands. It’s all automatic and runs locally during development.

I didn’t use Pulumi Copilot this time, but I’m excited to try it for future use cases.

Thanks for reading and big thanks to Pulumi + DEV for hosting this challenge 🚀

Exploring KendoReact by building a Gmail web clone

Vivien Ogoun — Mon, 24 Mar 2025 07:06:26 +0000

This is a submission for the KendoReact Free Components Challenge.

What I Built

I developed a project that replicates the user interface (UI) of Gmail using React and KendoReact components. This focuses solely on mirroring Gmail's visual design elements, such as layout, color schemes, typography, and iconography, to provide users with a familiar and intuitive interface. The project does not incorporate Gmail's functional features like email composition, sending, or receiving.

This project demonstrate the versatility of KendoReact in recreating complex, real-world interfaces.

Demo

Link to app

Github repo

KendoReact Experience

In developing the Gmail UI clone, I leveraged several KendoReact components to accurately replicate Gmail's interface:

AppBar: Used to create the top navigation bar, providing a consistent and responsive header across the application.
Drawer: Implemented for the left-side navigation panel, allowing users to access different mail categories and labels seamlessly.
ListBox: Employed to display the list of emails, enabling selection and interaction with individual email items.
Window: Utilized to replicate the email composition experience. This component enabled the creation of a window, closely mirroring Gmail's compose email functionality
Button: Utilized for various actions such as composing a new email, with options to include textual content, predefined icons, or custom elements.
TextBox: Used in the compose email window to allow users to enter inputs.
Tooltip: Added to provide additional information when users hover over specific UI elements, enhancing usability.
Avatar: Displayed user profile picture in the AppBar, contributing to a more personalized and recognizable interface.
SVG Icons: Integrated in the left-side navigation panel, ensuring a visually consistent experience.

By integrating these KendoReact components, I was able to efficiently recreate Gmail's user interface, ensuring responsiveness and a professional appearance.

DEV Community: Vivien Ogoun

From Pull Request to Preview: Automating Cloud Deployments with Pulumi + GitHub

What I Built

How It Works

Demo

Pull request opened (or reopened) on github

Event received by the nodejs server

Preview deployment start automatically for the PR

Preview deployment finish and output preview site url

Preview deployment accessible in the browser

Project Repo

vivienogoun / pulumi-preview-deployer

Deploy preview environments for PRs using Pulumi and GitHub

Pulumi Preview Environment Deployer 🚀

✨ Features

📸 Demo

Pull request opened (or reopened) on github

Event received by the nodejs server

Preview deployment start automatically for the PR

Preview deployment finish and output preview site url

Preview deployment accessible in the browser

🛠 Tech Stack

🚀 How It Works

My Journey

Using Pulumi with GitHub

Exploring KendoReact by building a Gmail web clone

What I Built

Demo

KendoReact Experience