Forem: Nico Wickersheim

How to develop a MacOS App easily with Wails

Nico Wickersheim — Sun, 13 Jul 2025 22:11:58 +0000

Nico Wickersheim

Jul 13 '25

I Solved Every Mac Developer's Homebrew Frustration with This Open Source Tool

#go #react #homebrew #programming

Comments

4 min read

I Solved Every Mac Developer's Homebrew Frustration with This Open Source Tool

Nico Wickersheim — Sun, 13 Jul 2025 22:06:22 +0000

I Built a Modern GUI for Homebrew in Go + React - Here's What I Learned

"brew list | grep something... brew info package... brew doctor... brew update..."

Sound familiar? If you're a Mac developer, you've probably typed these commands thousands of times. While I love the terminal, managing 50+ Homebrew packages through CLI got tedious. So I built WailBrew - a modern desktop GUI that makes Homebrew management actually enjoyable.

The result? A sleek desktop app that's already helping developers worldwide manage their packages with zero command-line friction.

The Problem Every Mac Developer Faces

Let's be honest - Homebrew's CLI is powerful but not always convenient:

Forgetting commands: Was it brew list or brew ls?
Package discovery: No easy way to browse what's installed
Update management: Checking outdated packages is a multi-step process
Information overload: brew info dumps everything in terminal format
No visual feedback: Is that update still running?

Enter WailBrew: Modern Desktop App Architecture

I chose an interesting tech stack that's perfect for desktop apps in 2024:

Backend: Go 🐹

Wails v2 framework for desktop app development
Direct system calls to Homebrew CLI
Efficient package management and system diagnostics

Frontend: React + TypeScript ⚛️

Modern React 19 with hooks
Vite for lightning-fast development
Clean, responsive UI that feels native

Why Wails? Unlike Electron, Wails uses the system's native webview, resulting in:

Smaller bundle size (5MB vs 150MB+ for Electron)
Better performance (no Chrome overhead)
Native OS integration (menus, dialogs, etc.)

Building Challenges & Solutions

Challenge 1: Real-time Package Updates

Problem: Homebrew operations can take minutes. Users need feedback.
Solution: Implemented streaming command output with Go channels and WebSocket-like communication.

func (a *App) UpdateBrewPackage(packageName string) string {
    cmd := exec.Command(a.brewPath, "upgrade", packageName)

    // Stream output in real-time
    stdout, _ := cmd.StdoutPipe()
    cmd.Start()

    scanner := bufio.NewScanner(stdout)
    for scanner.Scan() {
        // Send progress to frontend
        rt.EventsEmit(a.ctx, "update-progress", scanner.Text())
    }

    return "Update completed"
}

Challenge 2: Cross-platform Homebrew Detection

Problem: Homebrew installs in different locations (Intel vs Apple Silicon).
Solution: Dynamic path detection with fallbacks.

Challenge 3: Package Information Parsing

Problem: Homebrew outputs aren't always JSON-friendly.
Solution: Built robust parsers that handle edge cases and malformed data.

Design Philosophy: Familiar Yet Modern

I studied popular Mac apps like Finder, System Preferences, and even Cakebrew (the inspiration) to create something that feels native:

Key Design Decisions:

Sidebar navigation: Familiar pattern for Mac users
Table-based package listing: Sortable, searchable, scannable
Confirmation dialogs: Prevent accidental deletions
Real-time status updates: Progress bars and live logs

The entire UI is built with React - no heavy UI frameworks needed.

Code Architecture & Patterns

Frontend State Management

const [packages, setPackages] = useState<PackageEntry[]>([]);
const [selectedPackage, setSelectedPackage] = useState<PackageEntry | null>(null);
const [currentView, setCurrentView] = useState<string>("packages");

// Real-time updates from Go backend
useEffect(() => {
    EventsOn("package-updated", (data) => {
        setPackages(prev => prev.map(pkg => 
            pkg.name === data.name ? { ...pkg, ...data } : pkg
        ));
    });
}, []);

Backend API Design

// Clean, typed interfaces for frontend communication
type PackageEntry struct {
    Name             string   `json:"name"`
    InstalledVersion string   `json:"installedVersion"`
    LatestVersion    string   `json:"latestVersion,omitempty"`
    Description      string   `json:"desc,omitempty"`
    Homepage         string   `json:"homepage,omitempty"`
    Dependencies     []string `json:"dependencies,omitempty"`
}

func (a *App) GetBrewPackages() [][]string {
    // Efficient package listing with caching
    // Returns structured data for frontend consumption
}

The Results

Development Stats:

Lines of code: ~2,000 Go, ~1,500 TypeScript
Bundle size: 5.2MB (vs 150MB+ typical Electron app)
Startup time: <1 second

Performance Improvements for Users:

🎯 Zero command memorization needed
📊 Visual progress tracking for long operations
🔍 Instant search through installed packages

What I Learned Building WailBrew

1. Wails is Underrated

Perfect sweet spot between Electron and native development
Go's concurrency model is ideal for system operations
Native OS integration without the bloat

2. Desktop App UX is Different

Users expect native behavior (keyboard shortcuts, drag-drop)
System integration matters (menu bars, notifications)
Performance expectations are higher than web apps

3. Open Source Community Power

Early feedback shaped crucial features
Contributors helped with edge cases I missed
Documentation is as important as code

4. Cross-platform Considerations

Even "Mac-only" apps need to handle system variations
Apple Silicon vs Intel differences matter
Homebrew installation paths vary more than expected

What's Next for WailBrew

Immediate Roadmap:

🍺 Homebrew Cask support (GUI app management)
🔄 Auto-update mechanism (currently manual)
📊 Package analytics (usage tracking, recommendations)
🎨 Themes and customization

Community Requests:

🔗 Package dependency visualization
📱 Menu bar widget for quick access
🤖 Automated maintenance tasks

Technical Improvements:

⚡ Better caching strategies
📈 Performance monitoring
🧪 Automated testing suite

Try WailBrew Today!

⬇️ Download WailBrew v0.6.0

For Developers:

🌟 Star the repo: github.com/wickenico/WailBrew
🐛 Report issues: Help improve the app
🔧 Contribute: PRs welcome!
💬 Share feedback: What features do you need?

Tech Stack Curious?

📖 Full source code available on GitHub
🏗️ Wails framework: wails.io
🎯 Build your own: Use this as a starting point

What's your biggest Homebrew pain point? Let me know in the comments - it might become the next WailBrew feature!

Tags: #go #react #typescript #wails #homebrew #macos #desktop #opensource #gui #packagemanager

Setting up a React Project with TailwindCSS

Nico Wickersheim — Sun, 22 Sep 2024 22:17:36 +0000

TailwindCSS is a popular utility-first CSS framework that allows developers to build modern and responsive designs directly in their markup. When combined with React, it provides a powerful way to create interactive, stylish UIs with minimal effort. In this article, I'll walk you through how to set up a new React project with TailwindCSS from scratch.

Prerequisites

To follow along, you should have the following installed on your machine:

Node.js (at least version 14.x)
npm or Yarn as your package manager (here we will use npm)
If you don't have Node.js installed, you can download it from the official website. Once you have Node.js installed, npm comes bundled with it, so you're good to go!

Step 1: Create a React Project

First, let's create a new React project. Open your terminal and run the following command:

npx create-react-app my-tailwind-react-app

This will create a new React app in a folder called my-tailwind-react-app. You can replace this with your preferred project name.

Once the installation is complete, navigate into your project folder:

cd my-tailwind-react-app

You can test if everything works by running:

npm start

This will start the development server and open your project in the browser.

Step 2: Install TailwindCSS

Now that we have a basic React project set up, it's time to install TailwindCSS. To do that, we need to install Tailwind and its dependencies.

In your project directory, run the following command:

npm install -D tailwindcss postcss autoprefixer

After that, generate a TailwindCSS configuration file by running:

npx tailwindcss init

This will create a tailwind.config.js file in your project directory. The default file will look something like this:

/** @type {import('tailwindcss').Config} */
module.exports = {
  content: [],
  theme: {
    extend: {},
  },
  plugins: [],
}

Step 3: Configure Tailwind to Remove Unused Styles

By default, TailwindCSS comes with all of its styles, which can make your CSS files quite large. To optimize the bundle size, we need to configure it to purge unused styles in production. This is done by adding the paths to all of your template files (like your React components) in the content array of tailwind.config.js.

Modify the tailwind.config.js to include all your React files:

module.exports = {
  content: [
    "./src/**/*.{js,jsx,ts,tsx}",
  ],
  theme: {
    extend: {},
  },
  plugins: [],
}

This configuration tells Tailwind to scan all the files inside the src directory with .js, .jsx, .ts, or .tsx extensions for Tailwind classes and remove the unused ones in production builds.

Step 4: Add Tailwind to Your CSS

Next, we need to import TailwindCSS into our project’s CSS file. Open the src/index.css file and replace everything with the following:

@tailwind base;
@tailwind components;
@tailwind utilities;

This imports Tailwind's base, component, and utility styles into your project.

Step 5: Start Using TailwindCSS in Your React Components

Now that TailwindCSS is set up, you can start using its utility classes in your React components!

For example, open src/App.js and update it like this:

function App() {
  return (
    <div className="min-h-screen bg-gray-100 flex items-center justify-center">
      <div className="bg-white p-8 rounded shadow-md text-center">
        <h1 className="text-2xl font-bold text-gray-900">Hello, TailwindCSS!</h1>
        <p className="mt-4 text-gray-600">Start building your awesome React app now 🚀</p>
      </div>
    </div>
  );
}

export default App;

In this example, we've used several TailwindCSS utility classes to style our component without writing any custom CSS. You can quickly adjust the layout and appearance just by changing the classes.

Step 6: Build and Deploy

Once you're happy with your project and want to build it for production, simply run:

npm run build

React will generate optimized static files, and Tailwind will remove all unused CSS classes, ensuring your bundle is as small as possible.

You can then deploy your project to any hosting platform like Vercel, Netlify, or GitHub Pages.

Conclusion

Setting up React with TailwindCSS is quick and easy, and it allows you to build clean, responsive UIs without writing much custom CSS. With Tailwind’s utility-first approach, you can focus on designing your app’s interface directly in your JSX without leaving your code.

Happy coding!

Simplifying AWS SSO Setup: The effortless way

Nico Wickersheim — Wed, 29 May 2024 09:29:23 +0000

Are you struggling with the complexities of configuring AWS SSO profiles for your projects involving data storage in S3 or similar services? In this blog post, we'll guide you through the seamless and effortless process of setting up AWS SSO profiles within AWS Config to get you up and running quickly.

Understanding AWS Profiles

AWS profiles are configurations that define how your AWS CLI commands interact with AWS services. They centralise authentication credentials, region settings, and other parameters to streamline access to AWS resources. By creating different profiles for different purposes or roles, you can provide granular access control and maintain organisational segregation of duties. Understanding AWS profiles enables seamless integration of AWS CLI commands into your workflow, promoting agile development, efficient resource management, and robust security practices.

Prerequisites

AWS Account: You must have an active AWS account with appropriate permissions to configure AWS services and manage IAM roles.
AWS CLI: Install the AWS Command Line Interface (CLI) tool on your local machine. AWS CLI allows you to interact with AWS services from the command line, simplifying configuration and management tasks. Install the AWS CLI using brew: brew install awscli.
AWS IAM privileges: Ensure that your IAM user or role has the necessary permissions to create and manage AWS Config rules and AWS SSO configurations. This includes permissions to access the AWS Management Console and make changes to IAM policies and roles.

Setting Up AWS SSO Profiles in AWS Config: A Step-by-Step Guide

The AWS CLI provides a built-in step-by-step guide for setting up SSO profiles. You can invoke it with `aws configure sso'.

SSO Session Name (Recommended): Choose a descriptive name, ideally with a reference to the environment or stage like dev, prod or staging.
SSO Start URL [None]: Specify the URL where the process of selecting a profile begins within the AWS Management Console.
SSO Region [None]: Indicate the region associated with your AWS account.
SSO Registration Scopes [sso:account:access]: This initiates a browser window for granting access to your AWS profiles. Upon confirmation, you can proceed to select accounts and roles via the terminal.
CLI Default Client Region [eu-central-1]: Reiterate your preferred region setting.
CLI Default Output Format [None]: Simply press Enter to confirm.

Once configured, you can verify your profile by executing:

aws s3 ls --profile dev-admin

This command will list the contents of your S3 bucket using the specified profile, in this case, "dev-admin".

Setting Up AWS SSO Profile directly in Configuration File

Another effective method for adding a profile is by directly modifying the config file.

To access the file in the terminal, use the command cat ~/.aws/config.
Within this file, you can insert a profile block resembling the following example:

After adding the block and saving the file, you can seamlessly utilize the profile.

Logging in with AWS SSO Profiles

First, export the AWS profile in the terminal where you want to use AWS CLI commands:

export AWS_PROFILE=dev-admin

Next, log in to your profile with the following command:

aws sso login

A new browser window will open, prompting you to confirm your login attempt.

Great! You are now logged in with your dev-admin profile.

To check which profile you are currently logged in with, use the command:

aws sts get-caller-identity.

For a deeper view you can visit the AWS documentation: https://docs.aws.amazon.com/cli/latest/userguide/sso-using-profile.html.