My Preferred Go, React with TypeScript, and PostgreSQL Project Environment

Welcome back to Rig & Code, the official blog of EMSERO! I'm Brian Brown, the founder of EMSERO. In my last post, I introduced this blog as a space to share insights from my journey. Today, I'm diving into a practical topic: my preferred project environment for Go, React with TypeScript, and PostgreSQL, refined through years of building secure, scalable applications.

Why Your Environment Matters

A well-organized project environment is crucial for efficient, high-quality software. When working with Go for backends, React with TypeScript for frontends, and PostgreSQL for data management, my environment ensures I can focus on solving problems, not wrestling with tools. Here's what I use and how I organize my projects.

My Go-To Tools

I rely on a curated set of tools that streamline development with Go, React with TypeScript, and PostgreSQL:

  • Editor: Visual Studio Code with Go, TypeScript, and PostgreSQL extensions.
  • Backend: Go for building robust, performant APIs with simplicity and concurrency.
  • Frontend: React with TypeScript for dynamic, type-safe web interfaces.
  • Database: PostgreSQL for reliability, advanced querying, and scalability.
  • Version Control and CI/CD: GitHub/GitLab with GitHub Actions, GitLab CI, or CircleCI.
  • Containerization: Docker for consistent environments, Helm for Kubernetes deployments.
  • Code Quality: SonarQube for static analysis.
  • Environment Management: direnv for automatic per-project environment variables.
  • Build Automation: Makefiles for automating repetitive tasks (make build, make test, make run).

My Folder Structure

A clear folder structure keeps projects organized, especially for complex systems:

  • /cmd: Entry points for Go applications, containing main packages.
  • /pkg: Reusable Go packages (database helpers, API utilities).
  • /web: React with TypeScript source code for the frontend.
  • /web/src: React components, views, and TypeScript files.
  • /web/public: Static assets (images, fonts).
  • /conf: Configuration files, with environment variables managed by direnv.
  • /tests: Test files, mirroring the project structure.
  • /docs: Documentation (API specs, diagrams).
  • /deploy: Deployment configs (Kubernetes manifests, CI/CD scripts).
  • /data: PostgreSQL schemas and migrations.
  • /build: Build artifacts, generated via Make commands.
  • .envrc: direnv file for loading environment variables.
  • Makefile: Commands like make build-cmd, make start-web, and make migrate-db.

This structure scales well. For example, in a project for an e-commerce platform, I built a Go API in /cmd/api to manage product data stored in PostgreSQL, with shared database helpers in /pkg/db. The React with TypeScript frontend lived in /web/src to display the catalog, and migrations in /data managed the database schema. Using direnv, I set project-specific variables in .envrc, and a Makefile automated API builds and database migrations.

Why This Works for Me

I've built systems for a variety of applications, and a disciplined environment ensures I meet high standards for security and performance. VS Code's flexibility allows me to switch seamlessly between Go, TypeScript, and SQL queries for PostgreSQL while its extensions ensure code quality. Tools like direnv keep sensitive variables isolated (vital for secure data handling) while Makefiles standardize processes, reducing errors during deployments.

What's Next?

What's your go-to setup for Go, React with TypeScript, and PostgreSQL projects? Reach out at info@emsero.com to discuss how I can help with your next project.

EMSERO