Understanding Docker

Sandeep Chintala — Wed, 12 Apr 2023 08:23:01 +0000

In good olden days, Applications were managed to build and run in huge on-premises data centers allocated in separate rooms. Later trend shifted to Virtual machines. Now it is time for Docker. Maybe something in future but until then, it’s Docker….

History

Container technology started in the year 2000. Many companies were involved in the evolution of Docker such as FreeBSD, Linux, Solaris, Google, Redhat, IBM.

There is company called Docker, Inc. and technology called Docker. They are closely linked but they are not same. Docker, the company, technology start up from San francisco and main sponsor for the container technology Docker.

Originally, it was company called dotCloud that provided a developer platform on top of AWS(Amazon Web Services). Around 2013, they designed a container to build, run and deploy the application on top of AWS and thought to give this tech to the world and build applications around it, that tech was nothing but Docker. Now Docker has literally changed the technology world.

Docker , the technology is a software platform to build, run and deploy the applications. On the other hand, Docker, Inc. the company is now focused on orchestrating and supporting the containerised apps at scale on enterprise content management System.

Docker

Docker is a Software platform to build, run and deploy applications. It is an open source and lives in Github. It has Community edition which is free to use and has many of the supporters Whereas enterprise edition is managed by Docker, Inc. provides support on enterprise content management system.

To run applications in Docker, below is the workflow we follow to run inside the container.

Take application code
Build it into a Docker image
Push image to registry
Start a container

Lets elaborate each above step which gives us more clear view.

Take you application code say Web, API or any other application. we can run anything in containers even if it is a monolithic application(it consumes more OS and supporting packages). But there are best principles we need to follow to run applications with minimal OS and minimal supporting packages. Saying it again Containers are not meant for Microservices and can run any applications.

Note: Need Docker installed in your system to perform below operations.

Create a file named with Dockerfile and write commands to build code into Docker images. Below is the sample snippet

Run the following command to turn your code into images

docker image build -t reactweb

Once after successful running, it pushes image to a registry. Now we start running image into container as below

docker run -p 3000:80 -d reactweb

Above command runs docker under host port with 3000. If you open browser and navigate to http://localhost:3000, it runs web applications.

For reference, complete source code is in React-Docker repository

Isn’t it easy? yes it is. But still there is a lot to learn in Docker.

Deep dive into Docker Architecture, Step by step for Installation and Docketerise the app and many more to come in upcoming blogs. Hope you like the content

Stay tuned. See you in next article.

Micro Frontends using React, Module Federation, Webpack 5

Sandeep Chintala — Tue, 11 Apr 2023 21:48:50 +0000

Micro Frontends

Extending the microservices idea to front end development. In the current trends, most of the application are migrating based on microservices architecture. In Microservice architecture, each feature or business is developed by independent teams and each team specialises in their respective feature and develops end-end.

Monolith web applications sits on top of microservices which is a single page application develops all the features. Gradually application grows and team faces difficulty to maintain the entire application. Alike Microservices, design the same pattern from frontend and it is named as Micro Frontends, thought has come in the late 2016 by the Thoughtworks.

Now Web application can maintain by independent teams for end-end development on each feature or business or module without knowing what other module does.

Module federation

New method of sharing code between frontend applications which makes code more straight forward and more independent. Module federation is one of the exciting features in Javascript architecture used in Webpack 5, loads code dynamically at runtime to reduce code duplication and host application loads only missing dependencies. It is one of the best ways to design the application in Microservice approach. And it has many benefits to web application if utilized appropriately.

Alternatives

For Micro Frontends design, there are many other alternatives:

Bit
Single-SPA
SystemJs
And many more ways to design the Micro Frontends.

Module Federation is not a framework, it is a plugin that is added to Webpack, which gives you freedom and flexibility to build your project the way you want and also offers developers to choose the technology they want to use. It integrates components at runtime.

Module Federation Configuration

It is very easy to integrate Module federation within the application. It has two main concepts:

Remote Federated Module: Expose the components you want to share in Webpack.config.js
Container Federated Module: Consume and Render the exposed components by the Remote Federated Module.

Step by Step

Create two react applications, one for host (Shop-container) and other for remote(product) using below command

Shop-container

npx create-react-app shop-container

Product

npx create-react-app product

Install Webpack in both applications

npm i webpack webpack-dev-server webpack-cli css-loader 
html-webpack-plugin sass sass-loader style-loader url-loader 
@babel/core @babel/preset-env @babel/preset-react 
babel-loader -D

Import Module Federation plugin as below

const ModuleFederationPlugin = 
require("webpack/lib/container/ModuleFederationPlugin");
const dependencies = require("./package.json").dependencies;

Create webpack.config.js file under root folder of Product application and plugin module federations

Product application

plugins: [
        new HtmlWebpackPlugin({
            template: "src/index.html",
        }),
        new ModuleFederationPlugin({
            name: "product",
            filename: "remoteEntry.js",
            remotes: {},
            exposes: {
                './App': './src/App.js',
            },
            shared: {
                ...dependencies,
                react: {
                    singleton: true,
                    requiredVersion: dependencies.react,
                },
                "react-dom": {
                    singleton: true,
                    requiredVersion: dependencies["react-dom"],
                },
            },
        })
    ]

Under ModuleFederationPlugin, few of the properties which are common in use

exposes: property is to expose the component which you want to share. If you share root components, all components will be loaded and route works the way it is.
shared: It is to include packages you needed when using this remote application. Suppose say, if you have angular as host/container application, remote is based on react, then it is where you include react packages to load the application. There are many benefits under the hood. some of them are singleton, avoid duplicate packages, loads missing packages and so on.
filename: This plugin generates file with the name mentioned here and renders the file dynamically at runtime.

Similarly create webpack.config.js file under root folder of Shop-container application and plugin module federations.

plugins: [
        new ModuleFederationPlugin({
            name: "shop-container",
            remotes: {
              product: "product@http://localhost:4500/remoteEntry.js"
            },
            exposes: {},
            shared: {
              ...dependencies,
              react: {
                singleton: true,
                requiredVersion: dependencies.react,
              },
              "react-dom": {
                singleton: true,
                requiredVersion: dependencies["react-dom"],
              },
            },
          })
    ]

remotes: It is to mention all remote applications url along with filename. Here, shop-container application consumes Product application.

Now import product component and render the remote content as below

import Product from 'product/App';

const App = () => {
  return (
    <>
      <Header></Header>
      <Routes>
        <Route path="/" element={<Home />} />
        <Route path="/products" element={<Product />} />          
      </Routes>
      <Footer></Footer>
    </>
  );
}

export default App;

use key name which mentioned in remotes property inside webpack.config.js and import the component name.

import Product from 'product/App';

and use the component

Below are the screeshots of container and remote applications

product application

Shop-container Application

For Reference, complete source code is in below repository
[https://github.com/sandeep0515/microfrontends-react]

We can create independent repositories for each application, containerized the applications separately and maintain the code easily.

Happy coding!

DEV Community: Sandeep Chintala