Added Dockerfile and renamed project

.dockerignore

@@ -0,0 +1,13 @@
+node_modules.angular
+.vscode
+dist
+node_modules
+npm-debug.log
+Dockerfile*
+docker-compose*
+.dockerignore
+.git
+.gitignore
+README.md
+LICENSE
+.editorconfig

.env

@@ -0,0 +1 @@
+JTR_API_URL="https://localhost:5001"

Dockerfile

@@ -0,0 +1,16 @@
+# Build application
+FROM node:20-alpine AS build
+WORKDIR /app
+COPY . .
+ARG API_URL="local"
+ENV JTR_API_URL=${API_URL}
+ARG NODE_ENV="development"
+ENV NODE_ENV=${NODE_ENV}
+RUN npm install
+RUN npm run build
+
+# Serve application
+FROM nginx:alpine
+COPY nginx.conf /etc/nginx/nginx.conf
+COPY --from=build /app/dist/jtr/browser /usr/share/nginx/html
+EXPOSE 80

angular.json

@@ -3,7 +3,7 @@
   "version": 1,
   "newProjectRoot": "projects",
   "projects": {
-    "DevDisciples.Json.Tools.App": {
+    "jtr": {
       "projectType": "application",
       "schematics": {
         "@schematics/angular:component": {
@@ -15,9 +15,9 @@
       "prefix": "app",
       "architect": {
         "build": {
-          "builder": "@angular-devkit/build-angular:application",
+          "builder": "@ngx-env/builder:application",
           "options": {
-            "outputPath": "dist/dev-disciples.json.tools.app",
+            "outputPath": "dist/jtr",
             "index": "src/index.html",
             "browser": "src/main.ts",
             "polyfills": [
@@ -30,7 +30,8 @@
                 "glob": "**/*",
                 "input": "public"
               },
-              { "glob": "**/*",
+              {
+                "glob": "**/*",
                 "input": "node_modules/monaco-editor",
                 "output": "/assets/monaco/"
               }
@@ -38,7 +39,10 @@
             "styles": [
               "src/styles.scss"
             ],
-            "scripts": []
+            "scripts": [],
+            "ngxEnv": {
+              "prefix": "JTR_"
+            }
           },
           "configurations": {
             "production": {
@@ -65,22 +69,22 @@
           "defaultConfiguration": "production"
         },
         "serve": {
-          "builder": "@angular-devkit/build-angular:dev-server",
+          "builder": "@ngx-env/builder:dev-server",
           "configurations": {
             "production": {
-              "buildTarget": "DevDisciples.Json.Tools.App:build:production"
+              "buildTarget": "jtr:build:production"
             },
             "development": {
-              "buildTarget": "DevDisciples.Json.Tools.App:build:development"
+              "buildTarget": "jtr:build:development"
             }
           },
           "defaultConfiguration": "development"
         },
         "extract-i18n": {
-          "builder": "@angular-devkit/build-angular:extract-i18n"
+          "builder": "@ngx-env/builder:extract-i18n"
         },
         "test": {
-          "builder": "@angular-devkit/build-angular:karma",
+          "builder": "@ngx-env/builder:karma",
           "options": {
             "polyfills": [
               "zone.js",
@@ -93,7 +97,8 @@
                 "glob": "**/*",
                 "input": "public"
               },
-              { "glob": "**/*",
+              {
+                "glob": "**/*",
                 "input": "node_modules/monaco-editor",
                 "output": "/assets/monaco/"
               }

nginx.conf

@@ -0,0 +1,27 @@
+# the events block is required
+events { }
+
+http {
+    # include the default mime.types to map file extensions to MIME types
+    include /etc/nginx/mime.types;
+
+    server {
+        # set the root directory for the server (we need to copy our
+        # application files here)
+        root /usr/share/nginx/html;
+
+        # set the default index file for the server (Angular generates the
+        # index.html file for us and it will be in the above directory)
+        index index.html;
+
+        # specify the configuration for the '/' location
+        location / {
+            # try to serve the requested URI. if that fails then try to
+            # serve the URI with a trailing slash. if that fails, then
+            # serve the index.html file; this is needed in order to serve
+            # Angular routes--e.g.,'localhost:8080/customer' will serve
+            # the index.html file
+            try_files $uri $uri/ /index.html;
+        }
+    }
+}

package.json

@@ -30,6 +30,7 @@
     "@angular-devkit/build-angular": "^18.2.4",
     "@angular/cli": "^18.2.4",
     "@angular/compiler-cli": "^18.2.0",
+    "@ngx-env/builder": "^18.0.2",
     "@types/jasmine": "~5.1.0",
     "jasmine-core": "~5.2.0",
     "karma": "~6.4.0",

src/app/beautify/beautify.component.ts

@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {EditorComponent} from "ngx-monaco-editor-v2";
 import {FormsModule} from "@angular/forms";
 import {InputOutputComponent} from "../input-output/input-output.component";
-import {JsonTransformService} from "../json-transform.service";
+import {JtrService} from "../jtr.service";
 import {
   DebounceTime,
   GenerateDefaultJsonObjectString,
@@ -23,14 +23,12 @@ import {BehaviorSubject, debounceTime} from "rxjs";
   styleUrl: './beautify.component.scss'
 })
 export class BeautifyComponent implements OnInit {
-  // input: string = ;
   $input: BehaviorSubject<string> = new BehaviorSubject<string>(GenerateDefaultJsonObjectString());
   inputOptions = MonacoJsonConfig;
   output: string = GenerateDefaultJsonObjectString(2);
   outputOptions = ReadOnlyMonacoJsonConfig;
-  // error: string = "";
 
-  constructor(private service: JsonTransformService) {
+  constructor(private service: JtrService) {
   }
 
   ngOnInit(): void {

src/app/json-path/json-path.component.ts

@@ -2,7 +2,7 @@ import {Component, OnInit} from '@angular/core';
 import {InputOutputComponent} from "../input-output/input-output.component";
 import {DebounceTime, GenerateDefaultJsonObjectString, MonacoJsonConfig, ReadOnlyMonacoCSharpConfig} from "../defaults";
 import {BehaviorSubject, debounceTime} from "rxjs";
-import {JsonTransformService} from "../json-transform.service";
+import {JtrService} from "../jtr.service";
 import {MatFormField} from "@angular/material/form-field";
 import {MatInputModule} from "@angular/material/input";
 
@@ -24,7 +24,7 @@ export class JsonPathComponent implements OnInit {
   output: string = "";
   outputOptions = ReadOnlyMonacoCSharpConfig;
 
-  constructor(private service: JsonTransformService) {
+  constructor(private service: JtrService) {
   }
 
   ngOnInit(): void {

src/app/json-transform.service.spec.ts

@@ -1,16 +0,0 @@
-import { TestBed } from '@angular/core/testing';
-
-import { JsonTransformService } from './json-transform.service';
-
-describe('JsonTransformService', () => {
-  let service: JsonTransformService;
-
-  beforeEach(() => {
-    TestBed.configureTestingModule({});
-    service = TestBed.inject(JsonTransformService);
-  });
-
-  it('should be created', () => {
-    expect(service).toBeTruthy();
-  });
-});

src/app/json2csharp/json2-csharp.component.ts

@@ -1,6 +1,6 @@
 import {Component, OnInit} from '@angular/core';
 import {InputOutputComponent} from "../input-output/input-output.component";
-import {JsonTransformService} from "../json-transform.service";
+import {JtrService} from "../jtr.service";
 import {
   DebounceTime,
   GenerateDefaultJsonObjectString,
@@ -24,7 +24,7 @@ export class Json2CsharpComponent implements OnInit {
   output: string = "";
   outputOptions = ReadOnlyMonacoCSharpConfig;
 
-  constructor(private service: JsonTransformService) {
+  constructor(private service: JtrService) {
   }
 
   ngOnInit(): void {

src/app/jtr.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import {  JtrService } from './jtr.service';
+
+describe('JtrService', () => {
+  let service: JtrService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(JtrService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/jtr.service.ts

@@ -5,8 +5,8 @@ import {Observable} from "rxjs";
 @Injectable({
   providedIn: 'root'
 })
-export class JsonTransformService {
-  private url: string = "https://localhost:5001";
+export class JtrService {
+  private url: string = import.meta.env.JTR_API_URL;
 
   constructor(private http: HttpClient) {
   }

src/app/layout/layout.component.html

@@ -15,7 +15,7 @@
       <button mat-icon-button (click)="drawer.toggle()">
         <mat-icon>menu</mat-icon>
       </button>
-      <span>JSON Transform</span>
+      <span>JSON Transform / JTR</span>
     </mat-toolbar>
 
     <main>

src/app/uglify/uglify.component.ts

@@ -1,5 +1,5 @@
 import {Component, OnInit} from '@angular/core';
-import {JsonTransformService} from "../json-transform.service";
+import {JtrService} from "../jtr.service";
 import {InputOutputComponent} from "../input-output/input-output.component";
 import {
   DebounceTime,
@@ -25,7 +25,7 @@ export class UglifyComponent implements OnInit {
   output: string = GenerateDefaultJsonObjectString();
   outputOptions = ReadOnlyMonacoJsonConfig;
 
-  constructor(private service: JsonTransformService) {
+  constructor(private service: JtrService) {
   }
 
   ngOnInit(): void {

src/env.d.ts

@@ -0,0 +1,28 @@
+// Define the type of the environment variables.
+declare interface Env {
+  readonly NODE_ENV: string;
+  // Replace the following with your own environment variables.
+  // Example: NGX_VERSION: string;
+  readonly JTR_API_URL: string;
+  [key: string]: any;
+}
+
+// Choose how to access the environment variables.
+// Remove the unused options.
+
+// 1. Use import.meta.env.YOUR_ENV_VAR in your code. (conventional)
+declare interface ImportMeta {
+  readonly env: Env;
+}
+
+// 2. Use _NGX_ENV_.YOUR_ENV_VAR in your code. (customizable)
+// You can modify the name of the variable in angular.json.
+// ngxEnv: {
+//  define: '_NGX_ENV_',
+// }
+declare const _NGX_ENV_: Env;
+
+// 3. Use process.env.YOUR_ENV_VAR in your code. (deprecated)
+declare namespace NodeJS {
+  export interface ProcessEnv extends Env {}
+}

src/styles.scss

@@ -10,7 +10,7 @@
 @include mat.core();
 
 // Define the theme object.
-$DevDisciples-Json-Tools-App-theme: mat.define-theme((
+$jtr-app-theme: mat.define-theme((
   color: (
     theme-type: light,
     primary: mat.$azure-palette,
@@ -25,15 +25,15 @@ $DevDisciples-Json-Tools-App-theme: mat.define-theme((
 // Alternatively, you can import and @include the theme mixins for each component
 // that you are using.
 :root {
-  @include mat.all-component-themes($DevDisciples-Json-Tools-App-theme);
+  @include mat.all-component-themes($jtr-app-theme);
 }
 
 // Comment out the line below if you want to use the pre-defined typography utility classes.
 // For more information: https://material.angular.io/guide/typography#using-typography-styles-in-your-application.
-// @include mat.typography-hierarchy($DevDisciples.Json.Tools.App-theme);
+// @include mat.typography-hierarchy($jtr-theme);
 
 // Comment out the line below if you want to use the deprecated `color` inputs.
-// @include mat.color-variants-backwards-compatibility($DevDisciples.Json.Tools.App-theme);
+// @include mat.color-variants-backwards-compatibility($jtr-theme);
 /* You can add global styles to this file, and also import other style files */
 
 html, body { height: 100%; }