{"id":13594815,"url":"https://github.com/Bit-Developer/text-compare-angular","last_synced_at":"2025-04-09T10:32:01.858Z","repository":{"id":39876069,"uuid":"142713038","full_name":"Bit-Developer/text-compare-angular","owner":"Bit-Developer","description":"A tool used to compare text and show difference, built with Angular and Monaco Editor.","archived":false,"fork":false,"pushed_at":"2024-01-08T06:48:50.000Z","size":1684,"stargazers_count":22,"open_issues_count":21,"forks_count":22,"subscribers_count":2,"default_branch":"master","last_synced_at":"2024-11-06T17:42:47.626Z","etag":null,"topics":["angularjs","dockerfile","monaco-editor","text-compare"],"latest_commit_sha":null,"homepage":"https://text-compare.netlify.com","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/Bit-Developer.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null}},"created_at":"2018-07-28T22:04:07.000Z","updated_at":"2024-10-17T02:22:57.000Z","dependencies_parsed_at":"2024-01-14T04:40:06.319Z","dependency_job_id":"71df5198-a0ec-4b5b-aeeb-c7874579554f","html_url":"https://github.com/Bit-Developer/text-compare-angular","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bit-Developer%2Ftext-compare-angular","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bit-Developer%2Ftext-compare-angular/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bit-Developer%2Ftext-compare-angular/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/Bit-Developer%2Ftext-compare-angular/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/Bit-Developer","download_url":"https://codeload.github.com/Bit-Developer/text-compare-angular/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248020592,"owners_count":21034459,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["angularjs","dockerfile","monaco-editor","text-compare"],"created_at":"2024-08-01T16:01:39.494Z","updated_at":"2025-04-09T10:32:00.125Z","avatar_url":"https://github.com/Bit-Developer.png","language":"TypeScript","funding_links":[],"categories":["TypeScript"],"sub_categories":[],"readme":"# Text Compare Tool\nThis app is used to compare text, built with Angular and [Monaco Editor](https://github.com/Microsoft/monaco-editor).\n\u003ckbd\u003e![image](/src/assets/typescript.png)\u003c/kbd\u003e\n\n# Function\nThis app can determine the different content for the given 'Original Text' and 'Changed Text'. It is based on [Monaco Diff Editor](https://microsoft.github.io/monaco-editor/index.html) and currently supporting the following features:\n* Syntax highlighting for 45+ languages, including c, c++, java, javascript, html, typescript, etc.\n* Three editor themes: Visual Studio, Visual Studio Dark and High Contrast Dark.\n* Diff Mode: Side by Side Diff, Inline Diff.\n\n# Technology\n* Frontend Framework: Angular\n* Styling: bootstrap\n* Text Editor: ngx-monaco-editor\n\n# Demo\nTwo available demos:\n* `Live Demo on Heroku:` \u003ca href=\"https://text-compare-angular.herokuapp.com/\" target=\"\\_blank\"\u003ehttps://text-compare-angular.herokuapp.com/\u003c/a\u003e\n* `Live Demo on Netlify:` \u003ca href=\"https://text-compare.netlify.com/\" target=\"\\_blank\"\u003ehttps://text-compare.netlify.com/\u003c/a\u003e\n* `Live Demo on Azure:` \u003ca href=\"https://text-compare.azurewebsites.net/\" target=\"\\_blank\"\u003ehttps://text-compare.azurewebsites.net/\u003c/a\u003e\n\n*Note: The demo websites may be slow when you access them for the first time. Be patient!*\n\n# Setup Locally\n```bash\ngit clone https://github.com/jojozhuang/text-compare-angular.git\ncd text-compare-angular\nnpm install\nnpm start\n```\nAccess http://localhost:12010/ in web browser and click 'Text Compare' menu, enjoy!\n\n# Setup in Docker\n```bash\ngit clone https://github.com/jojozhuang/text-compare-angular.git\ncd text-compare-angular\nnpm install\ndocker build -t text-compare-angular .\ndocker run --name text-compare-angular -p 8080:80 text-compare-angular\n```\nAccess http://localhost:8080/ in web browser and click 'Text Compare' menu, enjoy!\n\n# Setup in K8s\n\n```sh\n# 1. Build image\ndocker build -t text-compare-angular .\n# 2. Deploy to k8s:\nkubectl apply -f k8s/text-compare.yaml\n# 3. Create service in minikube:\nminikube service text-compare-service\n# 4. Web browser will be opened automatically to access the site.\n```\n\n# Use helm with k8s\n\nCreate helm chart with the following command.\n\n```sh\nhelm create deployment\n```\n\nThen, edit the deployment file, service and config map file accordingly.\n\nAfter editing all configuration files, install with helm.\n\n```sh\nhelm install compare-helm deployment\n```\n\nHelm will create k8s components based on the configuration files. Use `kubectl get all | grep helm` to find them.\n\n```sh\nkubectl get all | grep helm\npod/compare-helm-76b67b5db6-r6jwq              1/1     Running   0          12m\nservice/compare-helm           ClusterIP      10.97.189.245   \u003cnone\u003e        80/TCP            12m\ndeployment.apps/compare-helm              1/1     1            1           12m\nreplicaset.apps/compare-helm-76b67b5db6              1         1         1       12m\n```\n\nIf you make any change to the configuration files, use the following command to upgrade.\n\n```sh\nhelm upgrade compare-helm deployment\n```\n\nList all deployed namespaces.\n\n```sh\nhelm ls --all-namespaces\nNAME        \tNAMESPACE    \tREVISION\tUPDATED                             \tSTATUS  \tCHART           \tAPP VERSION\ncompare-helm\tdefault      \t2       \t2024-01-07 21:05:52.849445 -0800 PST\tdeployed\tdeployment-0.1.0\t1.16.0\ntext-compare\tbit-developer\t1       \t2024-01-07 20:50:29.372749 -0800 PST\tdeployed\tdeployment-0.1.0\t1.16.0\ntext-compare\tdefault      \t1       \t2024-01-07 20:42:49.758154 -0800 PST\tfailed  \tdeployment-0.1.0\t1.16.0\n```\n\nStart the service to view the web app in brower.\n\n```sh\nminikube service compare-helm\n```\n\n# Use helm with template\n\n## Use values.yaml\n\nEdit the file in `template` folder, use `Values` variables and put the actual values in `values.yaml`.\n\n```yaml\nappName: compare-helm\nnamespace: default\n\nconfigmap:\n  name: compare-configmap\n  data:\n    ENV_NAME: 'DEV'\n\nimage:\n  name: jojozhuang/text-compare-angular\n  tag: latest\n```\n\nUpgrade the deployment.\n\n```sh\nhelm upgrade compare-helm deployment --values deployment/values.yaml\nW0107 21:30:02.019806   39661 warnings.go:70] unknown field \"spec.ports[0].type\"\nRelease \"compare-helm\" has been upgraded. Happy Helming!\nNAME: compare-helm\nLAST DEPLOYED: Sun Jan  7 21:30:01 2024\nNAMESPACE: default\nSTATUS: deployed\nREVISION: 3\nTEST SUITE: None\n```\n\nAfter each upgrade, the revision number should be incremented.\n\n```sh\nhelm ls\nNAME        \tNAMESPACE\tREVISION\tUPDATED                             \tSTATUS  \tCHART           \tAPP VERSION\ncompare-helm\tdefault  \t5       \t2024-01-07 21:38:03.669554 -0800 PST\tdeployed\tdeployment-0.1.0\t1.16.0\n```\n\n## Add notes\n\nCreate file `NOTES.txt` under `deployment/templates` directory with the following content.\n\n```sh\nservicename=$(k get service -l \"app={{ .Values.appName }}\" -o jsonpath=\"{.items[0].metadata.name}\")\nkubectl --namespace {{ .Values.namespace}} port-forward service/{{ .Values.appName }} 8888:80\n```\n\nEach time when you run the upgrade command, you will see the notes in the output.\n\n```sh\nhelm upgrade compare-helm deployment --values deployment/values.yaml\nW0107 21:49:34.774115   40283 warnings.go:70] unknown field \"spec.ports[0].type\"\nRelease \"compare-helm\" has been upgraded. Happy Helming!\nNAME: compare-helm\nLAST DEPLOYED: Sun Jan  7 21:49:34 2024\nNAMESPACE: default\nSTATUS: deployed\nREVISION: 6\nTEST SUITE: None\nNOTES:\nservicename=$(k get service -l \"app=compare-helm\" -o jsonpath=\"{.items[0].metadata.name}\")\nkubectl --namespace default port-forward service/compare-helm 8888:80\n```\n\nCopy and paste the two lines and execute them in teminal.\n\n```sh\nservicename=$(k get service -l \"app=compare-helm\" -o jsonpath=\"{.items[0].metadata.name}\")\nkubectl --namespace default port-forward service/compare-helm 8888:80\n```\n\nThen, you are able to access your site through `http://localhost:8888/`.\n\n## Deploy to multiple environments\n\n### Docker images\n\nCreate two docker images first, one for `nas`, another for `prod`.\n\n```sh\ndocker build -t jojozhuang/text-compare-angular-nas -f Dockerfile-nas .\ndocker build -t jojozhuang/text-compare-angular-prod -f Dockerfile-prod .\n```\n\nList all images and make sure `jojozhuang/text-compare-angular-nas` and `jojozhuang/text-compare-angular-prod` are there.\n\n```sh\ndocker images\nREPOSITORY                             TAG       IMAGE ID       CREATED         SIZE\njojozhuang/text-compare-angular-prod   latest    4a53306114f5   4 seconds ago   30.8MB\njojozhuang/text-compare-angular-nas    latest    ee561a5e50b3   5 hours ago     30.8MB\njojozhuang/text-compare-angular        latest    ee561a5e50b3   5 hours ago     30.8MB\n```\n\nPush to docker hub.\n\n```sh\ndocker push jojozhuang/text-compare-angular-nas\ndocker push jojozhuang/text-compare-angular-prod\n```\n\nIf you don't push them to hub.docker.com, you might get `ErrImagePull` error.\n\n```sh\nkubectl get all -n prod\nNAME                                READY   STATUS              RESTARTS   AGE\npod/compare-helm-57f779585d-6c665   0/1     ErrImageNeverPull   0          5s\npod/compare-helm-6c5668997f-kzk9n   0/1     ErrImagePull        0          105s\n```\n\n### Environment specified value files\n\nCopy `values.yaml` and create for `nas` and `prod` env.\n\n```sh\nkubectl create namespace nas\nkubectl create namespace prod\n```\n\nCheck new namespaces `nas` and `prod` are created.\n\n```sh\nkubectl get namespaces\nNAME                   STATUS   AGE\nbit-developer          Active   70m\ndefault                Active   6h24m\nkube-node-lease        Active   6h24m\nkube-public            Active   6h24m\nkube-system            Active   6h24m\nkubernetes-dashboard   Active   6h23m\nnas                    Active   14s\nprod                   Active   13s\n```\n\nInstall for nas and prod namespaces.\n\n```sh\nhelm install compare-helm-nas deployment --values deployment/values.yaml -f deployment/values-nas.yaml -n nas\nhelm install compare-helm-prod deployment --values deployment/values.yaml -f deployment/values-prod.yaml -n prod\n```\n\nList all namespaces.\n\n```sh\nhelm ls --all-namespaces\nNAME             \tNAMESPACE\tREVISION\tUPDATED                             \tSTATUS  \tCHART           \tAPP VERSION\ncompare-helm     \tdefault  \t6       \t2024-01-07 21:49:34.420836 -0800 PST\tdeployed\tdeployment-0.1.0\t1.16.0\ncompare-helm-nas \tnas      \t1       \t2024-01-07 22:10:09.473106 -0800 PST\tdeployed\tdeployment-0.1.0\t1.16.0\ncompare-helm-prod\tprod     \t1       \t2024-01-07 22:10:20.00086 -0800 PST \tdeployed\tdeployment-0.1.0\t1.16.0\n```\n\n```sh\nkubectl get all -n prod\nkubectl describe pod compare-helm-77ddc9bc6b-xf96c -n prod\n```\n\n```sh\nhelm upgrade compare-helm-nas deployment --values deployment/values.yaml -f deployment/values-nas.yaml -n nas\nhelm upgrade compare-helm-prod deployment --values deployment/values.yaml -f deployment/values-prod.yaml -n prod\n```\n\nStart 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`.\n\n- [How to Create Helm Charts - The Ultimate Guide](https://www.youtube.com/watch?v=jUYNS90nq8U\u0026ab_channel=DevOpsJourney)\n\n# Deployment\nRead tutorial [Deploying Text Compare Angular App to Docker](https://jojozhuang.github.io/tutorial/deploying-text-compare-angular-app-to-docker) to learn how this angular app is deployed to Docker.\n\nRead tutorial [Deploying Text Compare Angular App to Netlify](https://jojozhuang.github.io/tutorial/deploying-text-compare-angular-app-to-netlify) to learn how this angular app is deployed to Netlify.\n\n# Portfolio\nRead portfolio [Text Compare(Angular)](https://jojozhuang.github.io/project/text-compare-angular) to learn the main functions of this text compare tool.\n\n# Tutorial\nRead tutorial [Building Online Text Compare Tool with Angular](https://jojozhuang.github.io/tutorial/building-online-text-compare-tool-with-angular) to learn how this text compare tool is built.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBit-Developer%2Ftext-compare-angular","html_url":"https://awesome.ecosyste.ms/projects/github.com%2FBit-Developer%2Ftext-compare-angular","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2FBit-Developer%2Ftext-compare-angular/lists"}