Forem: Amit Chambial

Reactjs in Vuejs using Module Federation (inc Routing)

Amit Chambial — Thu, 21 Oct 2021 18:37:26 +0000

Hey everyone , Webpack has released some new cool feature called module federation. Module Federation allows a JavaScript application to dynamically load code from another application and in the process, share dependencies. If an application consuming a federated module does not have a dependency needed by the federated code, Webpack will download the missing dependency from that federated build origin.

Usecase

Suppose there is a company xyz. It has a web application. It has features like landing page, blog, carrer page, etc and each of this page is managed by different teams. But on the company website it should load as one application. Also there can be case where carrer page is built using react js and landing page using Vue js .
Previously we used to embed iframes in the container app (here it will be landing page). The problem with iframe is it loads all the dependencies again.
Using Micro frontend technique we can combine multiple app in one app and Module federation makes it easier
To learn more about Module federation click here

What we going to do ?

We will be building a web application using Vuejs and react js . Here Vuejs will be our container app and Reactjs will be loaded in vue js. Also we will sync the routes for Vuejs and Reactjs.

Project Structure

root
|
|-packages
  |-react-app
     |-src
         |-index.js
         |-bootstrap.js
         |-App.js
         |-components
     |-config
     |-public
     |-package.json
  |-vue-app
     |-src
         |-index.js
         |-bootstrap.js
         |-App.vue
         |-components
     |-config
     |-public
     |-package.json
|-package.json

Project is setup using lerna.

Setting up Webpack

remote (react-app)

We have one webpack.common.js. It contains all the rules for compiling different types of file like js,css, jpeg,svg etc
Now we have webpack.development.js. It imports the base config as well as run a dev-server and implements Module Federation.
Creating a remote

new ModuleFederationPlugin({
      name: "auth",
      filename: "remoteEntry.js",
      exposes: {
        "./AuthApp": "./src/bootstrap"
      },
      shared: dependencies
    }),

Here we expose bootstrap file from react-app as AuthApp and build file is named as remoteEntry.js
Code on github

host (vue-app)

Creating a Host
We have one webpack.common.js same as remote . In webpack.development.js we'll have webpack-dev-server as well as we specifies the remotes

 new ModuleFederationPlugin({
      name: "container",
      remotes: {
        auth: "auth@http://localhost:8082/remoteEntry.js",
      },
      shared: dependencies
    }),

Thats it our webpack setup id done.
To run the application we'll run

lerna setup

in root. It will start both react and vue app.

Mounting React app in Vue app

We will create a ReactComponent.vue file. Here we will import the mount function that we exposed from our react app.

import { mount } from "auth/AuthApp";

Now in template we will create a div where we will mount our react app.

<template>
    <div id="react"></div>
</template>

Next we will call mount function in mounted lifecycle method of vue.

mounted() {
this.initialPath = this.$route.matched[0].path;
    const { onParentNavigate } = mount(document.getElementById("react"), {
     initialPath: this.initialPath,
    //...
    });
    this.onParentNavigate = onParentNavigate;
  }

Thats it .... Now react will be mounted inside vue app
Now only one thing is left that is Routing

Routing

We have to routing events

From react app to vue app (onNavigate)
From Vue app to react app (onParentNavigate)

We pass onNavigate callback function from vuejs to react js via mount function.

 mounted() {
    this.initialPath = this.$route.matched[0].path;
    const { onParentNavigate } = mount(document.getElementById("react"), {
      initialPath: this.initialPath,
      onNavigate: ({ pathname: nextPathname }) => {
        let mext = this.initialPath + nextPathname;
        console.log("route from auth to container", mext, this.$route.path);
        if (this.$route.path !== mext) {
          this.iswatch = false;
          this.$router.push(mext);
        }
      },
      onSignIn: () => {
        console.log("signin");
      },
    });

We have a history.listen in our react app which will trigger this callback whenever react app route changes. In this callback function we will route our vue app to same sub route as react app route.

Now we need a callback function from react app also to sync the route when vue route changes.
In the above code block we can see a onParentNavigate function from mount function. Now when to trigger this function thats the question.
We will write a watcher function on $route

 watch: {
    $route(to, from) {
      let innerRoute = this.getInnerRoute(to.path);
      if (this.iswatch) {
        if(innerRoute)
        this.onParentNavigate(innerRoute);
        else return true
      } else this.iswatch = true;
    },
  },
methods: {
    getInnerRoute(path) {
      let inner = path.split(this.initialPath)[1];
      return inner;
    },
  },

This is the way we have integrated the react app in vue app

Github codebase

Demo

AutoDeploy your projects using Github WebHooks

Amit Chambial — Tue, 30 Jun 2020 11:23:04 +0000

Hey Everyone,

Many of us has this problem of deploying our github repo to EC2 machines or Digital Ocean's droplets or etc. We can automate this process by running a simple webhook script on our machine.

Lets start !

The script

const secret = "secret-from-github";
const repo = "path-to-repo-on-machine(eg ~/react-project)";
const http = require('http');
const crypto = require('crypto');
const exec = require('child_process').exec;
const child = require('child_process');
http.createServer(function (req, res) {
        let data= []

        req.on('data', function(chunk) {
                data.push(chunk);
        });

        req.on('end', () => {
                let sig = "sha1=" + crypto.createHmac('sha1', secret).update(data.toString()).digest('hex');
                if (req.headers['x-hub-signature'] == sig) {
                        if(JSON.parse(data).ref==='refs/heads/master'){
                                console.log('Deploying commit - ',JSON.parse(data).head_commit.message)
                                exec('cd ' + repo + ' && git pull origin master && npm install && npm run build && pm2 start npm -- start');
                        }
                }

        })

    res.end();
}).listen(8080);

This script is first generating a sha signature using sceret and verifiying the request.
If request signature matches our generated signature then we our parsing the payload to JSON.
In this script we are receiving all the events that are being generated on our Github repo like commit , pull request, merge.
I have a develop branch and a master branch.
I am triggering the build when an event occurs on a master branch. if(JSON.parse(data).ref==='refs/heads/master')

When we have a merge event to our master branch it will first go to your directory on server and run

👉🏻 git pull origin master

👉🏻 npm install

👉🏻 npm run build

👉🏻 pm2 start [pm2 is process manager for nodejs. you can replace it with npm start also ]

Note: git pull will ask for username and password.The prompt should not come thats our motive here. You need to either use ssh or use

git config credential.helper store

. Check this out here.I am using credential store as i am the only one accessing that server.

Now start the script using node or pm2.

Configuring the Machine.

If you are using nginx , create a proxy pass for it. You just need to open the port 8080 for communication.

NGINX is a better option as you can assign subdomain to it and also ssl certificate.

Configuring Repo on Github

Go to Setting 👉🏻 Webhooks.
After adding the webhook , edit it and enforce ssl for better security.

That's it . Your are done 🎉.

You can find me on other platforms 👇

// Detect dark theme var iframe = document.getElementById('tweet-1276500269027622918-952'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1276500269027622918&theme=dark" }

I am using this method in my latest project https://ismy.institute/

We are participating in YC SUS2020 also.

How to perform migrations in Mongodb

Amit Chambial — Tue, 23 Jun 2020 19:30:41 +0000

Hey everyone

I am working on a side project where I am using mongodb nodejs nextjs.

I am performing some schema update and my code is breaking up as the objects created before schema update have not been updated or not have a particular field.
Can somebody provide me the best way to perform dB migrations in mongodb using javascript.