Docker Compose collection of tech stack samples

TL;DR • About • Disclaimer • Getting Started • Download • How To Use • Samples • FAQ

Useful Tips • Changelog • Contributing • Security Vulnerabilities • Credits • Sponsor • License

TL;DR

Playground is a collection of Docker Compose files that provides a starting point for how to integrate different services and allows you to learn and experiment with tech stacks samples.

Quick Start

1. Clone this repository.
2. All Playground samples can be found in samples directory.
3. Copy the DotEnv example file to create your DotEnv file and override the Docker Compose variables.
4. If the Playground sample includes a Makefile. You must execute the make command before you can have the Playground sample set up and running in a Docker container.
5. Start the Playground sample by executing the docker compose up command.

About

This repository is a collection of Docker Compose files for tech stack samples, including frameworks, blog platforms, CMS, e-commerce, headless CMS, and "Hello, World!" examples for most common programming languages. The samples offer a simple approach to setting up their respective tech stacks for a local environment.

What is the purpose of the Playground collection?

The Playground collection provides a starting point for how to integrate different services and allows you to learn and experiment with tech stacks. By having the tech stack samples run in a Docker environment, you don't have to install additional dependencies before you can get started.

Disclaimer

Important

The Playground samples are intended for use in local development environments such as prototyping, tinkering with software stacks, etc. These samples MUST NOT be deployed in production environments.

Getting Started

You will need to make sure your system meets the following prerequisites:

• Docker Engine >= 20.10.00

This repository utilizes Docker to run the tech stack samples. So, before using any of the Playground samples, make sure you have Docker installed on your system.

Download

You can clone the latest version of Playground repository for macOS, Linux and Windows.

# Clone this repository.
$ git clone git@github.com:luisaveiro/playground.git --branch main --single-branch

All Playground samples can be found in samples directory.

# Navigate to the samples
$ cd playground/samples

How To Use

There are a few steps you need to follow before you have a Playground sample set up and running in a Docker container. I have outlined the included files you would need to take to get started.

1. DotEnv

You can override the variables in the Docker Compose file, e.g. container name, network name and port mapping. All Playground samples include a DotEnv example file (.env.example) that you can copy to create your DotEnv file and override the Docker Compose variables.

2. Dockerfile

Some tech stacks require additional dependencies, e.g. libraries and CLI tools. However, not all tech stacks offer an official Docker image. I have included a Dockerfile for Playground samples that need a Docker image with the necessary dependencies.

The Docker Compose file and Makefile automatically build the Docker image from the Dockerfile.

3. Makefile

The Makefile offers a developer-friendly approach to automate the set up of Playground samples. Some tech stacks CLI tools have a setup command that offers an initial starter app.

If the Playground sample has a Dockerfile, the Makefile will build the Docker image from the Dockerfile. The Makefile will execute the setup command in a Docker container. You will need to follow the CLI installation steps.

The Makefile will create and attach the CODE_DIR (default code directory) as a Docker volume. Your new Playground sample source code will be stored in the CODE_DIR.

In each Playground samples' Makefile I have included an example on how to execute the make command. You will need to execute the make command before you can have the Playground sample set up and running in a Docker container.

4. Docker Compose

Each Playground sample has its individual Docker Compose file. All samples' services will run in separate Docker containers. Playground sample source code will be stored in the CODE_DIR (default code directory) as a Docker volume.

Playground samples that do not have have a Makefile will automatically execute the setup command of their respective tech stacks.

To start a Playground sample, you can run the following command:

$ docker compose up

# or run container in detached mode
$ docker compose up -d

Samples

There are currently 100 samples included in the Playground repository. The Playground samples are categorised into one of the following tech stacks:

Programming Languages (Hello, World!)

• Bash
• C
• C++
• C#
• Dart
• Elixir
• Erlang
• Golang
• Java
• JavaScript (Vite)
• Julia
• Nim
• PHP (Apache)
• PHP (CLI)
• Python
• Ruby
• Rust
• Swift
• TypeScript (Vite)

Analytics Platforms

• Ackee
  ^{Tech Stack: JavaScript, Node.js, MongoDB.}

App Frameworks

• Flutter (Web)
  ^{Tech Stack: Dart.}

Blogs

• Ghost
  ^{Tech Stack: JavaScript, Node.js.}
• Hexo
  ^{Tech Stack: JavaScript, Node.js.}
• Jekyll
  ^{Tech Stack: Ruby.}

Content Management Systems (CMS)

• ApostropheCMS
  ^{Tech Stack: JavaScript, Node.js, MongoDB.}
• Drupal
  ^{Tech Stack: PHP, MariaDB}
• Joomla
  ^{Tech Stack: PHP, MySQL}
• October CMS
  ^{Tech Stack: Laravel, PHP}
• Statamic
  ^{Tech Stack: Laravel, PHP}
• WordPress
  ^{Tech Stack: PHP, MySQL}

CSS Frameworks

• Bootstrap
• Tailwind CSS

E-commerce

• PrestaShop
  ^{Tech Stack: PHP, MySQL}

Email Generators

• React Email
  ^{Tech Stack: React, TypeScript, Next.js}

Frameworks

• AdonisJS
  ^{Tech Stack: TypeScript, Node.js.}
• Alpine.js
  ^{Tech Stack: JavaScript.}
• Angular (Angular CLI)
  ^{Tech Stack: TypeScript.}
• ASP.NET
  ^{Tech Stack: C#, .NET.}
• Django
  ^{Tech Stack: Python.}
• Egg
  ^{Tech Stack: JavaScript, Koa, Node.js.}
• Elysia
  ^{Tech Stack: TypeScript, Bun.}
• Express
  ^{Tech Stack: JavaScript, Node.js.}
• Fastify
  ^{Tech Stack: TypeScript, Node.js.}
• Fiber
  ^{Tech Stack: Golang.}
• Flask
  ^{Tech Stack: Python.}
• Fresh
  ^{Tech Stack: TypeScript, Deno.}
• Gin
  ^{Tech Stack: Golang.}
• Goravel
  ^{Tech Stack: Golang.}
• Lit (Vite)
  ^{Tech Stack: JavaScript/TypeScript.}
• NestJS
  ^{Tech Stack: Node.js.}
• Nue
  ^{Tech Stack: JavaScript.}
• Preact (Vite)
  ^{Tech Stack: JavaScript/TypeScript.}
• PyScript
  ^{Tech Stack: Python, Pyodide, WASM.}
• Quasar
  ^{Tech Stack: JavaScript, Vue.js.}
• Qwik
  ^{Tech Stack: JavaScript.}
• Revel
  ^{Tech Stack: Golang.}
• Rocket
  ^{Tech Stack: Rust.}
• Solid
  ^{Tech Stack: JavaScript/TypeScript.}
• Spark.NET
  ^{Tech Stack: C#, ASP.NET.}
• Svelte (Vite)
  ^{Tech Stack: JavaScript/TypeScript.}
• Vue (Vite)
  ^{Tech Stack: JavaScript/TypeScript.}

Full Stack Frameworks (FSF)

• Analog
  ^{Tech Stack: TypeScript, Angular.}
• Blitz
  ^{Tech Stack: TypeScript, React, Next.js.}
• Copper
  ^{Tech Stack: Golang, React.}
• JD App
  ^{Tech Stack: TypeScript, Solid.}
• Laravel
  ^{Tech Stack: PHP.}
• Next.js
  ^{Tech Stack: TypeScript, React.}
• Nuxt
  ^{Tech Stack: JavaScript, Vue.js.}
• Redwood
  ^{Tech Stack: TypeScript, React.}
• Remix
  ^{Tech Stack: TypeScript, React.}
• Ruby on Rails
  ^{Tech Stack: Ruby.}
• SvelteKit
  ^{Tech Stack: TypeScript, Svelte.}
• T3
  ^{Tech Stack: TypeScript, React, Next.js.}

Fuzzy-search libraries

• Fuse.js
  ^{Tech Stack: JavaScript}

Headless CMS

• Directus
  ^{Tech Stack: TypeScript, SQLite.}
• Strapi
  ^{Tech Stack: JavaScript.}
• Tina
  ^{Tech Stack: TypeScript.}

Hybrid Mobile Frameworks

• Ionic
  ^{Tech Stack: Angular, React, Vue.js, JavaScript}
• React Native
  ^{Tech Stack: React, JavaScript}

JavaScript Libraries

• htmx
• jQuery
• React (Vite)

JavaScript Runtimes

• Bun
• Deno
• Node

Reactive Data Stores

• TinyBase
  ^{Tech Stack: JavaScript, TypeScript, React.}

Slides

• Slidev
  ^{Tech Stack: JavaScript, Vue.js.}

Static Site Generators (SSG)

• Astro
  ^{Tech Stack: JavaScript.}
• Docusaurus
  ^{Tech Stack: TypeScript, React.}
• Eleventy
  ^{Tech Stack: JavaScript.}
• Gatsby
  ^{Tech Stack: JavaScript, React.}
• Hugo
  ^{Tech Stack: Golang.}
• Lume
  ^{Tech Stack: TypeScript, Deno.}
• VitePress
  ^{Tech Stack: JavaScript, Vue.js.}
• VuePress
  ^{Tech Stack: JavaScript, Vue.js.}

UI Kits

• Naive UI
  ^{Tech Stack: TypeScript, Vue.js.}
• Pines UI
  ^{Tech Stack: Alpine & Tailwind CSS.}
• UIkit

Video Frameworks

• Remotion
  ^{Tech Stack: TypeScript, React/Remix.}

WebSockets

• Socket.IO
  ^{Tech Stack: JavaScript, Node.js.}
• Soketi
  ^{Tech Stack: JavaScript, Node.js.}

Web Servers

• Apache
• Caddy
• Nginx

Wikis

• Wiki.js
  ^{Tech Stack: JavaScript, Vue.js, Node.js.}

FAQ

Q: Are you planning to add additional tech stack samples?
A: I do have a roadmap for adding additional tech stack samples to Playground. However, you can suggest a tech stack in the Discussion section and I will try to include the sample as part of Playground collection.

Q: Are you able to provide "beginner" guides for each sample?
A: I will be providing additional readme files for each Playground sample that will include how to get started and use the sample.

Q: Are you able to provide "How-to" guides to combine multiple samples?
A: Yes, I will be including additional guides to help developers that want to combine two or more Playground samples.

Useful Tips

Fig is a CLI tool that adds VSCode-style autocomplete to your existing Terminal. You can build autocomplete functionality for any CLI with javascript, not bash. You can share it with your team, or contribute to Fig open source specs for tools like git, aws, kubectl.

Localhost Databases is a collection of Docker Compose files for relational and NoSQL databases. Which aims to offer a simple approach to setting up databases for a local environment.

Docker Reverse Proxy offers a simple approach to having a Caddy Server as a local reverse proxy for your Docker containers.

Programiz let's you learn to code in Python, C/C++, Java, and other popular programming languages with their beginner-friendly tutorials and examples.

Kodekloud.com offer courses with real scenarios and practice labs to become a DevOps expert. They provide a learning path to guide you in your journey in DevOps from the basics concepts to in-depth advanced topics to help you prepare for your certifications.

Kodekloud has a free Docker For The Absolute Beginner course. The course will help you practice Docker commands and developing your own images using Dockerfiles and practice Docker Compose.

Please note: Most of the courses on Kodekloud.com require you to pay for a subscription to access the course content and materials.

Changelog

Please see CHANGELOG for more information what has changed recently.

Contributing

I encourage you to contribute to Playground! Contributions are what make the open source community such an amazing place to be learn, inspire, and create. Any contributions you make are greatly appreciated.

Please check out the contributing to Playground guide for guidelines about how to proceed.

Security Vulnerabilities

Trying to report a possible security vulnerability in Playground samples? Please check out our security policy for guidelines about how to proceed.

Credits

The illustration used in the project is from unDraw (created by Katerina Limpitsouni). All product names, logos, brands, trademarks and registered trademarks are property of their respective owners.

Sponsor

Do you like this project? Support it by donating.

License

The MIT License (MIT). Please see License File for more information.

---

GitHub • LinkedIn • Twitter