About educcess

Posts by educcess:

React-16 + Material-UI v4.10.X CSS not loading issue in Server Side Rendering

Server side rendering in React 16 is always a tricky, it behaves different than client side rendering. One of the typical issue we face for SSR apps is CSS not loading and images are not rendering.

Interesting observations are CSS are being rendered properly in landing page, however in any other routes CSS are missing. This issue is very obvious when we are using Material-ui library. In every new release Material-UI is making drastic changes and hence its being little tough to upgrade library.

The complete Code for Server Side Rendering in React16 and Material-UI is here

For CSS not loading in SSR app another mistake could be not referring to your build folder in server side code, hence kindly first check below article to make necessary changes which is mandatory.

CSS & Images not loading in React SSR App

However to support Material-UI v4.10.x we need to change two files in the code given in above link. We have to change request handler and App.js “<Provider> part”

Here is the updated code given below

requestHandler.js File Changes

<code>'use strict';

import React from 'react';
import { Provider } from 'react-redux';
import thunk from 'redux-thunk';
import { applyMiddleware, createStore } from 'redux';
import { renderToString } from 'react-dom/server';
import { ServerStyleSheets, ThemeProvider, createMuiTheme } from '@material-ui/core/styles';

// import JssProvider from 'react-jss/lib/JssProvider';
import path from 'path'
import fs from 'fs'
// import {
//   MuiThemeProvider,
//   createMuiTheme,
//   createGenerateClassName,
// } from '@material-ui/core/styles';
import green from '@material-ui/core/colors/green';
import red from '@material-ui/core/colors/red';
import { StaticRouter, matchPath } from 'react-router-dom';
import DocumentMeta from 'react-document-meta';
import reducers from '../Reducers';
import routes from '../Routes';
import routesConfigs from './routesConfig';

const middleware = applyMiddleware(thunk);

// const escapeRegex = /(&#91;&#91;\].#*$>&lt;+~=|^:(),"'`\s])/g;
// let classCounter = 0;

// export const generateClassName = (rule, styleSheet) => {
//   classCounter += 1;

//   if (process.env.NODE_ENV === 'production') {
//     return `c${classCounter}`;
//   }

//   if (styleSheet &amp;&amp; styleSheet.options.classNamePrefix) {
//     let prefix = styleSheet.options.classNamePrefix;
//     // Sanitize the string as will be used to prefix the generated class name.
//     prefix = prefix.replace(escapeRegex, '-');

//     if (prefix.match(/^Mui/)) {
//       return `${prefix}-${rule.key}`;
//     }

//     return `${prefix}-${rule.key}-${classCounter}`;
//   }

//   return `${rule.key}-${classCounter}`;
// };

function renderView(req, res, state) {
  const sheets = new ServerStyleSheets();
  // Create a theme instance.
  const theme = createMuiTheme({
    palette: {
      primary: green,
      accent: red,
      type: 'light',
    },
  });

  // STEP-1 CREATE A REDUX STORE ON THE SERVER
  const store = createStore(reducers, state, middleware);
  // const sheetsRegistry = new SheetsRegistry();
  // Create a sheetsManager instance.
  // const sheetsManager = new Map();
  //commented below and using the function pasted above to solve css problem in sidebar and for buttons component
  // const generateClassName = createGenerateClassName();
  // STEP-2 GET INITIAL STATE FROM THE STORE

  const initialState = JSON.stringify(store.getState()).replace(/&lt;\/script/g, '&lt;\\/script').replace(/&lt;!--/g, '&lt;\\!--');
  // STEP-3 IMPLEMENT REACT-ROUTER ON THE SERVER TO INTERCEPT CLIENT REQUESTs AND DEFINE WHAT TO DO WITH THEM
  const context = {};
  
  const reactComponent = renderToString(
    sheets.collect(
    // &lt;JssProvider generateClassName={generateClassName}>
      &lt;ThemeProvider theme={theme}>
        &lt;Provider store={store}>
          &lt;StaticRouter
            location={req.url}
            context={context}>
            {routes}
          &lt;/StaticRouter>
        &lt;/Provider>
      &lt;/ThemeProvider>
      ),
    // &lt;/JssProvider>
  );
  // const css = sheetsRegistry.toString()
  const css = sheets.toString();
  const reactMetaComponent = DocumentMeta.renderToStaticMarkup();
  if (context.url) {
    // can use the `context.status` that
    // we added in RedirectWithStatus
    redirect(context.status, context.url);
  } else {
    //https://crypt.codemancers.com/posts/2016-09-16-react-server-side-rendering/
    //res.status(200).render('index', { reactComponent, reactMetaComponent, initialState });
    fs.readFile(path.resolve('build/index.html'), 'utf8', (err, data) => {
      if (err) {
        return res.status(500).send('An error occurred')
      }
      const replacedData = data.replace(
        '&lt;div id="root">&lt;/div>',
        `&lt;div id="root">${reactComponent}&lt;/div>
        &lt;style id="jss-server-side">${css}&lt;/style>
        &lt;script>
          window.INITIAL_STATE = ${initialState}
        &lt;/script>`
      );
      const replacedMetaTagData = replacedData
        .replace(`&lt;meta id="reactMetaTags"/>`,
          `${reactMetaComponent}`);
      res.send(replacedMetaTagData);
    })
  }
}

function handleRender(req, res) {
  // filter matching paths
  // and check if components have data requirement
  const components =
    routesConfigs.filter(route => matchPath(req.path, route))
      .map(route => route.component);
  if (components.length > 0 &amp;&amp; (components&#91;0].fetchData instanceof Function)) {
    components&#91;0]
      .fetchData(req.query, req.path)
      .then((response) => {
        renderView(req, res, response);
      })
      .catch((error) => {
        try {
          console.log('--- ssr render error --- ', error);
        } catch (e) {
          console.log('--- ssr render error catch--- ', e);
        }
        renderView(req, res, {});
      });
  } else {
    renderView(req, res, {});
  }
}

module.exports = handleRender;
</code>

Observe that we removed using JssProvider , generateClassName, Stylesheet Manager etc. The latest changes are much simpler

App.js file changes

<code>import React, { Component } from 'react';
import thunk from 'redux-thunk';
import { Provider } from 'react-redux';
// import JssProvider from 'react-jss/lib/JssProvider';
// import {
//   MuiThemeProvider,
//   createMuiTheme,
//   createGenerateClassName
// } from '@material-ui/core/styles';
import { ThemeProvider, createMuiTheme } from '@material-ui/core/styles';
import { applyMiddleware, createStore } from 'redux';
import { BrowserRouter } from 'react-router-dom'
import green from '@material-ui/core/colors/green'
import red from '@material-ui/core/colors/red';
import Routes from './Routes';
import reducers from './Reducers';

const middleware = applyMiddleware(thunk);
const initialState = window.INITIAL_STATE;
const store = createStore(reducers, initialState, middleware);

// Create a theme instance.
const theme = createMuiTheme({
  palette: {
    primary: green,
    accent: red,
    type: 'light',
  },
});
// const generateClassName = createGenerateClassName();

class App extends Component {
  componentDidMount() {
    //Not required to remove css since it is already came from sssr
    // const jssStyles = document.getElementById('jss-server-side');
    // if (jssStyles &amp;&amp; jssStyles.parentNode) {
    //   jssStyles.parentNode.removeChild(jssStyles);
    // }
    const jssStyles = document.querySelector('#jss-server-side');
    if (jssStyles) {
      jssStyles.parentElement.removeChild(jssStyles);
    }
  }
  
  render() {
    return (
      &lt;Provider store={store}>
        &lt;BrowserRouter>
          {/* &lt;JssProvider generateClassName={generateClassName}> */}
            &lt;ThemeProvider theme={theme} >
              {Routes}
            &lt;/ThemeProvider>
          {/* &lt;/JssProvider> */}
        &lt;/BrowserRouter>
      &lt;/Provider>
    );
  }
}

export default App;
</code>

Again we no need to use JssProvider in client side as well.

These changes will solve the issue.

Sequelize Database Entity Relation for Postgres SQL- One To Many Relation

Sequelize one-to-many relation can be defined using belongsTo and hasMany methods. but before moving on to one-to-many I suggest readers to go through my previous post on one-to-one relation.

Defining One-To-One relation in Sequelize

Now let us consider a school management system when we define relation between Subjects and Chapters. One subject has many chapters. The database schema looks as follows.

Master Subjects Entity

<code>const MasterAcademicsModel = require('../Models/MasterAcademicsModel');
const MasterBoardsModel = require('../Models/MasterBoardsModel');
const MasterClassModel = require('../Models/MasterClassModel');
const MasterMediumsModel = require('../Models/MasterMediumsModel');


const MasterSubjectModel = db.define(
  "master_subjects",
  {
    subjectId: {
      field: "subjectId",
      type: sqlOperator.UUID,
      primaryKey: true,
      defaultValue: sqlOperator.UUIDV4,
    },
    name: {
      field: "name",
      type: sqlOperator.STRING(100),
      allowNull: false,
    },
  },
  {
    tableName: "master_subjects",
    timestamps: true,
  }
);

MasterSubjectModel.associate = async () =>{
  await MasterSubjectModel.belongsTo(MasterAcademicsModel,{
    foreignKey: 'masterSubjectAcademicId',
    targetKey: 'academicId'
  });
  await MasterSubjectModel.belongsTo(MasterBoardsModel,{
    foreignKey: 'masterSubjectBoardId',
    targetKey: 'boardId'
  });
  await MasterSubjectModel.belongsTo(MasterMediumsModel,{
    foreignKey: 'masterSubjectMediumId',
    targetKey: 'mediumId'
  });
  await MasterSubjectModel.belongsTo(MasterClassModel,{
    foreignKey: 'masterSubjectClassId',
    targetKey: 'classId'
  });
}

module.exports = MasterSubjectModel;
</code>

Chapters Model

<code>
const ChapterModel = db.define(
  "chapters",
  {
    chapterId: {
      field: "chapterId",
      type: sqlOperator.UUID,
      primaryKey: true,
      defaultValue: sqlOperator.UUIDV4,
    },
    title: {
      field: "title",
      type: sqlOperator.STRING(100),
    },
    tags: {
      field: "tags",
      type: sqlOperator.STRING(100),
    },
  },
  {
    tableName: "chapters",
    timestamps: true,
  }
);

ChapterModel.associate = async () => {
  console.log(
    "--- Establishing relations between chapter and chapter content ---"
  );
  const MasterSubjectModel = require("./MasterSubjectModel");
  const ChapterContentModel = require("./ChapterContentModel");
  const MasterAcademicsModel = require("./MasterAcademicsModel");

  await ChapterModel.belongsTo(MasterSubjectModel, {
    foreignKey: "masterSubjectId",
    targetKey: "subjectId",
    as: "subject",
  });
  await MasterSubjectModel.hasMany(ChapterModel, {
    foreignKey: 'masterSubjectId',
    sourceKey: 'subjectId',
  });

  await ChapterModel.belongsTo(MasterAcademicsModel, {
    foreignKey: "masterAcademicId",
    targetKey: "academicId",
    as: "academic",
  });
  await MasterAcademicsModel.hasMany(ChapterModel, {
    foreignKey: 'masterAcademicId',
    sourceKey: 'academicId',
  });

  await ChapterModel.hasMany(ChapterContentModel, {
    foreignKey: 'chapterId',
    sourceKey: 'chapterId',
    as: "chapterContents",
  });
  await ChapterContentModel.belongsTo(ChapterModel, {
    foreignKey: "chapterId",
    targetKey: "chapterId",
  });
};

module.exports = ChapterModel;
</code>

Notice here that to define One-To-Many both belogsTo and hasMany method are used. you can define the relation using only belongsTo method, however you will endup with multiple sequelize errors. To avoid sequelize errors while fetching data using find method on one-to-many relation, kindly update your models by defining relation in both ways.

Sequelize Database Entity Relation for Postgres SQL-Many To Many Relation

In case of Many To Many relation we can define relation using Sequelize belongsToMany method. But before moving on to Many-To-Many relation in sequelize, I suggest readers to go through my previous post on One-To-Many relation with sequelize.

Defining one-to-many relation in Sequelize

Now let us consider the below relation for understanding on how to define Many-to-many relation using sequelize. If you are developing a platform for school management system and considering the requirement one user is associated with many schools, this is true in case of teachers, where they will be teaching in multiple schools / colleges as guest lectures.

The database schema for Users and Schools Entities looks as follows.

Defining Many-To-Many Relation using Sequelize

Users Model

<code>
const UserModel = db.define(
  'users',
  {
    userId: {
      field: 'userId',
      type: sqlOperator.UUID,
      primaryKey: true,
      defaultValue: sqlOperator.UUIDV4
    },
    firstName: {
      field: 'firstName',
      type: sqlOperator.STRING(100),
      require: true
    },
    lastName: {
      field: 'lastName',
      type: sqlOperator.STRING(100),
    },
    email: {
      field: 'email',
      type: sqlOperator.STRING(255),
      defaultValue: null,
      allowNull: true,
      // unique: true,
      validate: {
        isEmail: true
      }
    },
    userName: {
      field: 'userName',
      type: sqlOperator.STRING(255),
      defaultValue: null,
      allowNull: true,
      // unique: true
    }
  },
  {
    tableName: 'users',
    timestamps: true,
    freezeTableName: true,
  }
);

UserModel.associate = async () => {
  //defining relation in user schools model
}

module.exports = UserModel;
</code>

Observe here that the relation between Users and Schools is defined through another intermediate table called User Schools hence the ralation is defined using belongsToMany using through keyword as given below.

UserSchools Model

<code>const SchoolModel = require('./SchoolModel');
const UserModel = require('./UserModel');

const UserSchoolModel = db.define(
  'user_schools',
  {
    userSchoolId: {
      field: 'userSchoolId',
      type: sqlOperator.UUID,
      primaryKey: true,
      defaultValue: sqlOperator.UUIDV4
    }
  },
  {
    tableName: 'user_schools',
    timestamps: true
  }
);

UserSchoolModel.associate = async () => {
  const UserModel = require("./UserModel");
  UserModel.belongsToMany(SchoolModel, {
    through: UserSchoolModel,
    foreignKey: "userUserId",
    as: 'userSchools'
  });
  SchoolModel.belongsToMany(UserModel, {
    through: UserSchoolModel,
    foreignKey: "schoolSchoolId",
    as: 'schoolUsers'
  });
};
module.exports = UserSchoolModel;
</code>

If you try to achieve this only using belongsTo and hasMany then you will face many sequelize errors while querying. You must use belongsToMany along with through keyword.

Sequelize Database Entity Relation for Postgres SQL- One To One Relation

For one-to-one relation in database schema, it is easy to define the relation in Model Class using Sequelize BelongsTo method. Let us consider a schema given below which has Users and UserProfile models. One user can have one UserProfile, Which is 1-to-1 relation.

Sequelize one-to-one relation
Sequelize one-to-one relation

One-to-One Relation using belongsTo in Sequelize

Users Model

<code>
const UserModel = db.define(
  'users',
  {
    userId: {
      field: 'userId',
      type: sqlOperator.UUID,
      primaryKey: true,
      defaultValue: sqlOperator.UUIDV4
    },
    firstName: {
      field: 'firstName',
      type: sqlOperator.STRING(100),
      require: true
    },
    lastName: {
      field: 'lastName',
      type: sqlOperator.STRING(100),
    },
    email: {
      field: 'email',
      type: sqlOperator.STRING(255),
      defaultValue: null,
      allowNull: true,
      // unique: true,
      validate: {
        isEmail: true
      }
    },
    userName: {
      field: 'userName',
      type: sqlOperator.STRING(255),
      defaultValue: null,
      allowNull: true,
      // unique: true
    },
    phone: {
      field: 'phone',
      type: sqlOperator.STRING(13),
      allowNull: true,
      // unique: true
    },
    photo: {
      field: 'photo',
      type: sqlOperator.STRING(1024),
      defaultValue: null,
      validate: {
        isUrl: true
      }
    },
  },
  {
    tableName: 'users',
    timestamps: true,
    freezeTableName: true,
  }
);

UserModel.associate = async () => {
  console.log('--- Establishing relations between user and user profile ---');

  const UserProfileModel = require('./UserProfileModel');

  UserModel.belongsTo(UserProfileModel, {
    foreignKey: 'profile',
    targetKey: 'userProfileId'
  }); /** foriengKey and targetKey are both from table */
}

module.exports = UserModel;
</code>

UserProfile Model

<code>
const UserProfileModel = db.define(
  'user_profiles',
  {
    userProfileId: {
      field: 'userProfileId',
      type: sqlOperator.UUID,
      primaryKey: true,
      defaultValue: sqlOperator.UUIDV4
    },
    address: {
      field: 'address',
      type: sqlOperator.STRING(100),
      require: true
    }
  },
  {
    tableName: 'user_profiles',
    timestamps: true,
  }
);

UserProfileModel.associate = async () => {
  console.log('--- Establishing relations between user profile ---');
}

module.exports = UserProfileModel;
</code>

While defining one to one relation, relation can be defined in any of the model, either User Model or UserProfile model. It will work fine with any way.

Let us understand foreign key and target key in belongsTo as given above.

foreignKey: ‘profile’, since we are defining relation in Users Model, the user profile id will be added to users table and that is why it become one to one relation. Hence foreignKey here means the column name to be added in Source Table that is Users Model.


targetKey: ‘userProfileId’, here the Source is Users model and since we are defining relation in Users Model, then the target model is UserProfiles model, hence the target key here is the primary key of UserProfile table.

As per sequelize documentation, it says “BelongsTo inserts the association key in the source model”, source model here is Users Model.

Read more about Defining One-To-Many relation using sequelize

Be social and help to stop corona – Corona Relief

COVID-19 has affected almost every people, every sector and every nation. There are millions of people suffering with various problems. It is we who are strong financially, physically and mentally have to help people who are in need and be a corona warriors.

How can I help during COVID-19?

Join SociallyGood a trusted first ever marketplace for social service sector to donate thousands of non-profits who are serving millions of people who got affected by corona virus pandemic. Volunteer and donate through SociallyGood

Volunteer and Donate to trusted non-profits, find campaigns running for covid-19 here

Platform Architecture in Computer Science: Caching and File Storage

One of the important aspect of any platform is performance, to increase the performance to satisfy end users with quick access one can not escape from in memory cache. Database operations are always costly, executing complex queries to meet real time needs will make the entire platform slow. For faster access, in-memory cache is very much needed. People use Radis and Kafka.

Before reading further I recommend reading my previous article on platform architecture

Caching in platform Architecture

Now interesting question is where do Caching service fits in my architecture? How do we represent it in platform architecture and where do we integrate caching?

Typically we should have a cache manager within the app which manages caching and database. For any request first we have to check whether required data is in cache ? if not then only hit Database else return from cache.

In case of data update or new insertions , the cache manager has to take care of updating the cache and then make the updated data available for further read operations.

The updated platform architecture looks as follows now

Platform architecture with caching

Redis or Kafka are well known services for in-memory cache, but both have their own purpose, so we have to decide upon what to use when ?

Read more about Redis

File Server for file storage in platform architecture

I thought of covering this also in the same article as it is a small but very important to consider. Because lot of developers have confusion regarding where to store files ? many people will create a folder in their application server and store all files there itself, which is a very wrong for ay real-time applications.

It is recommended to store files in file servers like Amazon AWS S3 bucket and Google Storage, if its publicly sharable multimedia file like image or video then go for Cloudinary kind of CDN services.

Why not to store files in application server?

  1. Application servers like amazon EC2 or Google App engine are not made for file storage, their purpose is to run your app
  2. Application servers are compute engines where you can install any software whichever you need for you app to run in cloud, where as file servers are just providing the storage to store huge files
  3. File servers have different qualities altogether they can take you files backup, create replica if needed, they are capable to transfer huge data fast enough, they are cheaper than app servers
  4. in case of app servers, for some reason if something goes wrong, u may need to create new server quickly and release your app again, if your all file data is also stored in the same server you may loose it permanently, but file server are more reliable for that matter
  5. This is what amazon claims -> Amazon S3 is designed for 99.999999999% (11 9’s) of data durability because it automatically creates and stores copies of all S3 objects across multiple systems.
  6. File servers also provide other services like securing files through authorised access, encrypt the files
  7. Manage and access control – you can create multiple folders and access each folder for specific service so that other services won’t get access to it
  8. File servers like Amazon S3 provide services like querying on the data stored in files, all such nice features you won’t get it in app servers because they are not meant for it

Donate to Help during this COVID-19 Pandemic

We all know how badly Corona Virus has affected millions of people. Daily wage workers and all other businesses are hit badly. Its time to help those who are in need, there are thousands of Non Profits working for COVID-19 situation.

Sewa USA is running Fund raiser program as Sur Surgam, donate for Sewa USA

Sewa Bharati is asking for donations which they use to support daily wake workers, donate for this

You can help health care heros, they are Corona Warriors who are helping people by keeping their life in risk, Donate for Doctors, nurses during this COVID-19 pandemic

Volunteering Opportunities for COVID-19

COVID-19 pandemic has made our life miserable, almost every country is facing hardship due to corona virus. Corona Warriors like doctors, nurses and many millions of social workers are helping us to save us from Corona.

This is the time where everyone has to serve the society to help people and to stop pandemic. There are several Non-Profits working towards this goal. You can find several volunteering opportunities in a Social Service Marketplace called SociallyGood, a trusted platform for Social Service Sector. Here are some of the volunteering opportunities for COVID-19

Some of the trending campaigns which may help you to serve the society are here

Volunteering Campaigns for COVID-19

People are getting frustrated, depressed and feeling lonely during the lockdown due to COVID-19, there are many ways to help people for mental health support during COVID-19

Click here to work for this cause

Food distribution to Migrant workers during COVID-19 Pandemic

Click here to donate for COVID-19

Platform Architecture in Computer Science: Case Study on Various Platforms

Before reading this article, I strongly recommend reading my previous two articles.

Platform Architecture with Multiple Apps Approach

Platform Architecture with Micro-Service Approach

Despite all of these inputs, I am still saying platform architecture depends upon various needs of the platform, hence there is nothing like one standard way, it will be always evolving. Hence let us look into some of the references for Highly Scalable Platform Architectures to understand even better

  1. Linked in Architecture – Reference – Click Here

Observe here, a separate replica set for Database ?

  1. Uber Architecture – Reference Click Here

Uber has a micro-service architecture.

  1. Netflix Architecture – Reference Click Here

Netflix architecture looks very complex and it is micro-service architecture

  1. Ebay Architecture

Read More on Platform Architecture

Thank You