Giter Site home page Giter Site logo

kovacsandor / todos Goto Github PK

View Code? Open in Web Editor NEW
3.0 2.0 0.0 1.8 MB

A web application for managing tasks.

License: MIT License

HTML 0.81% TypeScript 98.85% Dockerfile 0.30% Shell 0.04%
docker kafka kubernetes formik ingress-nginx jest jwt material-ui mongodb nodejs react redux sendgrid typescript yup cypress github-workflows

todos's Introduction

Todos

Running the app locally

Map application host to localhost

Mandatory for all methods to start up the app locally.

In your /etc/host file map todos.local.com to your local ip address. This is needed if you wish to work on multiple projects locally.

127.0.0.1 todos.local.com

Once the application is running visit the app in the browser http://todos.local.com/

Starting up the app in Docker Compose

The easiest and recommended method to start up the app locally.

Start application in development mode with live code refresh and live reload in the browser.

cd ~/Projects/todos/
docker-compose up --detach

If you make changes outside of the src folder you might want to rebuild the images with docker-compose up --detach --build.

Environment variables for Docker Compose

Make sure you provided the .env file for all microservices.

Accessing the databases running in Docker Compose locally

Find the database you want to connect to in the docker-compose.yaml file and see what port it is mapped to on your local computer.

services:
  user-service-database:
    ports:
      - '27080:27017'

Then connect to the database using that port mongodb://localhost:27080.

Stop app in Docker Compose

Stops and deletes the containers

docker-compose down

Starting up the app in Kubernetes

Docker images

Build Docker images

All microservices need to have Docker images build from them.

cd ~/Projects/todos/
# react app environment variables need to be present at build time
build_with_args="docker build -t andorkovacs/todos-client-service -f ./client/Dockerfile $(cat ./client/.env | while read -r line; do out+="--build-arg \"$line\" "; done; echo $out;out="")./client/"
eval "$build_with_args"
docker build -t andorkovacs/todos-notification-service -f ./notification-service/Dockerfile ./notification-service/
docker build -t andorkovacs/todos-task-service -f ./task-service/Dockerfile ./task-service/
docker build -t andorkovacs/todos-user-service -f ./user-service/Dockerfile ./user-service/
Push Docker images

All images need to be pushed to Docker Hub.

docker push andorkovacs/todos-client-service
docker push andorkovacs/todos-notification-service
docker push andorkovacs/todos-task-service
docker push andorkovacs/todos-user-service

Kubernetes objects

Create secrets for environment variables

Make sure you provided the secret.yaml file for all microservices.

# client environment variables were set at image build time
kubectl apply -f ./notification-service/secret.yaml
kubectl apply -f ./task-service/secret.yaml
kubectl apply -f ./user-service/secret.yaml
Create the Kubernetes deployments and Cluster IP services

The deployments will create pods running containers made based on the docker images.

kubectl apply -f ./deployment/client-service.yaml
kubectl apply -f ./deployment/kafka.yaml
kubectl apply -f ./deployment/notification-service.yaml
kubectl apply -f ./deployment/task-service-database.yaml
kubectl apply -f ./deployment/task-service.yaml
kubectl apply -f ./deployment/user-service-database.yaml
kubectl apply -f ./deployment/user-service.yaml
Install NGINX ingress controller

Create a LoadBalancer service and an ingress-nginx-controller deployment. NGINX Ingress Controller Installation Guide - Quick start

kubectl apply -f https://raw.githubusercontent.com/kubernetes/ingress-nginx/controller-v1.5.1/deploy/static/provider/cloud/deploy.yaml
Configure NGINX ingress controller

Create a an ingress configuration for the ingress-nginx-controller.

kubectl apply -f ingress.dev.yaml

Restart app in Kubernetes

kubectl rollout restart deployment client-service-deployment
kubectl rollout restart deployment notification-service-deployment
kubectl rollout restart deployment task-service-database-deployment
kubectl rollout restart deployment task-service-deployment
kubectl rollout restart deployment user-service-database-deployment
kubectl rollout restart deployment user-service-deployment

Note that if you restart your database deployments all your data saved will be lost.

Accessing the databases running in Kubernetes locally

List pods

kubectl get pods

Find the database's pod that you want to connect to.

NAME READY STATUS RESTARTS AGE
user-service-database-deployment-59d59df77c-b2gdj 1/1 Running 0 21m

You can forward the port of the pod the database runs in.

kubectl port-forward user-service-database-deployment-59d59df77c-b2gdj 27080:27017

You can access the database with the connection string of mongodb://localhost:27080.

Stop and delete app in Kubernetes

kubectl delete deployment client-service-deployment
kubectl delete deployment kafka-deployment
kubectl delete deployment notification-service-deployment
kubectl delete deployment task-service-database-deployment
kubectl delete deployment task-service-deployment
kubectl delete deployment user-service-database-deployment
kubectl delete deployment user-service-deployment
kubectl delete service client-service
kubectl delete service kafka
kubectl delete service notification-service
kubectl delete service task-service-database
kubectl delete service task-service
kubectl delete service user-service-database
kubectl delete service user-service
kubectl delete all --all -n ingress-nginx

GitHub actions

Running tests

If you open a pull request all the tests of the changes microservices will run.

todos's People

Contributors

kovacsandor avatar

Stargazers

 avatar  avatar

Watchers

 avatar  avatar

todos's Issues

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.