updated todo-front distributed

Author: JaimeSalas

02-orquestacion/exercises/02-distributed/todo-front/Dockerfile

@@ -1,15 +1,15 @@
-FROM node:12-alpine3.12 as builder
+FROM node:22-alpine AS builder
 
 ARG API_HOST
 
 WORKDIR /app
 
-COPY . .
+COPY . . 
 
-RUN npm i 
+RUN npm ci 
 
-RUN npm run build
+RUN npm run build 
 
-FROM nginx as frontend
+FROM nginx AS frontend 
 
-COPY --from=builder /app/dist /usr/share/nginx/html
+COPY --from=builder /app/dist /usr/share/nginx/html 

02-orquestacion/exercises/02-distributed/todo-front/README.md

@@ -3,11 +3,11 @@
 ## Build to Test on local
 
 ```bash
-$ docker build -t lemoncode/todo-front --build-arg  API_HOST=http://localhost:3000 .
+docker build -t lemoncode/todo-front --build-arg  API_HOST=http://localhost:3000 .
 ```
 
 ## Running on local
 
 ```bash
-$ docker run -d -p 80:80 lemoncode/todo-front
+docker run -d -p 80:80 lemoncode/todo-front
 ```

02-orquestacion/exercises/02-distributed/todo-front/config/webpack.common.js

@@ -1,59 +1,59 @@
-const HtmlWebpackPlugin = require('html-webpack-plugin');
-const { CleanWebpackPlugin } = require('clean-webpack-plugin');
-const MiniCssExtractPlugin = require('mini-css-extract-plugin');
-const DotEnv = require('dotenv-webpack');
-const path = require('path');
+const HtmlWebpackPlugin = require("html-webpack-plugin");
+const { CleanWebpackPlugin } = require("clean-webpack-plugin");
+const MiniCssExtractPlugin = require("mini-css-extract-plugin");
+const DotEnv = require("dotenv-webpack");
+const path = require("path");
 
 module.exports = {
-    context: path.join(__dirname, '../', 'src'),
-    resolve: {
-        extensions: ['.js', '.ts', '.tsx']
-    },
-    entry: {
-        app: ['./index.tsx'],
-        appStyles: ['./styles.scss']
-    },
-    output: {
-        filename: '[name].[chunkhash].js',
-        path: path.resolve(process.cwd(), 'dist'),
-    },
-    module: {
-        rules: [
-            {
-                test: /\.tsx?$/,
-                exclude: /node_modules/,
-                loader: 'babel-loader',
+  context: path.join(__dirname, "../", "src"),
+  resolve: {
+    extensions: [".js", ".ts", ".tsx"],
+  },
+  entry: {
+    app: ["./index.tsx"],
+    appStyles: ["./styles.scss"],
+  },
+  output: {
+    filename: "[name].[chunkhash].js",
+    path: path.resolve(process.cwd(), "dist"),
+  },
+  module: {
+    rules: [
+      {
+        test: /\.tsx?$/,
+        exclude: /node_modules/,
+        loader: "babel-loader",
+      },
+      {
+        test: /\.scss$/,
+        exclude: /node_modules/,
+        use: [
+          MiniCssExtractPlugin.loader,
+          "css-loader",
+          {
+            loader: "sass-loader",
+            options: {
+              implementation: require("sass"),
             },
-            {
-                test: /\.scss$/,
-                exclude: /node_modules/,
-                use: [
-                    MiniCssExtractPlugin.loader,
-                    'css-loader',
-                    {
-                        loader: 'sass-loader',
-                        options: {
-                            implementation: require('sass'),
-                        }
-                    }
-                ]
-            },
-        ]
-    },
-    plugins: [
-        new HtmlWebpackPlugin({
-            filename: 'index.html',
-            template: 'index.html',
-        }),
-        new CleanWebpackPlugin(),
-        new MiniCssExtractPlugin({
-            filename: '[name].css',
-            chunkFilename: '[id].css',
-        }),
-        new DotEnv({
-            path: './.env',
-            allowEmptyValues: true,
-            systemvars: true,
-        }),
+          },
+        ],
+      },
     ],
-};
+  },
+  plugins: [
+    new HtmlWebpackPlugin({
+      filename: "index.html",
+      template: "index.html",
+    }),
+    new CleanWebpackPlugin(),
+    new MiniCssExtractPlugin({
+      filename: "[name].css",
+      chunkFilename: "[id].css",
+    }),
+    new DotEnv({
+      path: "./.env",
+      allowEmptyValues: true,
+      systemvars: true,
+    }),
+  ],
+};

02-orquestacion/exercises/02-distributed/todo-front/config/webpack.dev.js

@@ -2,12 +2,12 @@ const { merge } = require('webpack-merge');
 const common = require('./webpack.common');
 
 module.exports = merge(common, {
-    mode: 'development',
-    devtool: 'eval-source-map',
-    devServer: {
-        proxy: {
-            '/api/': 'http://localhost:3000',
-        },
-        port: 8081,
+  mode: 'development',
+  devtool: 'eval-source-map',
+  devServer: {
+    proxy: {
+      '/api/': 'http://localhost:3000',
     },
-});
+    port: 8081,
+  },
+});