This app is used to compare text, built with Angular and Monaco Editor.

This app can determine the different content for the given 'Original Text' and 'Changed Text'. It is based on Monaco Diff Editor and currently supporting the following features:

• Syntax highlighting for 45+ languages, including c, c++, java, javascript, html, typescript, etc.
• Three editor themes: Visual Studio, Visual Studio Dark and High Contrast Dark.
• Diff Mode: Side by Side Diff, Inline Diff.

• Frontend Framework: Angular
• Styling: bootstrap
• Text Editor: ngx-monaco-editor

Two available demos:

• Live Demo on Heroku: https://text-compare-angular.herokuapp.com/
• Live Demo on Netlify: https://text-compare.netlify.com/
• Live Demo on Azure: https://text-compare.azurewebsites.net/

Note: The demo websites may be slow when you access them for the first time. Be patient!

git clone https://github.com/jojozhuang/text-compare-angular.git cd text-compare-angular npm install npm start

Access http://localhost:12010/ in web browser and click 'Text Compare' menu, enjoy!

git clone https://github.com/jojozhuang/text-compare-angular.git cd text-compare-angular npm install docker build -t text-compare-angular . docker run --name text-compare-angular -p 8080:80 text-compare-angular

Access http://localhost:8080/ in web browser and click 'Text Compare' menu, enjoy!

# 1. Build image docker build -t text-compare-angular . # 2. Deploy to k8s: kubectl apply -f k8s/text-compare.yaml # 3. Create service in minikube: minikube service text-compare-service # 4. Web browser will be opened automatically to access the site.

Create helm chart with the following command.

helm create deployment

Then, edit the deployment file, service and config map file accordingly.

After editing all configuration files, install with helm.

helm install compare-helm deployment

Helm will create k8s components based on the configuration files. Use kubectl get all | grep helm to find them.

kubectl get all | grep helm pod/compare-helm-76b67b5db6-r6jwq 1/1 Running 0 12m service/compare-helm ClusterIP 10.97.189.245 <none> 80/TCP 12m deployment.apps/compare-helm 1/1 1 1 12m replicaset.apps/compare-helm-76b67b5db6 1 1 1 12m

If you make any change to the configuration files, use the following command to upgrade.

helm upgrade compare-helm deployment

List all deployed namespaces.

helm ls --all-namespaces NAME	NAMESPACE	REVISION	UPDATED	STATUS	CHART	APP VERSION compare-helm	default	2	2024-01-07 21:05:52.849445 -0800 PST	deployed	deployment-0.1.0	1.16.0 text-compare	bit-developer	1	2024-01-07 20:50:29.372749 -0800 PST	deployed	deployment-0.1.0	1.16.0 text-compare	default	1	2024-01-07 20:42:49.758154 -0800 PST	failed	deployment-0.1.0	1.16.0

Start the service to view the web app in brower.

minikube service compare-helm

• How to Create Helm Charts - The Ultimate Guide

Read tutorial Deploying Text Compare Angular App to Docker to learn how this angular app is deployed to Docker.

Read tutorial Deploying Text Compare Angular App to Netlify to learn how this angular app is deployed to Netlify.

Read portfolio Text Compare(Angular) to learn the main functions of this text compare tool.

Read tutorial Building Online Text Compare Tool with Angular to learn how this text compare tool is built.