This app is a test example aimed to show a full stack app which provides the very simple functionality to add items via an UI to the backend. It is composed of the following services:

• Frontend (fe-shopping): React app. It uses semantic-ui react to define the UI.

• Backend (be-shopping): API to the frontend written in Python - Flask. It is composed of the following endpoints:

  • /items-all: Retrieve all items in the backend.
  • /item/<item_name>: Push a new item to the backend.

• Proxy (router): Nginx-based proxy which routes the calls from the browser to either the frontend or the backend.

These instructions will help you start the full-stack app.

• Docker.
• Docker Compose.

Run docker-compose command from the root of the project:

$ docker-compose up -d

This command will spin up 3 services: fe-shopping, be-shopping and router.

The only service accessible from the outside is router. Access it from your browser to localhost:3050.

If you wish to spin up the single service, be it backend or frontend, follow the following instructions (Bear in mind that the frontend will not be able to call the backend if initiated individually - not using docker-compose):

1. Inside the directory backend, create a new Python virtual environment:

$ virtualenv python-env -p python3

2. Activate it:

$ source python-env/bin/activate

3. Install all the required modules using the requirements.txt file.

pip install -r requirements.txt

4. Run the app. You could access is to localhost:5000

python app.py

1. Go to frontend/fe-shopping folder.
2. Install all the necessary modules from package.json:

npm install

3. Run the app:

npm run start

You can deploy this app using different cloud providers or your simply your local machine. In our specific case we will set up our deployment using Minikube for local environments and GCP-GKE as our cloud provider solution. You can find all k8s object in the ./k8s folder.

• Minikube.
• Kubectl.
• Helm

1. You can use Helm to install the application in Minikube.

$ helm dependencies update fullstack

$ helm install full-stack-app k8s/

This command will install the application along with ingress-nginx controller.

2. Enable ingress in your k8s cluster. To enable it, run the following command:

$ minikube addons enable ingress

Obtain the IP of your Minikube cluster with the command minikube ip. You will be able to access the app directly from the browser by using the previous IP on port 80.

IMPORTANT NOTE: Helm chart has a ingress-nginx dependency. Minikube gives out of the box a configuration for nginx-ingress when running the command above. It means that in reality the chart dependency is not necessary as it will install again the ingress-nginx. It was only included to show that a LoadBalancer service type is created and the application can be accessed via the NodePort in this LoadBalancer service.

$ kubectl get svc test-nginx-ingress-controller -o yaml

Get the NodePort and access the application also from it.

The creation process of a new GCP project, activation of Google APIs, creation of service account and its private key as well as the creation of a new k8s cluster in GKE has been automated using the Google-client-api-python libraries. You can find this project here.

1. Follow the instructions in the project described just above to create your Google Cloud infrastructure.
2. Once you create your Google infrastructure, push some change to master to trigger a new build in Travis CI. Travis build will trigger a new deployment in GKE (See the Travis file to check what the build does).