PhiltasticGuy / hobbystacks-react-flask-postgresql

Minimal cost technology stack for React, Flask and PostgreSQL with sample implementations for anyone with commercial hobby projects.

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Hobby Stacks - React / Flask / PostgreSQL

StackShare

Why create Hobby Stacks?

Our goal is to define a technology stack for hobby projects with minimal costs. We also want to offer real-world examples that go beyond canned tutorials showcasing isolated technologies or features.

We decided to gear this tech stack towards commercial projects which meant opting for a private container registry and code repository.

This example application uses React, Flask and PostgreSQL.

Features Tools Alternatives Costs
Hosting DigitalOcean Vultur 5$
Container Registry (Private) Azure Container Registry GitLab Container Registry* 5$ / Free
Repositories (Private) Azure DevOps GitLab, GitHub Free
CI/CD Pipelines Azure Pipelines GitLab, CircleCI, Travis CI Free
Web Server (Reverse Proxy) Nginx Free
Web Performance & Security Cloudflare Free
SSL Certificates Let's Encrypt + Certbot Free
Multi-Container Tool Docker Compose Free
IDE Visual Studio Community Visual Studio Code Free
Front-end + UI ASP.NET Core - MVC + React Free
APIs Flask Free
Database PostgreSQL Free

* GitLab Container Registry is only available for projects hosted on GitLab.

Getting Started

  1. DigitalOcean
  2. Azure DevOps
  3. Deployment

DigitalOcean

Prerequisites (DigitalOcean)

In order to provision Droplets on DigitalOcean you will need:

  • DigitalOcean Account:
  • Domain Name: A domain name from any registrar that you can point to your Droplet. You can refer to this tutorial on DigitalOcean about how to point custom domains from common domain registrars to your Droplet.

Provision Droplet on DigitalOcean

More details.

Azure DevOps

Prerequisites (Azure DevOps)

In order to use all of the tools in this stack you will need:

  • Azure DevOps Services Organization:
  • Azure Account and Subscription: You will need an active Azure account and subscription to provision the private Azure Container Registry.
    • If you don't have one, create your free Azure account;
    • If you have an active Visual Studio subscription, you are entitled to free Azure credit every month. You can refer to this link to read more about the offer and how to start using your monthly Azure credit.

Fork Project in Azure DevOps

More details.

Provision Azure Container Registry

For convenience, the steps to provision the Azure Container Registry have been scripted in PowerShell. The provisionContainerRegistry.ps1 script can be found under /src/infrastructure in the Azure DevOps repository.

In order to run the PowerShell script, you will need to install the Azure CLI. You can refer to Microsoft's quickstart guide to learn more about the commands used in the script.

.\provisionContainerRegistry.ps1 -resourceGroupName "hobbystacks-rg" -resourceGroupLocation "EastUS" -containerRegistryName "hobbystacksRegistry" -containerRegistrySku "Basic"

Update Deployment Files

  1. Docker Compose
    • Azure Container Registry
  2. Nginx
    • server_name
    • ssl_certificate
    • ssl_Certificate_key

More details.

Configure Service Connections

  1. Docker Registry
    • Azure Container Registry
  2. SSH
    • DigitalOcean

More details.

Create Azure Pipelines

  1. Build
    • YAML
  2. Release
    • Enable CD.
    • Add Copy files over SSH step.
    • Add SSH step.

More details.

Configure variables in Azure Pipelines

  1. Secret Variables
    • Azure Container Registry - Username
    • Azure Container Registry - Password
  2. Variables
    • Certbot - Domains
    • Certbot - Main Domain
    • Certbot - Email
    • Certbot - Data Path

More details.

Setup Project in Azure DevOps (Azure DevOps Demo Template)

More details.

Deployment

Create Build from Azure DevOps

More details.

View Results in Browser

More details.

Authors

  • Philippe Turcotte - Initial work

See also the list of contributors who participated in this project.

License

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

About

Minimal cost technology stack for React, Flask and PostgreSQL with sample implementations for anyone with commercial hobby projects.