Skip to content

Docker Compose collection of tech stack samples.

License

Notifications You must be signed in to change notification settings

luisaveiro/playground

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

#StandWithUkraine


Playground

Docker Compose collection of tech stack samples

TL;DRAboutDisclaimerGetting StartedDownloadHow To UseSamplesFAQ

Useful TipsChangelogContributingSecurity VulnerabilitiesCreditsSponsorLicense

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 [email protected]: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.

Code Review

License

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


GitHubLinkedInTwitter