Fullstack Web App with Go and Vite

A modern fullstack web application built with Go (Golang) backend and React + TypeScript frontend using Vite. This project demonstrates how to create a production-ready web application with authentication, static file serving, and containerized deployment.

🏗️ Architecture

Backend (Go/Fiber)

• Framework: Fiber - Fast, Express-inspired web framework
• Authentication: Firebase Authentication integration
• Static Serving: Embedded React build with Go's embed directive
• Configuration: Environment-based configuration with dotenv support
• Middleware: CORS, Recovery, and Firebase Auth middleware

Frontend (React + TypeScript + Vite)

• Framework: React 19 with TypeScript
• Build Tool: Vite for fast development and optimized builds
• Package Manager: PNPM for efficient dependency management
• Linting: ESLint with TypeScript and React-specific rules
• Styling: CSS with modern features and responsive design

Deployment

• Containerization: Multi-stage Docker build
• Platform: Fly.io deployment ready
• Environment: Alpine Linux for minimal image size

🚀 Features

• ⚡ Fast Development: Hot reload for both frontend and backend
• 🔐 Authentication: Firebase Authentication integration
• 📱 Responsive: Mobile-first design approach
• 🐳 Containerized: Docker support for easy deployment
• 🔧 Type Safe: Full TypeScript support with strict configuration
• 📦 Optimized: Static file embedding and production builds

📋 Prerequisites

Before you begin, ensure you have the following installed:

• Go (version 1.23.6 or higher)
• Node.js (version 18 or higher)
• PNPM (for frontend package management)
• Docker (for containerization)
• Make (for build automation)

🛠️ Installation

1. Clone the Repository

git clone https://github.com/yusupscopes/golang-fullstack-vite.git
cd golang-fullstack-vite

2. Set Up Environment Variables

Create a .env file in the root directory:

# Server Configuration
PORT=8080

# Firebase Configuration
GOOGLE_APPLICATION_CREDENTIALS=path/to/your/firebase-service-account.json

# Database Configuration (optional)
DB_CONNECTION_STRING=your-database-connection-string

3. Install Dependencies

Backend Dependencies

go mod download

Frontend Dependencies

cd ui
pnpm install
cd ..

🏃‍♂️ Getting Started

Development Mode

Run both frontend and backend in development mode with hot reload:

make dev

This will start:

• Frontend dev server on http://localhost:3000
• Backend server on http://localhost:8000

Individual Development Servers

Frontend Only

make start-ui-dev

Backend Only

go run main.go

Production Build

Build the application for production:

make build

This will:

1. Install frontend dependencies
2. Build the React application
3. Generate Go embed files
4. Compile the Go binary

The final binary will be available in build/app.

🐳 Docker Deployment

Build Docker Image

docker build -t golang-fullstack-vite .

Run Container

docker run -p 8080:8080 golang-fullstack-vite

Using Docker Compose

make start

🚀 Deployment

Fly.io Deployment

make deploy

Make sure you have flyctl installed and configured.

📁 Project Structure

golang-fullstack-vite/
├── main.go                 # Main Go application entry point
├── go.mod                  # Go module dependencies
├── go.sum                  # Go module checksums
├── config/
│   └── config.go          # Configuration management
├── ui/                     # Frontend React application
│   ├── src/
│   │   ├── App.tsx        # Main React component
│   │   ├── main.tsx       # React entry point
│   │   └── index.css      # Global styles
│   ├── package.json       # Frontend dependencies
│   ├── vite.config.ts     # Vite configuration
│   ├── tsconfig.json      # TypeScript configuration
│   └── embed.go           # Go embed file for static assets
├── Makefile               # Build automation
├── Dockerfile             # Docker configuration
└── README.md              # This file

🔧 Configuration

Environment Variables

Variable	Description	Default
PORT	Server port	8080
GOOGLE_APPLICATION_CREDENTIALS	Firebase service account path	""
DB_CONNECTION_STRING	Database connection string	""

Firebase Setup

1. Create a Firebase project at Firebase Console
2. Enable Authentication in your Firebase project
3. Download your service account key
4. Set the GOOGLE_APPLICATION_CREDENTIALS environment variable

🧪 Development

Available Scripts

• make build - Build the entire application
• make dev - Start development servers
• make start-ui-dev - Start frontend development server
• make start - Start with Docker Compose
• make deploy - Deploy to Fly.io

Code Quality

The project includes:

• ESLint for JavaScript/TypeScript linting
• TypeScript strict mode for type safety
• Go modules for dependency management

🤝 Contributing

1. Fork the repository
2. Create a feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add some amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

This project was inspired by the excellent tutorial on setting up a fullstack Golang application with Vite by Ahmad Rosid. Check out the original guide at: https://ahmadrosid.com/blog/setup-fullstack-golang-with-vite

📞 Support

If you encounter any issues or have questions, please:

1. Check the Issues page
2. Create a new issue with detailed information
3. Include your environment details and error messages

---

Built with ❤️ using Go, React, and Vite