Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/luisaveiro/playground

Docker Compose collection of tech stack samples.
https://github.com/luisaveiro/playground

blog-platform cms css-framework developer-learning docker docker-compose e-commerce frameworks fullstack-framework headless-cms hybrid-mobile-frameworks javascript-runtime playground programming-languages samples static-site-generator tech-stacks webservers websockets wiki

Last synced: about 16 hours ago
JSON representation

Docker Compose collection of tech stack samples.

Host: GitHub
URL: https://github.com/luisaveiro/playground
Owner: luisaveiro
License: mit
Created: 2022-07-10T14:28:17.000Z (over 2 years ago)
Default Branch: main
Last Pushed: 2024-01-01T16:02:29.000Z (11 months ago)
Last Synced: 2024-01-02T01:57:00.311Z (11 months ago)
Topics: blog-platform, cms, css-framework, developer-learning, docker, docker-compose, e-commerce, frameworks, fullstack-framework, headless-cms, hybrid-mobile-frameworks, javascript-runtime, playground, programming-languages, samples, static-site-generator, tech-stacks, webservers, websockets, wiki
Homepage:
Size: 7.08 MB
Stars: 26
Watchers: 3
Forks: 4
Open Issues: 0
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: .github/CONTRIBUTING.md
- Funding: .github/FUNDING.yml
- License: LICENSE
- Code of conduct: .github/CODE_OF_CONDUCT.md
- Security: .github/SECURITY.md

Awesome Lists containing this project

README

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](https://www.docker.com/) 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.

```bash
# Clone this repository.
$ git clone [email protected]:luisaveiro/playground.git --branch main --single-branch
```

All ***Playground*** samples can be found in `samples` directory.

```bash
# 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:

```bash
$ 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

Dart

Elixir

Erlang

Golang

Java

JavaScript (Vite)

Julia

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

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](https://github.com/luisaveiro/playground/discussions/categories/ideas)
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](https://withfig.com/) 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](http://github.com/luisaveiro/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](https://github.com/luisaveiro/docker-reverse-proxy)
offers a simple approach to having a Caddy Server as a local reverse proxy for
your Docker containers.

[Programiz](https://www.programiz.com/) 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](https://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](https://kodekloud.com/p/docker-for-the-absolute-beginner-hands-on)
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](CHANGELOG.md) 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](.github/CONTRIBUTING.md)
for guidelines about how to proceed.

## Security Vulnerabilities

Trying to report a possible security vulnerability in ***Playground*** samples?
Please check out our [security policy](.github/SECURITY.md) for guidelines
about how to proceed.

## Credits

The illustration used in the project is from
[unDraw (created by Katerina Limpitsouni)](https://undraw.co/). 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](LICENSE) for more information.

---

GitHub •
LinkedIn •
Twitter