initial commit

Author: sebenitezg

.editorconfig

@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false

.github/workflows/buildfeatures.yml

@@ -0,0 +1,29 @@
+# This workflow will do a clean installation of node dependencies, cache/restore them, build the source code and run tests across different versions of node
+# For more information see: https://docs.github.com/en/actions/automating-builds-and-tests/building-and-testing-nodejs
+
+name: Build features
+
+on:
+  pull_request:
+    branches: feature/
+
+jobs:
+  build:
+
+    runs-on: windows-lates
+    
+    steps:
+    
+    - uses: actions/checkout@v3
+    
+    - name: Use Node.js 18
+      uses: actions/setup-node@v3
+      with:
+        node-version: 18
+        cache: 'npm'
+        
+    - run: npm ci
+    
+    - run: npm run build --if-present
+    
+    - run: npm test

.gitignore

@@ -0,0 +1,38 @@
+# See http://help.github.com/ignore-files/ for more about ignoring files.
+
+# Compiled output
+/dist
+/tmp
+/out-tsc
+/bazel-out
+
+# Node
+/node_modules
+npm-debug.log
+yarn-error.log
+
+# IDEs and editors
+.idea/
+.project
+.classpath
+.c9/
+*.launch
+.settings/
+*.sublime-workspace
+
+# Visual Studio Code
+.vscode/*
+.history/*
+
+# Miscellaneous
+/.angular/cache
+.sass-cache/
+/connect.lock
+/coverage
+/libpeerconnection.log
+testem.log
+/typings
+
+# System files
+.DS_Store
+Thumbs.db

DOCUMENTATION.md

@@ -0,0 +1,49 @@
+# CustomerPwa
+
+This project was generated with [Angular CLI](https://github.com/angular/angular-cli) version 15.2.5.
+
+## Tutorial references used to build this project
+
+* [Create a modular Angulara pplication wiht Angular materials](https://dev.to/codingcatdev/angular-material-router-outlet-3292)
+* [CRUDs with angular materials 14 ](https://www.learmoreseekmore.com/2022/10/angular-v14-angularmaterial-v14-crud-example.html)
+
+## Further help
+
+To get more help on the Angular CLI use `ng help` or go check out the [Angular CLI Overview and Command Reference](https://angular.io/cli) page.
+
+## Development server
+
+Run `ng serve` for a dev server. Navigate to `http://localhost:4200/`. The application will automatically reload if you change any of the source files.
+
+## Code scaffolding
+
+Run `ng generate component component-name` to generate a new component. You can also use `ng generate directive|pipe|service|class|guard|interface|enum|module`.
+
+## Build
+
+Run `ng build` to build the project. The build artifacts will be stored in the `dist/` directory.
+
+## Running unit tests
+
+Run `ng test` to execute the unit tests via [Karma](https://karma-runner.github.io).
+
+## Running end-to-end tests
+
+Run `ng e2e` to execute the end-to-end tests via a platform of your choice. To use this command, you need to first add a package that implements end-to-end testing capabilities.
+
+## Staerting the application 
+```sh
+npm start 
+```
+## Test run ng serve for production
+```sh
+ng serve --configuration=production
+```
+## Build docker image 
+```sh
+npm run docker-build
+```
+## Run docker container 
+```sh
+ npm run docker-run
+```

Dockerfile

@@ -0,0 +1,22 @@
+# Primero, construimos la aplicación Angular
+FROM node:lts-alpine AS build
+WORKDIR /app
+COPY package*.json ./
+RUN npm ci --omit=dev
+COPY . .
+RUN npm run build
+
+# Luego, desplegamos la aplicación en un servidor web
+FROM nginx:1.23.4-alpine
+COPY --from=build /app/dist/customer-pwa /usr/share/nginx/html
+COPY nginx.conf /etc/nginx/nginx.conf
+
+# Establecemos la variable de entorno NODE_ENV
+ENV NODE_ENV production
+
+# Configuramos el puerto para desarrollo (puerto 4200) y producción (puerto 80)
+ARG PORT=80
+ENV PORT=${PORT}
+EXPOSE ${PORT}
+
+CMD ["nginx", "-g", "daemon off;"]

README.md

@@ -0,0 +1,72 @@
+# Angular CRUD By [Sotobotero](https://sotobotero.com)
+
+**Content**   
+1. [Como contribuir con este proyecto](#como-contribuir-con-este-proyecto)
+2. [Como empezar a usar la aplicación](#como-empezar)
+3. [How contribute to this project](#how-contribute-to-this-project)
+4. [Getting Started](#getting-started)
+
+## Como contribuir con este proyecto. 
+1. Primero, necesitas hacer un fork del repositorio al que deseas contribuir. Esto creará una copia del repositorio en tu cuenta de GitHub. Puedes hacer un fork de un repositorio haciendo clic en el botón "Fork" en la esquina superior derecha de la página del repositorio. 
+
+2. A continuación, necesitas clonar tu repositorio bifurcado en tu máquina local. Esto te permitirá trabajar en los archivos del proyecto sin conexión. Puedes clonar tu repositorio bifurcado utilizando el comando git clone con la URL de tu bifurcación.
+
+3. Después de clonar tu repositorio bifurcado, necesitas crear una rama para trabajar en tus cambios. Una rama es una versión separada del código que puedes modificar sin afectar la rama principal. Puedes crear una rama utilizando el comando git branch con el nombre de tu rama.
+
+4. Una vez que hayas creado una rama, necesitas cambiar a ella utilizando el comando git checkout con el nombre de tu rama. Esto hará que tu rama sea la activa y cualquier cambio que hagas se aplicará a ella. 
+
+5. Ahora puedes empezar a trabajar en tus cambios. Puedes editar, agregar o eliminar cualquier archivo en tu rama como desees. Puedes utilizar cualquier editor de código o IDE que prefieras. 
+
+6. Después de hacer tus cambios, necesitas hacer commit de ellos en tu rama. 
+
+7. A continuación, necesitas enviar tus cambios a tu repositorio bifurcado en GitHub. Esto subirá tu rama y sus commits a tu repositorio en línea. Puedes enviar tus cambios utilizando el comando git push con el nombre de tu remoto (normalmente origin) y el nombre de tu rama.
+
+8. Por último, necesitas crear una solicitud de extracción (pull request) desde tu rama al repositorio original del que hiciste la bifurcación. Una solicitud de extracción es una solicitud para que los mantenedores del repositorio original revisen y fusionen tus cambios en su rama principal. Puedes crear una solicitud de extracción haciendo clic en el botón "Pull Request" en la página de tu repositorio bifurcado en GitHub. 
+## Como empezar
+### Requisitos
+1. Instalar [Node.js LTS](https://nodejs.org/es/) (v18.16.0) o superior y [Angular CLI](https://cli.angular.io/) (v13) o superior.
+2. Opcional: Clonar e iniciarlizar el backend de la aplicación [customer-back](https://github.com/sotobotero/customer-back), si no se tiene el backend, la aplicación solo cargrá el front pero no tendra conexión a un back.
+### Instalación
+1. Clonar el repositorio
+2. Entrar a la carpeta del proyecto
+3. Instalar los paquetes de npm con el comando `npm install`.
+4. Ejecutar el comando `ng serve --configuration=production` para un servidor de desarrollo. Navegar a `http://localhost:4200/customers`. 
+La aplicación se recargará automáticamente si se cambia alguno de los archivos de origen.
+
+
+## How contribute to this project. 
+1. First, you need to fork the repository that you want to contribute to. This will create a copy of the repository under your own GitHub account. You can fork a repository by clicking the Fork button on the top right corner of the repository page.
+
+2. Next, you need to clone your forked repository to your local machine. This will allow you to work on the project files offline. You can clone your forked repository by using the git clone command with the URL of your fork. 
+
+3. After cloning your forked repository, you need to create a branch to work on your changes. A branch is a separate version of the code that you can modify without affecting the main branch. You can create a branch by using the git branch command with the name of your branch. 
+
+4. Once you have created a branch, you need to switch to it by using the git checkout command with the name of your branch. This will make your branch the active one and any changes you make will be applied to it.
+
+5. Now you can start working on your changes. You can edit, add, or delete any files in your branch as you wish. You can use any code editor or IDE that you prefer. 
+
+6. After making your changes, you need to commit them to your branch. A commit is a snapshot of your changes that records what you have done and why. You can commit your changes by using the git commit command with a message that describes your changes. 
+
+7. Next, you need to push your changes to your forked repository on GitHub. This will upload your branch and its commits to your online repository. You can push your changes by using the git push command with the name of your remote (usually origin) and the name of your branch. 
+
+8. Finally, you need to create a pull request from your branch to the original repository that you forked from. A pull request is a request for the maintainers of the original repository to review and merge your changes into their main branch. You can create a pull request by clicking the Pull Request button on your forked repository page on GitHub.
+
+## Getting Started
+
+## Requirements
+1. Install Node.js LTS (v18.16.0) or later and Angular CLI (v13) or later.
+2. Optional: Clone and start the backend of the [customer-back](https://github.com / sotobotero / customer-back) application, if you don't have the backend, the application will only load the front but will have no connection to a backend.
+
+
+## Installation
+1. Clone the repository
+2. Enter the project folder
+3. Install npm packages with the command npm install.
+4. Run the command ng serve --configuration=production for a development server. Navigate to http://localhost:4200/customers.
+The application will reload automatically if any of the source files are changed.
+
+
+## Angular 2+ - Environment Variables
+Due to this app are execute on web browser, you can't use environment variables on environments/environment.ts, becuase this file are execute on server side, and enviroment variables are not available on server side.
+
+If you want to use environment variables on environments/environment.prod.ts, you need to change the aporach for use dotenv lib and  dotenv-webpack plugin for webpack. 

angular.json

@@ -0,0 +1,106 @@
+{
+  "$schema": "./node_modules/@angular/cli/lib/config/schema.json",
+  "version": 1,
+  "newProjectRoot": "projects",
+  "projects": {
+    "customer-pwa": {
+      "projectType": "application",
+      "schematics": {},
+      "root": "",
+      "sourceRoot": "src",
+      "prefix": "app",
+      "architect": {
+        "build": {
+          "builder": "@angular-devkit/build-angular:browser",
+          "options": {
+            "outputPath": "dist/customer-pwa",
+            "index": "src/index.html",
+            "main": "src/main.ts",
+            "polyfills": [
+              "zone.js"
+            ],
+            "tsConfig": "tsconfig.app.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/styles.css"
+            ],
+            "scripts": []
+          },
+          "configurations": {
+            "production": {
+              "fileReplacements": [
+                {
+                  "replace": "src/environments/environment.ts",
+                  "with": "src/environments/environment.prod.ts"
+                }
+              ], 
+              "budgets": [
+                {
+                  "type": "initial",
+                  "maximumWarning": "500kb",
+                  "maximumError": "1mb"
+                },
+                {
+                  "type": "anyComponentStyle",
+                  "maximumWarning": "2kb",
+                  "maximumError": "4kb"
+                }
+              ],
+              "outputHashing": "all"
+            },
+            "development": {
+              "buildOptimizer": false,
+              "optimization": false,
+              "vendorChunk": true,
+              "extractLicenses": false,
+              "sourceMap": true,
+              "namedChunks": true
+            }
+          },
+          "defaultConfiguration": "production"
+        },
+        "serve": {
+          "builder": "@angular-devkit/build-angular:dev-server",
+          "configurations": {
+            "production": {
+              "browserTarget": "customer-pwa:build:production"
+            },
+            "development": {
+              "browserTarget": "customer-pwa:build:development"
+            }
+          },
+          "defaultConfiguration": "development"
+        },
+        "extract-i18n": {
+          "builder": "@angular-devkit/build-angular:extract-i18n",
+          "options": {
+            "browserTarget": "customer-pwa:build"
+          }
+        },
+        "test": {
+          "builder": "@angular-devkit/build-angular:karma",
+          "options": {
+            "polyfills": [
+              "zone.js",
+              "zone.js/testing"
+            ],
+            "tsConfig": "tsconfig.spec.json",
+            "assets": [
+              "src/favicon.ico",
+              "src/assets"
+            ],
+            "styles": [
+              "@angular/material/prebuilt-themes/indigo-pink.css",
+              "src/styles.css"
+            ],
+            "scripts": []
+          }
+        }
+      }
+    }
+  }
+}