DEV Community: Nima Habibkhoda

How to implement Micro Frontends with Reactjs and qiankun

Nima Habibkhoda — Sun, 03 Jan 2021 11:08:11 +0000

<Hello world/>

Maybe you don’t know what is Micro Frontend and why we have to use it, because it is a new technology on frontend. there are few plugins and articles about it, and I think it is better to focus on some plugins that have no documents.
There is a good source about use cases and motivations of Micro frontend.

Micro frontends

What I want to work with, is Qiankun
Qiankun

Our Scenario

Imagine that we have a project named mf-productthat will work like a basket, we will add some products in our basket (Dummy products) and DVA will reduce states to show them on our frontend.

DVA js

Now we want to implement it into parent project that is micro-frontend and we have to show the mf-product in #mf-container DOM. it is easy , isn’t it? but how?

I just know that mf-product is runing on localhost:8001 and we can fetch it from there.

You can pull the project from : https://github.com/nimahkh/micro-frontend

Start

First we have to install qiankun
mkdir micro-front && cd micro-front && yarn add qiankun
Then we will create our package.json to see what we need for start.

{
  "name": "micro-front",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "devDependencies": {
    "@babel/core": "^7.7.2",
    "npm-run-all": "^4.1.5",
    "@babel/plugin-transform-react-jsx": "^7.7.0",
    "@babel/preset-env": "^7.7.1",
    "babel-loader": "^8.0.6",
    "css-loader": "^3.2.0",
    "html-webpack-plugin": "^3.2.0",
    "less-loader": "^6.2.0",
    "style-loader": "^1.0.0",
    "webpack": "^4.41.2",
    "webpack-cli": "^3.3.10",
    "webpack-dev-server": "^3.9.0",
    "cross-env": "^7.0.2"
  },
  "dependencies": {
    "qiankun": "^2.3.5",
    "react": "^16.13.1",
    "react-dom": "^16.13.1",
    "vue": "^2.6.11"
  }
}

Why we need these packages?

We need babel for transpiling our es6 codes and also we need webpack and less for lunching our main project. the main project is the project that will load mf-product from port 8001 into 8000 at div that has #mf-container DOM.

yarn #install dependencies

Create main Project

$ vim index.html

Put the codes below in index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Example</title>
</head>
<body>
  <div class="mainapp">
    <header class="mainapp-header">
      <h1>Micro Frontend</h1>
    </header>
    <div class="mainapp-main">
      <ul class="mainapp-sidemenu">
        <li onclick="push('/mf-product')">Products</li>
      </ul>
      <main id="mf-container"></main>
    </div>
  </div>
<script>
    function push(subapp) { history.pushState(null, subapp, subapp) }
  </script>
</body>
</html>

The script part will redirect to links.
Now we need index.js file to register our Micro Apps, here we will introduce to the application that we have a project that is lunched on port 8001 and I want to show it on #mf-container that has a url equal to mf-product

import {
  registerMicroApps,
  start,
  setDefaultMountApp,
  prefetchApps,
  addGlobalUncaughtErrorHandler,
} from "qiankun";
import render from "./render/ReactRender";
render({ loading: true });
const loader = (loading) => render({ loading });
registerMicroApps([
  {
    name: "mf-product", // app name registered
    entry: "//localhost:8001",
    container: "#mf-container",
    loader,
    activeRule: "/mf-product",
  },
]);
prefetchApps([{ name: "mf-product", entry: "//locahost:7101" }]);
start();
setDefaultMountApp("/mf-product");
addGlobalUncaughtErrorHandler((event) => console.log(event));

Oh Man , what is Render?

nothing, it is just a loader with Reactjs , and it is why we need babel.

create render folder and create one file named: ReactRender.jsx

import React from "react";
import ReactDOM from "react-dom";
function Render(props) {
  const { loading } = props;
return (
    <>
      {loading && <h4 className="subapp-loading">Loading...</h4>}
      <div id="mf-container" />
    </>
  );
}
export default function render({ loading }) {
  const container = document.getElementById("mf-container");
  ReactDOM.render(<Render loading={loading} />, container);
}

Now we are showing one simple loading until sub app fetched. after fetching the sub app (the application that we want to show it) we have to render it on mf-container .
Just we need to setup our webpack.config.js for lunching the project :

const HtmlWebpackPlugin = require("html-webpack-plugin");
const { name } = require("./package");
module.exports = {
  entry: "./index.js",
  devtool: "source-map",
  devServer: {
    open: true,
    port: "8000",
    clientLogLevel: "warning",
    disableHostCheck: true,
    compress: true,
    headers: {
      "Access-Control-Allow-Origin": "*",
    },
    historyApiFallback: true,
    overlay: { warnings: false, errors: true },
  },
  output: {
    publicPath: "/",
  },
  mode: "development",
  resolve: {
    extensions: [".js", ".jsx", ".ts", ".tsx"],
  },
  module: {
    rules: [
      {
        test: /\.jsx?$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env"],
            plugins: ["@babel/plugin-transform-react-jsx"],
          },
        },
      },
      {
        test: /\.(le|c)ss$/,
        use: ["style-loader", "css-loader", "less-loader"],
      },
    ],
  },
  plugins: [
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "./index.html",
      minify: {
        removeComments: true,
        collapseWhitespace: true,
      },
    }),
  ],
};

It is very easy, I am not going to explain it. just we are trying to transpile and compile our plugins and finaly run the main on port 8000.

Now what?

We need to pull the project that we want to implement it on main.
Change your directory to root project (where package.json is), then pull the project.

git pull https://github.com/nimahkh/mf-product

Our project is created with UMI, so I will explain in two ways, one with UMI and one with pure React.

UMI

it is not important what we did, and what are our components, just we have to describe our .umirc.js

import { name } from "./package.json";
import { slave } from "umi-plugin-qiankun";
export default {
  base: name,
  publicPath: "/mf-product/",
  outputPath: "./dist",
  mountElementId: "mf-product",
  plugins: [
    [
      slave,
      {
        keepOriginalRoutes: true
      }
    ],
    [
      "umi-plugin-react",
      {
        title: "mf-product",
        antd: true,
        dva: {
          always: true,
          hmr: true
        },
        dynamicImport: true,
        routes: {
          exclude: [
            /models\//,
            /services\//,
            /model\.(t|j)sx?$/,
            /service\.(t|j)sx?$/
          ]
        }
      }
    ]
  ]
};

just we have to install umi-plugin-qiankun

$ yarn add @umijs/plugin-qiankun

Pure React

At first we have to ovveride webpack with wired or rescript, I am going to do it with rescript. first create .rescriptsrc.js

const { name } = require('./package');
module.exports = {
  webpack: config => {
    config.output.library = `${name}-[name]`;
    config.output.libraryTarget = 'umd';
    config.output.jsonpFunction = `webpackJsonp_${name}`;
    config.output.globalObject = 'window';
return config;
  },
devServer: _ => {
    const config = _;
config.headers = {
      'Access-Control-Allow-Origin': '*',
    };
    config.historyApiFallback = true;
config.hot = false;
    config.watchContentBase = false;
    config.liveReload = false;
return config;
  },
};

This code will create output library from your package.json name property.
Now inside your package.json , change start command inside scripts block : "start": "rescripts start" .
Add .env inside root directory:

SKIP_PREFLIGHT_CHECK=true
BROWSER=none
PORT=7100
WDS_SOCKET_PORT=7100

We are near to end, just we have to create public-path.js.

why?

We have to introduce to qiankun that we have global variable with name of our app to load it.
src/public-path.js

if (window.__POWERED_BY_QIANKUN__) {
  // eslint-disable-next-line no-undef
 __webpack_public_path__ = window.__INJECTED_PUBLIC_PATH_BY_QIANKUN__;
}

Now you have to just change index.js of the application like below:

src/index.js

import './public-path';
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import * as serviceWorker from './serviceWorker';
function render(props) {
  const { container } = props;
  ReactDOM.render(<App />, container ? container.querySelector('#root') : document.querySelector('#root'));
}
function storeTest(props) {
  props.onGlobalStateChange((value, prev) => console.log(`[onGlobalStateChange - ${props.name}]:`, value, prev), true);
  props.setGlobalState({
    ignore: props.name,
    user: {
      name: props.name,
    },
  });
}
if (!window.__POWERED_BY_QIANKUN__) {
  render({});
}
export async function bootstrap() {
  console.log('[react16] react app bootstraped');
}
export async function mount(props) {
  console.log('[react16] props from main framework', props);
  storeTest(props);
  render(props);
}
export async function unmount(props) {
  const { container } = props;
  ReactDOM.unmountComponentAtNode(container ? container.querySelector('#root') : document.querySelector('#root'));
}
// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: https://bit.ly/CRA-PWA
serviceWorker.unregister();

It is done dude!
Now come to see what we did, but there is no scripts block in main package.json, so come to add it

"scripts": {
    "start:product": "cd mf-product  && yarn start",
    "start:main": "webpack-dev-server",
    "start": "npm-run-all --parallel start:*",
    "start:main-m": "cross-env MODE=multiple webpack-dev-server",
    "start:multiple": "run-p start:main-m start:product",
    "test": "echo \"Error: no test specified\" && exit 1"
  }

YESSSSSS!, now just run

$ yarn start

Now you can check localhost:8000 and you will see the mf-project in our main layout, also you can check localhost:8001 to see that mf-product is working on it’s port.
It is very nice, isn’t it?
I hope that I explained it clearly.
<good by world />

Javascript fundamental [currying , ReFlow , Repaint (ReDraw)]

Nima Habibkhoda — Mon, 09 Sep 2019 18:10:22 +0000

this article is a story about my experience that i earned in my last interview with a technical CTO . he taught me too much ,in that interview and i thanks him for the knowledge that he gifted to me .

this interview , made me to know much than before , about javascript fundamentals .

Re*(Flow && Paint)

to understanding ReFlow and RePaint , this link helped me :

Understanding javascript Repaint and Redraw

If I want to say very clear :‌

ReFlow is recalculating positions of elements in document . reflow is a user-blocking operation , but it has some costs .

RePaint is affecting on element , not on layout .

ex : when you are hiding an element , adding or removing some classes , you dont change the layout , you changed the element visibility and repaint it to new one .

Currying

Currying is technique to call a function with multiple arguments like a recursively function . but it has some differences :

1- syntax

2- it has sequence to run

example :

var sum =   function (a){
                 return function(b){
                       return function(c){
                              return a+b+c;
                              }        
                        }
                  }
console.log(sum(5)(2)(5))  //12

currying is a collection of closures that are returned some value recursively depended of the sequence of theme . it is very nice , isn't it? i love it

i know this article has not much detailed , but i decide to share my experience with you and collect some of theme , in an archive placement .

i will share more , in future

how to handle common error pages in react and axios?

Nima Habibkhoda — Sat, 03 Aug 2019 07:30:37 +0000

in our project , we had a problem to control common error pages using axios and show proper error pages like 404 or maintenance mode pages.

in our user flow designs , react has to show the user , a maintenance page or some other error pages when responses status codes are 503 or etc.
after some searches with my friend , we found that axios has an interceptor .

You can intercept requests or responses before they are handled by then or catch. axios

but we had a problem implementing that in our project, we have 40 requests and it's not very rational to edit all of services to handle error and change router .

so then i use react HOC technique to handle this problem , so my solution is something like this :

import React, {useEffect} from "react";
import axios from "axios";

const checkRequests= Wrapped => {
    function CheckRequests(props) {
        useEffect(()=>{
            axios.interceptors.response.use(function (response) {
                // Do something with response data
                return response;
            }, function (error) {
                switch (error.response.status) {
                    case 503 :
                        props.history.push('/503') //we will redirect user into 503 page 
                        break
                    default :
                        break
                }
                // Do something with response error
                return Promise.reject(error);
            });
        })

        return (
            <Wrapped {...props} />
        )
    }
    return CheckRequests
}

export default checkRequests

and then i use it in my app js:


import React from "react"
import CheckRequests from "./HOC/CheckRequests"

function App(props){ ... }

export default checkRequests(App)

so in every request that has been called from axios , error handling will work .

it was my solution . I like to use yours to .

React sexy easy boilerplate

Nima Habibkhoda — Tue, 23 Jul 2019 07:42:56 +0000

hi guys .
have you ever been worried about creating a SSR react boilerplate with every UI Kits or state managements? 😓
yes,it was my challenge,to handle this boilerplates.
every time,i had to clone a repo and use npm i,it was not very important,the most important thing was populating experiences of expert react developers in my projects.
for this reasons,i decided to develop a package named "React easy boilerplate". 😁 😁
a CLI package to moderate and generate easy boilerplates for your Reactjs projects. 😋 😋
it is very easy to use.
this package has four UIKits

jss
material-ui
postcss
ant design

and two state managements

context api
redux

for now,redux is enable with postcss and jss,as it's UI kit.

the other boilerplates will be ready as soon as we can.

I hope it is useful and can help you to generate easy SSR boilerplates.

github 💓 💓

react easy boilerplate

installation

npm i -g react-easy-boilerplate

usage

1- run the command below on cmd or terminal

$ react-easy-boilerplate

2- cd to your project folder

3- run commands below :

npm run start:dev   // run development server
npm run build:prod //build production 
npm run start:prod  // run production server (ssr)