{"id":3932,"date":"2021-08-10T01:10:51","date_gmt":"2021-08-09T19:40:51","guid":{"rendered":"https:\/\/www.codingbroz.com\/?p=3932"},"modified":"2021-08-10T01:10:59","modified_gmt":"2021-08-09T19:40:59","slug":"what-is-mern-stack","status":"publish","type":"post","link":"https:\/\/www.codingbroz.com\/what-is-mern-stack\/","title":{"rendered":"What is MERN Stack ?"},"content":{"rendered":"\n<p>With technologies changing rapidly, it\u2019s quite a challenging job for the developers to meet the Users demand.<\/p>\n\n\n\n<p>There is a continuous demand of making the product better every single day.<\/p>\n\n\n\n<p>To Build better websites and web apps, most of the developers have left old technologies like PHP, Laravel and moved to more advanced technology stacks like MERN, MEAN and MEVN.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img fetchpriority=\"high\" decoding=\"async\" width=\"1200\" height=\"675\" src=\"https:\/\/www.codingbroz.com\/wp-content\/uploads\/2021\/08\/what-is-mern-stack-development-codingbroz.png\" alt=\"\" class=\"wp-image-3936\" srcset=\"https:\/\/www.codingbroz.com\/wp-content\/uploads\/2021\/08\/what-is-mern-stack-development-codingbroz.png 1200w, https:\/\/www.codingbroz.com\/wp-content\/uploads\/2021\/08\/what-is-mern-stack-development-codingbroz-768x432.png 768w\" sizes=\"(max-width: 1200px) 100vw, 1200px\" \/><\/figure>\n\n\n\n<p>In this post, we will be discussing MERN Stack in detail.<\/p>\n\n\n\n<p>After reading this post you will get complete knowledge about:<\/p>\n\n\n\n<ul><li>What is Technology Stack ?<\/li><li>What is MERN Stack ?<\/li><li>How Does MERN Stack Works ?<\/li><li>Advantages of MERN Stack\u00a0<\/li><\/ul>\n\n\n\n<div id=\"ez-toc-container\" class=\"ez-toc-v2_0_65 ez-toc-wrap-left counter-hierarchy ez-toc-counter ez-toc-custom ez-toc-container-direction\">\n<label for=\"ez-toc-cssicon-toggle-item-663641fabc250\" class=\"ez-toc-cssicon-toggle-label\"><label class=\"ez-toc-title\">Table of Contents<\/label>\n<span class=\"ez-toc-cssicon\"><span class=\"eztoc-hide\" style=\"display:none;\">Toggle<\/span><span class=\"ez-toc-icon-toggle-span\"><svg style=\"fill: #0090ff;color:#0090ff\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" class=\"list-377408\" width=\"20px\" height=\"20px\" viewBox=\"0 0 24 24\" fill=\"none\"><path d=\"M6 6H4v2h2V6zm14 0H8v2h12V6zM4 11h2v2H4v-2zm16 0H8v2h12v-2zM4 16h2v2H4v-2zm16 0H8v2h12v-2z\" fill=\"currentColor\"><\/path><\/svg><svg style=\"fill: #0090ff;color:#0090ff\" class=\"arrow-unsorted-368013\" xmlns=\"http:\/\/www.w3.org\/2000\/svg\" width=\"10px\" height=\"10px\" viewBox=\"0 0 24 24\" version=\"1.2\" baseProfile=\"tiny\"><path d=\"M18.2 9.3l-6.2-6.3-6.2 6.3c-.2.2-.3.4-.3.7s.1.5.3.7c.2.2.4.3.7.3h11c.3 0 .5-.1.7-.3.2-.2.3-.5.3-.7s-.1-.5-.3-.7zM5.8 14.7l6.2 6.3 6.2-6.3c.2-.2.3-.5.3-.7s-.1-.5-.3-.7c-.2-.2-.4-.3-.7-.3h-11c-.3 0-.5.1-.7.3-.2.2-.3.5-.3.7s.1.5.3.7z\"\/><\/svg><\/span><\/span><\/label><input type=\"checkbox\"  id=\"ez-toc-cssicon-toggle-item-663641fabc250\" checked \/><nav><ul class='ez-toc-list ez-toc-list-level-1 ' ><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-1\" href=\"https:\/\/www.codingbroz.com\/what-is-mern-stack\/#What_is_a_Technology_Stack\" title=\"What is a Technology Stack ?\">What is a Technology Stack ?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-2\" href=\"https:\/\/www.codingbroz.com\/what-is-mern-stack\/#What_is_MERN_Stack\" title=\"What is MERN Stack ?\">What is MERN Stack ?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-3\" href=\"https:\/\/www.codingbroz.com\/what-is-mern-stack\/#Components_of_MERN_Stack\" title=\"Components of MERN Stack\">Components of MERN Stack<\/a><ul class='ez-toc-list-level-3' ><li class='ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-4\" href=\"https:\/\/www.codingbroz.com\/what-is-mern-stack\/#1_MongoDB\" title=\"1. MongoDB\">1. MongoDB<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-5\" href=\"https:\/\/www.codingbroz.com\/what-is-mern-stack\/#2_ExpressJS\" title=\"2. ExpressJS\">2. ExpressJS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-6\" href=\"https:\/\/www.codingbroz.com\/what-is-mern-stack\/#3_ReactJS\" title=\"3. ReactJS\">3. ReactJS<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-3'><a class=\"ez-toc-link ez-toc-heading-7\" href=\"https:\/\/www.codingbroz.com\/what-is-mern-stack\/#4_NodeJS\" title=\"4. NodeJS\">4. NodeJS<\/a><\/li><\/ul><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-8\" href=\"https:\/\/www.codingbroz.com\/what-is-mern-stack\/#How_Does_the_MERN_Stack_Works\" title=\"How Does the MERN Stack Works ?\">How Does the MERN Stack Works ?<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-9\" href=\"https:\/\/www.codingbroz.com\/what-is-mern-stack\/#Advantages_of_MERN_Stack\" title=\"Advantages of MERN Stack\">Advantages of MERN Stack<\/a><\/li><li class='ez-toc-page-1 ez-toc-heading-level-2'><a class=\"ez-toc-link ez-toc-heading-10\" href=\"https:\/\/www.codingbroz.com\/what-is-mern-stack\/#Conclusion\" title=\"Conclusion\">Conclusion<\/a><\/li><\/ul><\/nav><\/div>\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_a_Technology_Stack\"><\/span><strong>What is a Technology Stack ?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The technology stack is a combination of programming languages, frameworks and tools used by developers to build a mobile or web app.<\/p>\n\n\n\n<p>The tools and frameworks are specially chosen to work together in order to create a fully functional product.<\/p>\n\n\n\n<p>The three main components of any mobile app or web app consists of front-end, back-end and database. Each layer is built at top and below of each other, thus creating a stack.<\/p>\n\n\n\n<p>Some of the widely used web development technology stacks are as follow:\u00a0<\/p>\n\n\n\n<ul><li>MERN ( MongoDB, ExpressJS, ReactJS, NodeJS)<\/li><li>MEAN (MongoDB, ExpressJS, AngularJs, NodeJs)<\/li><li>MEVN (MongoDB, ExpressJS, VueJs, NodeJS)<\/li><li>LAMP (Linux, Apache, MySQL, PHP)\u00a0<\/li><li>RoR (Ruby on Rails)<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"What_is_MERN_Stack\"><\/span><strong>What is MERN Stack ?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>MERN Stands for MongoDB, ExpressJS, ReactJs and NodeJS. MERN Stack is a web development framework used for building full stack web apps and websites.<\/p>\n\n\n\n<p>This means one can build the entire web application (front-end + back-end + Database) using MERN Stack Technology. It is an open source full stack development framework.<\/p>\n\n\n\n<p>All technologies used in the MERN stack are based on JavaScript. MongoDB is a database System, ExpressJs is a back-end NodeJs Framework, React is a front-end framework and NodeJs is a back-end runtime environment.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Components_of_MERN_Stack\"><\/span><strong>Components of MERN Stack<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>These are the four key technologies that make up the MERN Stack.<\/p>\n\n\n\n<ul><li>MongoDB &#8211; Document Database NoSQL<\/li><li>ExpressJS &#8211; Node.js Web Framework<\/li><li>ReactJs &#8211; a client-side(front-end) JavaScript Framework<\/li><li>NodeJs &#8211; JavaScript Runtime Environment<\/li><\/ul>\n\n\n\n<p>Here are the details of each technology used in MERN Stack.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"1_MongoDB\"><\/span><strong>1.<\/strong> <strong>MongoDB<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>If your website or web app stores any kind of data (like User Profile, Passwords, Comments, login data etc.), then you have to use a database in your web app.\u00a0<\/p>\n\n\n\n<p>MongoDB is an open source, document oriented (means data is saved using documents instead of Tables and rows), No-SQL Database used to store the application data.<\/p>\n\n\n\n<p>The format of MongoDB documents is similar to JSON, which helps in the faster data exchange between the client and server. This helps in increasing the efficiency of the web app.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"2_ExpressJS\"><\/span><strong>2. ExpressJS<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>ExpressJS is a NodeJs framework for creating server-side web applications. Since NodeJS was developed to run JavaScript out of the browser rather than creating web apps\/websites, a separate different entity named ExpressJS was developed.<\/p>\n\n\n\n<p>ExpressJS is best known for its fast speed, modular structure and availability of a large number of plugins.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"3_ReactJS\"><\/span><strong>3.<\/strong> <strong>ReactJS<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>ReactJs is a free and open front-end JavaScript library for building User Interfaces especially for SPA(Single Page Applications). ReactJs was developed by facebook in 2013.<\/p>\n\n\n\n<p>React is the most popular JavaScript library used to build UI Components. React helps developers to create applications which can change the data without reloading the Page For e.g. Facebook, Instagram etc.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"4_NodeJS\"><\/span><strong>4.<\/strong> <strong>NodeJS<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h3>\n\n\n\n<p>NodeJs is a cross platform JavaScript Runtime Environment. It is used to run JavaScript outside of a web browser.&nbsp;&nbsp;<\/p>\n\n\n\n<p>NodeJs is one of the most popular frameworks for building web apps. NPM allows the developers to choose from the thousands of pre-built packages.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"How_Does_the_MERN_Stack_Works\"><\/span><strong>How Does the MERN Stack Works ?<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>As you have seen till now, a web app\/ website consists of three major parts.<\/p>\n\n\n\n<ul><li>Front-End (Client Side)<\/li><li>Back-End (Server Side)<\/li><li>Database\u00a0<\/li><\/ul>\n\n\n\n<p>The user interacts with the web app with the help of front-end technology which is built with the help of ReactJS. When users do any kind of activity on the web app or make any kind of request, then this is where the back-end comes into play.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img decoding=\"async\" width=\"1167\" height=\"675\" src=\"https:\/\/www.codingbroz.com\/wp-content\/uploads\/2021\/08\/mern-stack.png\" alt=\"Working of MERN Stack\" class=\"wp-image-3935\" srcset=\"https:\/\/www.codingbroz.com\/wp-content\/uploads\/2021\/08\/mern-stack.png 1167w, https:\/\/www.codingbroz.com\/wp-content\/uploads\/2021\/08\/mern-stack-768x444.png 768w\" sizes=\"(max-width: 1167px) 100vw, 1167px\" \/><\/figure>\n\n\n\n<p>Any activity\/request which causes a data change request is sent to Express Server, which then gets data from MongoDB Database if required.<\/p>\n\n\n\n<p>And after all these, the final desired output is sent to the front-end for the users.<\/p>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Advantages_of_MERN_Stack\"><\/span><strong>Advantages of MERN Stack<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>The key advantage of using MERN Stack is that you don\u2019t need to learn a lot of languages. JavaScript is what you all need.&nbsp;<\/p>\n\n\n\n<p>JavaScript is the most popular programming language which can be used for client side development as well as server side development.<\/p>\n\n\n\n<p>Some of the advantages of using MERN Stack are as follow:\u00a0<\/p>\n\n\n\n<ul><li>Reduce Server Costs.<\/li><li>Web applications are highly optimized.<\/li><li>The development of an entire web app by just using JavaScript.<\/li><li>Web apps developed using MERN Stack can easily be transformed to Mobile Apps with the help of React Native.<\/li><li>All the technologies used in MERN Stack are free and Open Source. Thus, it helps in launching your application without any copyright worries.<\/li><\/ul>\n\n\n\n<h2 class=\"wp-block-heading\"><span class=\"ez-toc-section\" id=\"Conclusion\"><\/span><strong>Conclusion<\/strong><span class=\"ez-toc-section-end\"><\/span><\/h2>\n\n\n\n<p>I hope after going through this post, you clearly understand about MERN Stack and why it is one of the Best technologies for web development.&nbsp;<\/p>\n\n\n\n<p>So, if you want to become a MERN Stack then go for it. Because the industry has a huge demand for MERN developers. This will surely help in your career growth.\u00a0<\/p>\n","protected":false},"excerpt":{"rendered":"<p>What is MERN Stack ? MERN Stands for MongoDB, ExpressJS, ReactJs and NodeJS. MERN Stack is a web development framework used for building full stack web apps and websites.<\/p>\n","protected":false},"author":2,"featured_media":3936,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"site-sidebar-layout":"default","site-content-layout":"default","ast-site-content-layout":"","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","theme-transparent-header-meta":"default","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-gradient":""}},"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[3],"tags":[201,200,202,203],"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"https:\/\/www.codingbroz.com\/wp-content\/uploads\/2021\/08\/what-is-mern-stack-development-codingbroz.png","jetpack-related-posts":[],"_links":{"self":[{"href":"https:\/\/www.codingbroz.com\/wp-json\/wp\/v2\/posts\/3932"}],"collection":[{"href":"https:\/\/www.codingbroz.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.codingbroz.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.codingbroz.com\/wp-json\/wp\/v2\/users\/2"}],"replies":[{"embeddable":true,"href":"https:\/\/www.codingbroz.com\/wp-json\/wp\/v2\/comments?post=3932"}],"version-history":[{"count":2,"href":"https:\/\/www.codingbroz.com\/wp-json\/wp\/v2\/posts\/3932\/revisions"}],"predecessor-version":[{"id":3937,"href":"https:\/\/www.codingbroz.com\/wp-json\/wp\/v2\/posts\/3932\/revisions\/3937"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.codingbroz.com\/wp-json\/wp\/v2\/media\/3936"}],"wp:attachment":[{"href":"https:\/\/www.codingbroz.com\/wp-json\/wp\/v2\/media?parent=3932"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.codingbroz.com\/wp-json\/wp\/v2\/categories?post=3932"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.codingbroz.com\/wp-json\/wp\/v2\/tags?post=3932"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}