Forem: Divyansh Gothwal

Polyfill for ReactDOM.render

Divyansh Gothwal — Sat, 10 Jun 2023 20:07:10 +0000

In this article we are going to build a polyfill for ReacDOM.render() before react18 or ReactDOM.createRoot(${domElement}).render(${reactElement})

To do this we need to understand how reactElement is represent by react.

we have 3 cases

// case 1
let jsx1 = <div>Test</div>;
let reactElemen1 = { type: "div", props: { children: "Test" } };

// case 2
let jsx2 = (
  <div>
    <h1>Test</h1>
  </div>
);
let reactElemen2 = {
  type: "div",
  props: { children: { type: "h1", props: { children: "Test" } } }
};

// case 3
let jsx3 = (
  <div>
    <h1>TestH1</h1>
    <h2>TestH2</h2>
  </div>
);
let reactElemen3 = {
  type: "div",
  props: {
    children: [
      { type: "h1", props: { children: "TestH1" } },
      { type: "h2", props: { children: "TestH2" } }
    ]
  }
};

Now we understand how a react element can look like.
Lets start coding a function which takes reactElement and domNode, then renders all the react element as child of domNode.
Below the recursive code for this.

// function for setting styles for an elemement
function setStyle(domNode, styles) {
  Object.keys(styles ?? {}).forEach((styleKey: any) => {
    domNode.style[styleKey] = styles[styleKey];
  });
}

// main function for rendering reactElement to domNode
export function render(reactElement, domNode) {
  const {
    type,
    props: { children, style }
  } = reactElement;
  // first create a domElement from using type.
  let createdElement = document.createElement(type);
  //setting styles
  setStyle(createdElement, style);
  // checking if children is array
  if (Array.isArray(children)) {
    children.forEach((child) => {
      createdElement = render(child, createdElement);
    });
  // if children is object type
  } else if (typeof children === "object") {
    createdElement = render(children, createdElement);
  } else {
    // if children is of type string
    createdElement.innerHTML = children;
  }
  // append createdElement to domNode. 
  domNode.appendChild(createdElement);
  return domNode;
}

Here is the codesandbox for this.
custom renderer

There you go you have created your basic custom renderer which renders reactElement to domNode.

Obviously we have not handled Component types but that i will covering in next article.

setInterval Gotchas with React Hooks

Divyansh Gothwal — Thu, 25 May 2023 17:39:09 +0000

In this article we are going to understand Gotchas of using setInterval callback function to update state.

For example we have to build a react where we start timer when application loads.

Below the code that everyone who has basic knowledge react will write it.

function WrongCountUpdate() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount(count + 1);
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return <div>Wrong count update: {count}</div>;
}

There is bug in the above code and this has nothing to do with react this is how javascript works.
let's have a look at this live.
Below is the Codesandbox link for this.

Counter update

Let's see why this code is not correct?

Below is the flow of this react component.

Component mounts/renders
UseEffect will be called which sets setInterval with a callback function.
When setInterval is executed with callback function, it has closure with value of count=0.
When state updates setInterval callback function is not aware of change of count variable and its closure still has value of count=0 and when setCount is executed with 0+1 ==> 1 thus our count is always one.

To fix this issue we just have to make one change in our setCount instead of passing value to it, we pass a callback function whose input argument is previous count value and return new state.

React ensures that argument of this function has correct previous value.

Below is the correct code for this.

function CorrectCountUpdate() {
  const [count, setCount] = useState(0);

  useEffect(() => {
    const timer = setInterval(() => {
      setCount((prevCount) => prevCount + 1);
    }, 1000);

    return () => clearInterval(timer);
  }, []);

  return <div>Correct count update: {count}</div>;
}

Creating CI/CD pipeline using triggers of google cloud for web app written in Spring Boot(java) and React.js

Divyansh Gothwal — Tue, 14 Jul 2020 12:22:56 +0000

Hello all😊👋
This is my first post so bear with me.

In this article, I am going to tell you guys how I was able to automate the testing, building and deployment(on GCP APP ENGINE) of my web app written in React and Spring Boot ( code base on GitHub) using google cloud trigger.

Contents of this Article

1) Directory structure I used.
2) Configuring GCP trigger to listen to GitHub commits of a repository.
3) Understanding different configuration files required.
4) Deploying frontend and backend as different service to GCP APP Engine
5) Serving frontend and backend from two different services on the same domain.

1) Directory structure:

Below is the directory structure I am using to fulfil my requirement of testing, building and deploying UI and Server on a GitHub commit.

2) Configuring GCP trigger to listen to GitHub commits of a repository

Go to your GCP console
Create a new project named web-app, you can give any name but here I will use web-app
Once project is created, select that project and go to triggers as mentioned in below.
Once you are in triggers page you will see Connect Repository as shown below, this connect the trigger to a particular branch(my case it was a master branch) of GitHub repository and once connected it will listen to GitHub commits on that branch.

Below screenshots explains the steps to connect a branch from GitHub to your GCP projects trigger.

c) First, you have to add a new account, once the GitHub account is added then click on Edit repositories on GitHub, which will redirect you to GitHub where it will ask you for repositories to select for which trigger will listen.
d) Once Trigger created you can see the details of the trigger.
Currently below are the configuration of my trigger
* Event: Push to any branch
* Status: Enabled
* Build Configuration: Auto-Detected
You can edit these configurations

Finally, your trigger is connected to your GitHub repo but before we commit anything to this repository we need to understand the configuration file required to test, build and deploy our app to APP Engine.

3) Understanding different configuration files required.

We need to create few scripts which will be picked up by GCP triggers to build and deploy our app to GCP APP ENGINE

cloudbuild.yaml: It is picked up and executed by GCP triggers on every GitHub commit. It should be present in the root of our project directory.
app.yaml: This is the file used for deploying our web-app to GCP APP ENGINE based on the configurations specified in it.

4) Deploying frontend and backend as different service to GCP APP Engine

Google recommends using microservices within an App engine project instead of building one monolith that serves all requests. So I’m going to have a front end service that uses the Node.js runtime and a back end service that uses the Java runtime.

Deploying Backend(Spring Boot java application) as new service

For deploying Backend java application we will use docker.
we will follow the below steps
a) First, create a Docker image using below docker file
b) push that image to GCP Container Registry
c) Deploying that image to GCP APP ENGINE using below app.yaml file

Below is my Docker file(present in server/Dockerfile)

FROM openjdk:8-alpine
VOLUME /tmp
ADD target/webapp-0.0.1-SNAPSHOT.jar app.jar
ENTRYPOINT ["java","-Djava.security.egd=file:/dev/./urandom","-jar","/app.jar"]

app.yaml file for backend deployment (present in server/src/main/appengine)

env: flex
service: backend
instance_class: F1
handlers:
- url: /.*
  script: this field is required, but ignored

Deploying frontend as a new service: I am going to use Express.js to host my static files, below is the code to serve static files

const express = require('express');

const path = require('path');

const app = express();

// This code makes sure that every request that matches a static file in the
// build folder, it serves that file.
app.use(express.static(path.join(__dirname, 'build')));

// This code makes sure that any request that does not matches a static file
// in the build folder, will just serve index.html.
app.get('/*', (req, res) => {
  res.sendFile(path.join(__dirname, 'build', 'index.html'));
});

// Starting the server
const PORT = process.env.PORT || 8080;
app.listen(PORT, () => {
  console.log(`App listening on port ${PORT}`);
});

After this, we will create the app.yaml file UI folder as shown below, But remember that package.json, start scripts should be node app.js where app.js is having server-side code for serving static files.

app.yaml file to deploy node.js application to host our static files

runtime: nodejs
# new service named default is created where frontend will hosted
service: default
env: flex
instance_class: F1
threadsafe: true
handlers:
  - url: /
    static_files: build/index.html
    upload: build/index.html
  - url: /
    static_dir: build

5) Serving frontend and backend from two different services on the same domain.

To let Google’s load balancer decide what microservice needs to handle what request, you can define a dispatch.yaml file to overwrite App Engine’s default routing rules. This has to be done after all independent services have started. My dispatch.yaml file looks like this:

dispatch:
# Route the URLs that point to the java backend to backend service
  - url: "*/test/v1/*"
    service: backend
# Route all other urls to the React.js frontend
  - url: "*/*"
    service: default

Below is the final cloudbuild.yaml file(present in root directory of project) for frontend and backend steps to be executed by trigger

# below are the spteps executed by trigger
steps:
# frontend deployment
# Step 1: For installing dependencies
  - name: "gcr.io/cloud-builders/npm"
    dir: 'ui'
    args: ["install"]

# Step 2: For creating optinimized build
  - name: "gcr.io/cloud-builders/npm"
    dir: 'ui'
    args: ["run", "build"]

# Step 3: This step will execute app.yaml in your ui folder and deploy your app based on the configuration specified
  - name: "gcr.io/cloud-builders/gcloud"
    dir: 'ui'
    args: ["app", "deploy"]
# timeout specified for this step as deployment may take more that default time(10min)
    timeout: "30m0s" 

# backend deployment
# Step 4: Running maven tests
  - name: maven:3-jdk-8
    entrypoint: mvn
    dir: 'server'
    args: ["test"]

# Step 5: Running **mvn clean install** and skipping test cases
  - name: maven:3-jdk-8
    entrypoint: mvn
    dir: 'server'
    args: ["clean", "install", "-Dmaven.test.skip=true"]

# Step 6: Creating docker image using docker file present in server folder
  - name: docker
    dir: 'server'
    args: ["build", "-t", "gcr.io/web-app/webapp3", "."]

# Step 7: pushing docker image to GCP Container Registry
  - name: "gcr.io/cloud-builders/docker"
    args: ["push", "gcr.io/web-app/webapp3"]

# Step 8: Deploying this image using app.yaml present in **server/src/main/appengine** to GCP **APP ENGINE**
  - name: 'gcr.io/cloud-builders/gcloud'
    dir: 'server/src/main/appengine'
    args: ['app', 'deploy', "--image-url=gcr.io/web-app/webapp3"]
    timeout: "30m0s"

# Step 9: This step is make sure that dispatch.yaml file is deployed once all the services are started
  # dispatch.yaml deployment
  - name: "gcr.io/cloud-builders/gcloud"
    args: ["app", "deploy", "dispatch.yaml"]
    timeout: "30m0s"
timeout: "100m0s"
images: ["gcr.io/web-app/webapp3"]

once all services are started you can go to GCP APP ENGINE and see the deployed services and path the dispatch routes like below:

Now you can go ahead and commit to your GitHub repository.

Go to you Cloud build->History and you see can build started.

once build is successfully completed then below is the screenshot you can see.

Hurray you have successfully deployed you web-app to google cloud.

If you have come this far reading this article, please provide your valuable comment or feedback so that I can improve next time.

Happy Reading !!