Deploy CosmeValera/CosmeValera.github.io to CosmeValera/CosmeValera.g…

…ithub.io:gh-pages
CosmeValera · Jun 16, 2024 · 4d72ab2 · 4d72ab2
commit 4d72ab2
Show file tree

Hide file tree

Showing 55 changed files with 9,554 additions and 0 deletions.
diff --git a/404.html b/404.html
@@ -0,0 +1,3 @@
+<!doctype html>
+<title>404 Not Found</title>
+<h1>404 Not Found</h1>
diff --git a/blog-post.css b/blog-post.css
diff --git a/blog.css b/blog.css
diff --git a/blog/develop-with-vite/index.html b/blog/develop-with-vite/index.html
@@ -0,0 +1,122 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <title>
+
+  Blog | Cosme
+
+        </title>
+
+        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Andika:wght@400;700&family=Inter:wght@400;600;700&family=Raleway:wght@400;500;700;900&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
+        <link rel="stylesheet" href="https://cosmevalera.github.io/fonts.css">
+        <link rel="stylesheet" href="https://cosmevalera.github.io/fontawesome/css/fontawesome.css">
+
+
+          <link rel="icon" href="https://cosmevalera.github.io/favicon.jpg" />
+
+
+
+  <link rel="stylesheet" href="https://cosmevalera.github.io/blog-post.css">
+
+    </head>
+    <body>
+        <main>
+
+<div class="column right">
+  <nav class="nav-shared">
+    <ul>
+      <li>
+        <a href="/">
+          <img class="portrait-menu-item" src="https://cosmevalera.github.io/images/portrait2.jpg" alt="Portrait" />
+        </a>
+      </li>
+
+        <li>
+          <a class="menu-item" href="&#x2F;projects&#x2F;">Projects</a>
+        </li>
+
+        <li>
+          <a class="menu-item" href="&#x2F;blog&#x2F;">Blog</a>
+        </li>
+
+    </ul>
+  </nav>
+  <hr>
+
+  <div class="blog-post">
+      <h2 class="presentation-text">Develop with Vite</h2>
+      <h3 class="presentation-text">Development guide for launching a Vite project using the Module Federation plugin</h3>
+      <div class="post-content">
+          <p><img src="/images/blog/2024-06-15/vite.png" alt="blog-cover" /></p>
+<h4><b>🧪 Development</b></h4>
+<p>We need to execute <i>npm run build</i> and then <i>npm run preview</i> to have the <b>Vite</b> application running with Module Federations.</p>
+<p>We have 2 options for having it in one command:</p>
+<p><b>Option 1.</b> Use <i>concurrently</i>:</p>
+<ul>
+<li>1.1 <i>package.json</i>:</li>
+</ul>
+<div style="border: 1px solid white; font-style: italic; border-radius: 1rem; padding: 0.5rem; margin: 10px 0">"preview:watch": "concurrently \"vite preview --port 4001 -l silent\" \"vite build --watch\""</div>
+<div style="margin-top: 1.5rem;"></div>
+<p><b>Option 2.</b> Create a custom script:</p>
+<ul>
+<li>2.1 <i>package.json</i>:</li>
+</ul>
+<div style="border: 1px solid white; font-style: italic; border-radius: 1rem; padding: 0.5rem; margin: 10px 0">
+"start": "bash vite-execution-script.sh 4001",
+</div>
+<ul>
+<li>2.2 Custom script:</li>
+</ul>
+<div style="border: 1px solid white; font-style: italic; border-radius: 1rem; padding: 0.5rem; margin: 10px 0">
+<p>#!/bin/bash</p>
+<p>PORT=&quot;$1&quot;</p>
+<p># If the port is already in use, then kill the PID related to that port<br />
+PID=$(netstat -ano | grep &quot;:${PORT} &quot; | grep LISTENING | awk '{print $5}')</p>
+<p>if [ -n &quot;$PID&quot; ]; then
+taskkill //F //PID $PID
+fi</p>
+<p># Run 'npm run build --watch' in the background and store its process ID<br />
+npm run build &amp;
+BUILD_WATCH_PID=$!</p>
+<p># Wait for a brief moment to ensure the 'build --watch' process is up and running<br />
+sleep 2</p>
+<p># Run 'npm run preview' also in the background and store its process ID<br />
+npm run preview &amp;
+PREVIEW_PID=$!</p>
+<p>printf 'Welcome: %s\n' &quot;$BUILD_WATCH_PID $PREVIEW_PID&quot;</p>
+<p># Wait for any background job to finish (if one finishes, they both should be killed)<br />
+wait -n</p>
+<p># Kill both processes if they are still running<br />
+kill $BUILD_WATCH_PID $PREVIEW_PID 2&gt;/dev/null</p>
+</div>
+<p><img src="/images/blog/general/garlands.png" alt="garnalds" /></p>
+<h4><b>🔃 Challenges with HMR and Module Federations</b></h4>
+Vite excels in many areas, but achieving Hot Module Reload (HMR) with Module Federation is difficult. Developers must manually refresh the screen after changes. Despite forum discussions about a potential <i>npm run preview --watch</i> command, as of June 15, 2024, no direct solution exists for seamless HMR.
+<div style="margin-top: 1.5rem;"></div>
+<p><b>Theoretical Expectation</b></p>
+<ul>
+<li><i>npm run dev</i> should ideally create the Module Federation JavaScript file (<i>remoteEntry.js</i>) automatically.</li>
+<li>This behavior is not observed due to limitations in the <i>vite-plugin-federation.</i></li>
+</ul>
+
+      </div>
+  </div>
+</div>
+
+        </main>
+        <footer>
+            <p class="text-center">Copyright © 2024 Cosme</p>
+        </footer>
+
+
+    </body>
+</html>
+
+
diff --git a/blog/index.html b/blog/index.html
@@ -0,0 +1,83 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <title>
+
+  Blog | Cosme
+
+        </title>
+
+        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Andika:wght@400;700&family=Inter:wght@400;600;700&family=Raleway:wght@400;500;700;900&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
+        <link rel="stylesheet" href="https://cosmevalera.github.io/fonts.css">
+        <link rel="stylesheet" href="https://cosmevalera.github.io/fontawesome/css/fontawesome.css">
+
+
+          <link rel="icon" href="https://cosmevalera.github.io/favicon.jpg" />
+
+
+
+  <link rel="stylesheet" href="https://cosmevalera.github.io/blog.css">
+
+    </head>
+    <body>
+        <main>
+
+<div class="column right">
+  <nav class="nav-shared">
+    <ul>
+      <li>
+        <a href="/">
+          <img class="portrait-menu-item" src="https://cosmevalera.github.io/images/portrait2.jpg" alt="Portrait" />
+        </a>
+      </li>
+
+        <li>
+          <a class="menu-item" href="&#x2F;projects&#x2F;">Projects</a>
+        </li>
+
+        <li>
+          <a class="menu-item" href="&#x2F;blog&#x2F;">Blog</a>
+        </li>
+
+    </ul>
+  </nav>
+  <hr>
+
+  <div class="blog-cards">
+
+    <a class="blog-card" href="https:&#x2F;&#x2F;cosmevalera.github.io&#x2F;blog&#x2F;develop-with-vite&#x2F;">
+      <h3 class="blog-title">Develop with Vite</h3>
+      <div class="blog-card-details">
+        <p class="card-description"> Development guide for launching a Vite project using the Module Federation plugin </p>
+        <span class="card-date"> August 02, 2024</span>
+      </div>
+    </a>
+
+    <a class="blog-card" href="https:&#x2F;&#x2F;cosmevalera.github.io&#x2F;blog&#x2F;vite-vs-webpack-mf&#x2F;">
+      <h3 class="blog-title">Vite vs Webpack (MF)</h3>
+      <div class="blog-card-details">
+        <p class="card-description"> Comparing Vite and Webpack for microfrontend development </p>
+        <span class="card-date"> July 01, 2024</span>
+      </div>
+    </a>
+
+  </div>
+</div>
+
+        </main>
+        <footer>
+            <p class="text-center">Copyright © 2024 Cosme</p>
+        </footer>
+
+
+    </body>
+</html>
+
+
diff --git a/blog/vite-vs-webpack-mf/index.html b/blog/vite-vs-webpack-mf/index.html
@@ -0,0 +1,102 @@
+<!DOCTYPE html>
+<html>
+    <head>
+        <meta charset="UTF-8">
+        <meta name="viewport" content="width=device-width, initial-scale=1.0">
+
+        <title>
+
+  Blog | Cosme
+
+        </title>
+
+        <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-4bw+/aepP/YC94hEpVNVgiZdgIC5+VKNBQNGCHeKRQN+PtmoHDEXuppvnDJzQIu9" crossorigin="anonymous">
+        <link rel="preconnect" href="https://fonts.googleapis.com">
+        <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+        <link href="https://fonts.googleapis.com/css2?family=Andika:wght@400;700&family=Inter:wght@400;600;700&family=Raleway:wght@400;500;700;900&display=swap" rel="stylesheet">
+        <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/4.1.1/animate.min.css">
+        <link rel="stylesheet" href="https://cosmevalera.github.io/fonts.css">
+        <link rel="stylesheet" href="https://cosmevalera.github.io/fontawesome/css/fontawesome.css">
+
+
+          <link rel="icon" href="https://cosmevalera.github.io/favicon.jpg" />
+
+
+
+  <link rel="stylesheet" href="https://cosmevalera.github.io/blog-post.css">
+
+    </head>
+    <body>
+        <main>
+
+<div class="column right">
+  <nav class="nav-shared">
+    <ul>
+      <li>
+        <a href="/">
+          <img class="portrait-menu-item" src="https://cosmevalera.github.io/images/portrait2.jpg" alt="Portrait" />
+        </a>
+      </li>
+
+        <li>
+          <a class="menu-item" href="&#x2F;projects&#x2F;">Projects</a>
+        </li>
+
+        <li>
+          <a class="menu-item" href="&#x2F;blog&#x2F;">Blog</a>
+        </li>
+
+    </ul>
+  </nav>
+  <hr>
+
+  <div class="blog-post">
+      <h2 class="presentation-text">Vite vs Webpack (MF)</h2>
+      <h3 class="presentation-text">Comparing Vite and Webpack for microfrontend development</h3>
+      <div class="post-content">
+          <p><img src="/images/blog/2024-06-01/vite-vs-webpack.webp" alt="blog-cover" /></p>
+<h4><b>Overview</b></h4>
+<p><b>Vite</b> and <b>Webpack</b> are popular module bundlers with different approaches, especially regarding microfrontends.</p>
+<h4><b>Key Points of Comparison</b></h4>
+<p><b>1. Module Federation</b></p>
+<ul>
+<li><b>Webpack:</b> Uses <i>ModuleFederationPlugin</i> for sharing code.</li>
+<li><b>Vite:</b> Uses <i>vite-plugin-federation</i>.</li>
+</ul>
+<p><b>2. Development Experience</b></p>
+<ul>
+<li><b>Hot Reloading:</b>
+<ul>
+<li><b>Webpack:</b> Supports live hot reloading.</li>
+<li><b>Vite:</b> Requires build and preview commands, not as fast as Webpack.</li>
+</ul>
+</li>
+<li><b>Running All Microfrontends:</b> Vite needs all microfrontends running for the host to work.</li>
+</ul>
+<p><b>3. Remote Entry Generation</b></p>
+<ul>
+<li><b>Webpack:</b> Generates remoteEntry.js during development.</li>
+<li><b>Vite:</b> Generates remoteEntry.js only during the build.</li>
+</ul>
+<p><b>4. Compatibility</b></p>
+<ul>
+<li><b>Interoperability</b> between Webpack and Vite requires special handling for proper communication.</li>
+</ul>
+<p><img src="/images/blog/general/garlands.png" alt="garnalds" /></p>
+<h4><b>Conclusion</b></h4>
+<p>Choosing <b>Webpack</b> or <b>Vite</b> depends on your project needs. <b>Webpack</b> works well with microfrontends and has a mature ecosystem. <b>Vite</b> is faster for development and builds but needs all microfrontends built and previewed for Module Federation.</p>
+
+      </div>
+  </div>
+</div>
+
+        </main>
+        <footer>
+            <p class="text-center">Copyright © 2024 Cosme</p>
+        </footer>
+
+
+    </body>
+</html>
+
+
diff --git a/favicon.ico b/favicon.ico
@@ -0,0 +1 @@
+../upstream/favicon.ico
diff --git a/favicon.jpg b/favicon.jpg