JavaScript Unscripted

GETHUB   A simple NodeJS Server: const http = require ( 'http' ); const PORT = process . env . PORT || 3000 ; async function startServer () {     const server = http . createServer (( req , res ) => {           res . writeHead ( 200 , { "Content-Type" : "text/plain" });           res . end ( "Hello, world!" );     });     server . listen ( PORT , () => {           console . log ( `Server is running on port ${ PORT } ` );     }); } startServer (); Navigate to localhost:3000 gives "Hello world!" Dockerfile FROM node : alpine WORKDIR /app COPY package.json . RUN npm install COPY . . EXPOSE 3000 ENV PORT = 3000 CMD [ "node" , "server.js" ] Create Docker Image c:\azure-keyvault-demo > docker build -f Dockerfile -t keyvault-demo:v1 . This image should be created in Docker Desktop Run Docker Image c:\azure-keyvault-demo > docker run -d -p ...

This will be our app 's initial setup In the pre-Azure changes, 8081 was the port for remote-app and 8080 for host-app as seen from  here GITHUB Deploying this on Azure as a Container App. Note: Docker is like a ready-to-eat meal —it’s already cooked and packed, so you can take it anywhere. Azure Container Registry (ACR) is like a fridge where you store your meal until you need it. Azure Container Apps (ACA) is like a microwave or chef that heats it up and serves it when you're ready to eat. So, Docker preps the meal, ACR stores it, and ACA serves it hot when needed! As soon as you prep a meal, first store it first in the ACR fridge. And then serve it on need basis from ACA Docker If you think about the application lifecycle—setting up the environment, adding the package.json file, installing dependencies, bringing in your code, building it, and finally running the application—you simply write these steps in an organized way inside a Dockerfile . This ensures everyt...

What is Module Federation?  To understand Module Federation, we need to first know some basics of webpack: Webpack Basics Now that we know that webpack  bundles all the source files  the bundled files sits in a /dist folder (or as configured in webpack.config.js) We need to add plugins if we need to bundle HTML files We need to add "rules" if we need to bundle CSS files Just like how we had to add a special plugin to bundle HTML files, we also need a special plugin for Module Federation Basic idea behind Module Federation An app can have multiple "micro apps". Each containing its own "package.json". Each of these apps run on their own in their own port. These apps can still share some code and talk to each other. To summarize, each of these apps can expose certain modules and consume certain modules They share these modules at runtime. They don't depend on the contents of the "dist" folder GITHUB EXAMPLE Create 2 folders (remote-app, host-app...

Problem: Using one JS file inside another   GITHUB Suppose you have two files:  math.js (exports a function)   main.js (wants to use that function)  Issue: Browser doesn’t understand imports automatically   main.js doesn’t know about math.js   There’s no built-in way to "import" functions before ES6 modules   This leads to errors like add is not defined Common workaround before module bundlers Using <script> tags (manual loading) html <script src="math.js"></script> <script src="main.js"></script> Problem:      Order matters! math.js must be before main.js     Too many <script> tags if we have multiple files     No way to bundle or optimize files   How Webpack Helps 1. Allows using import/export syntax 2. Webpack bundles all files into one Instead of manually loading multiple scripts, Webpack combines them into a single bundle.js, wh...