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
Edit the file in template
folder, use Values
variables and put the actual values in values.yaml
.
appName: compare-helm
namespace: default
configmap:
name: compare-configmap
data:
ENV_NAME: 'DEV'
image:
name: jojozhuang/text-compare-angular
tag: latest
Upgrade the deployment.
helm upgrade compare-helm deployment --values deployment/values.yaml
W0107 21:30:02.019806 39661 warnings.go:70] unknown field "spec.ports[0].type"
Release "compare-helm" has been upgraded. Happy Helming!
NAME: compare-helm
LAST DEPLOYED: Sun Jan 7 21:30:01 2024
NAMESPACE: default
STATUS: deployed
REVISION: 3
TEST SUITE: None
After each upgrade, the revision number should be incremented.
helm ls
NAME NAMESPACE REVISION UPDATED STATUS CHART APP VERSION
compare-helm default 5 2024-01-07 21:38:03.669554 -0800 PST deployed deployment-0.1.0 1.16.0
Create file NOTES.txt
under deployment/templates
directory with the following content.
servicename=$(k get service -l "app={{ .Values.appName }}" -o jsonpath="{.items[0].metadata.name}")
kubectl --namespace {{ .Values.namespace}} port-forward service/{{ .Values.appName }} 8888:80
Each time when you run the upgrade command, you will see the notes in the output.
helm upgrade compare-helm deployment --values deployment/values.yaml
W0107 21:49:34.774115 40283 warnings.go:70] unknown field "spec.ports[0].type"
Release "compare-helm" has been upgraded. Happy Helming!
NAME: compare-helm
LAST DEPLOYED: Sun Jan 7 21:49:34 2024
NAMESPACE: default
STATUS: deployed
REVISION: 6
TEST SUITE: None
NOTES:
servicename=$(k get service -l "app=compare-helm" -o jsonpath="{.items[0].metadata.name}")
kubectl --namespace default port-forward service/compare-helm 8888:80
Copy and paste the two lines and execute them in teminal.
servicename=$(k get service -l "app=compare-helm" -o jsonpath="{.items[0].metadata.name}")
kubectl --namespace default port-forward service/compare-helm 8888:80
Then, you are able to access your site through http://localhost:8888/
.
Create two docker images first, one for nas
, another for prod
.
docker build -t jojozhuang/text-compare-angular-nas -f Dockerfile-nas .
docker build -t jojozhuang/text-compare-angular-prod -f Dockerfile-prod .
List all images and make sure jojozhuang/text-compare-angular-nas
and jojozhuang/text-compare-angular-prod
are there.
docker images
REPOSITORY TAG IMAGE ID CREATED SIZE
jojozhuang/text-compare-angular-prod latest 4a53306114f5 4 seconds ago 30.8MB
jojozhuang/text-compare-angular-nas latest ee561a5e50b3 5 hours ago 30.8MB
jojozhuang/text-compare-angular latest ee561a5e50b3 5 hours ago 30.8MB
Push to docker hub.
docker push jojozhuang/text-compare-angular-nas
docker push jojozhuang/text-compare-angular-prod
If you don't push them to hub.docker.com, you might get ErrImagePull
error.
kubectl get all -n prod
NAME READY STATUS RESTARTS AGE
pod/compare-helm-57f779585d-6c665 0/1 ErrImageNeverPull 0 5s
pod/compare-helm-6c5668997f-kzk9n 0/1 ErrImagePull 0 105s
Copy values.yaml
and create for nas
and prod
env.
kubectl create namespace nas
kubectl create namespace prod
Check new namespaces nas
and prod
are created.
kubectl get namespaces
NAME STATUS AGE
bit-developer Active 70m
default Active 6h24m
kube-node-lease Active 6h24m
kube-public Active 6h24m
kube-system Active 6h24m
kubernetes-dashboard Active 6h23m
nas Active 14s
prod Active 13s
Install for nas and prod namespaces.
helm install compare-helm-nas deployment --values deployment/values.yaml -f deployment/values-nas.yaml -n nas
helm install compare-helm-prod deployment --values deployment/values.yaml -f deployment/values-prod.yaml -n prod
List all namespaces.
helm ls --all-namespaces
NAME NAMESPACE REVISION UPDATED STATUS CHART APP VERSION
compare-helm default 6 2024-01-07 21:49:34.420836 -0800 PST deployed deployment-0.1.0 1.16.0
compare-helm-nas nas 1 2024-01-07 22:10:09.473106 -0800 PST deployed deployment-0.1.0 1.16.0
compare-helm-prod prod 1 2024-01-07 22:10:20.00086 -0800 PST deployed deployment-0.1.0 1.16.0
kubectl get all -n prod
kubectl describe pod compare-helm-77ddc9bc6b-xf96c -n prod
helm upgrade compare-helm-nas deployment --values deployment/values.yaml -f deployment/values-nas.yaml -n nas
helm upgrade compare-helm-prod deployment --values deployment/values.yaml -f deployment/values-prod.yaml -n prod
Start nas service and prod service seperately and access http://localhost:8888/
. You will see the env name on the home page is shown correctly, from nas
to production
.
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.