{"id":17792,"date":"2026-09-01T07:11:26","date_gmt":"2026-09-01T06:11:26","guid":{"rendered":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/?p=17792"},"modified":"2026-09-01T07:11:26","modified_gmt":"2026-09-01T06:11:26","slug":"how-to-get-started-with-the-mern-stack","status":"publish","type":"post","link":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/how-to-get-started-with-the-mern-stack\/","title":{"rendered":"How To Get Started with the MERN Stack?"},"content":{"rendered":"\n<p>MERN refers to a set of four technologies: MongoDB, Express, React, and Node.js. Together, they keep the entire application in a single language, covering both frontend and backend. This guide walks through building a simple task manager so you can see how each component connects to the next.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">How Do You Set Up the MERN Stack?<\/h2>\n\n\n\n<p>Node.js runs your backend code, and npm comes bundled with it to manage packages. Install the latest LTS version from the official <a href=\"https:\/\/www.milesweb.co.uk\/hosting\/nodejs-hosting\"><strong>Node.js<\/strong><\/a> website, then confirm both are set up correctly:<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 1: Install Node.js and npm<br><\/h3>\n\n\n\n<pre class=\"wp-block-code\"><code>bash\nnode -v\nnpm -v<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 2: Create Your Project Folder<\/h3>\n\n\n\n<p>Start with a root folder, then split it into two subfolders, one for the backend and one for the frontend. Keeping them separate from the beginning saves confusion later.<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>bash\nmkdir mern-todo-app\ncd mern-todo-app\nmkdir backend frontend\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 3: Initialise the Backend<\/h3>\n\n\n\n<p>Move into the backend folder and run npm init to create a package.json file. From there, install Express along with a few supporting packages you&#8217;ll need.<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>bash\ncd backend\nnpm init -y\nnpm install express mongoose cors dotenv\n<\/code><\/pre>\n\n\n\n<p>Create a server.js file. This is where Express actually starts listening for requests:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>javascript\nconst express = require('express');\nconst cors = require('cors');\nrequire('dotenv').config();\n\nconst app = express();\napp.use(cors());\napp.use(express.json());\n\nconst PORT = process.env.PORT || 5000;\napp.listen(PORT, () =&gt; console.log(`Server running on port ${PORT}`));\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 4: Connect to MongoDB<\/h3>\n\n\n\n<p>Sign up for a free MongoDB Atlas cluster, then place your connection string inside a <em>.env file<\/em> so it remains closer to your codebase.<\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>MONGO_URI=your_mongodb_connection_string\nPORT=5000\n<\/code><\/pre>\n\n\n\n<p>Connect Mongoose to your database inside server.js so it links up on startup:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>javascript\nconst mongoose = require('mongoose');\n\nmongoose.connect(process.env.MONGO_URI)\n  .then(() =&gt; console.log('MongoDB connected'))\n  .catch((err) =&gt; console.error(err));\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 5: Build Your API Routes<\/h3>\n\n\n\n<p>Inside a models folder, add a Todo.js file that defines what a single todo item looks like:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>javascript\nconst mongoose = require('mongoose');\n\nconst TodoSchema = new mongoose.Schema({\n  task: { type: String, required: true },\n  completed: { type: Boolean, default: false }\n});\n\nmodule.exports = mongoose.model('Todo', TodoSchema);\nAdd routes in server.js to create and fetch todos:\njavascript\nconst Todo = require('.\/models\/Todo');\n\napp.get('\/api\/todos', async (req, res) =&gt; {\n  const todos = await Todo.find();\n  res.json(todos);\n});\n\napp.post('\/api\/todos', async (req, res) =&gt; {\n  const newTodo = new Todo({ task: req.body.task });\n  const savedTodo = await newTodo.save();\n  res.json(savedTodo);\n});\n<\/code><\/pre>\n\n\n\n<p>Test each route with a tool such as Postman before connecting it to your frontend.<br><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 6: Set Up the React Frontend<\/h3>\n\n\n\n<p>Move into your frontend folder and build a new React project:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>bash\ncd ..\/frontend\nnpx create-react-app .\nnpm start\n<\/code><\/pre>\n\n\n\n<p>This confirms React runs correctly on its own development server, usually at <em>localhost:3000<\/em>.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Step 7: Connect Frontend and Backend<\/h3>\n\n\n\n<p>Install Axios in your frontend folder, then call your Express API from a React component:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>bash\nnpm install axios\njavascript\nimport axios from 'axios';\nimport { useEffect, useState } from 'react';\n\nfunction App() {\n  const &#91;todos, setTodos] = useState(&#91;]);\n\n  useEffect(() =&gt; {\n    axios.get('http:\/\/localhost:5000\/api\/todos')\n      .then((res) =&gt; setTodos(res.data));\n  }, &#91;]);\n\n  return (\n    &lt;ul&gt;\n      {todos.map((todo) =&gt; (\n        &lt;li key={todo._id}&gt;{todo.task}&lt;\/li&gt;\n      ))}\n    &lt;\/ul&gt;\n  );\n}\n\nexport default App;\n<\/code><\/pre>\n\n\n\n<h3 class=\"wp-block-heading\">Step 8: Run the Full Application<\/h3>\n\n\n\n<p>Start both servers in separate terminal windows:<br><\/p>\n\n\n\n<pre class=\"wp-block-code\"><code>bash\n# Terminal 1\ncd backend &amp;&amp; node server.js\n\n# Terminal 2\ncd frontend &amp;&amp; npm start\n<\/code><\/pre>\n\n\n\n<p>Your React app now fetches data from Express, which reads from and writes to MongoDB.<br><\/p>\n\n\n\n<h2 class=\"wp-block-heading\">A Few Important Considerations<\/h2>\n\n\n\n<ul class=\"wp-block-list\">\n<li><strong>Environment variables<\/strong>: The connection string and other sensitive values need a place outside your actual code, and .env is that place. Check it&#8217;s excluded from version control before pushing anything.<br><\/li>\n\n\n\n<li><strong>Folder structure<\/strong>: Routes, models, and controllers each deserve their own file from the start. Going back to split them apart once the backend has grown into a single large file is a much bigger job than doing it early.<br><\/li>\n\n\n\n<li><strong>Error handling<\/strong>: A failed database call without a try-catch block around it doesn&#8217;t fail quietly. It can crash the server outright or return information that was never meant to reach the user.<br><\/li>\n\n\n\n<li><strong>CORS configuration<\/strong>: Leaving all origins open is harmless while testing locally, but that same setting in production opens the door wider than it should be. Restrict it to your actual frontend domain before release.<br><\/li>\n\n\n\n<li><strong>Deployment<\/strong>: Once the app runs cleanly on your machine, the backend and frontend don&#8217;t have to be deployed at the same time. Deploy them as separate services, or bundle them into one, based on whatever the hosting setup calls for.<br><\/li>\n\n\n\n<li>Version control: Git should start with your very first commit, not get added after the project takes shape. Early tracking makes debugging and collaboration noticeably easier as the project grows.<\/li>\n<\/ul>\n\n\n\n<p>The MERN stack takes some repetition to feel natural, but the pattern holds steady from one project to the next: Node and Express handle the server, MongoDB stores the data, and React renders what the user actually sees.&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>MERN refers to a set of four technologies: MongoDB, Express, React, and Node.js. Together, they keep the entire application in a single language, covering both frontend and backend. This guide walks through building a simple task manager so you can see how each component connects to the next. How Do You Set Up the MERN [&hellip;]<\/p>\n","protected":false},"author":12,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[22],"tags":[],"class_list":["post-17792","post","type-post","status-publish","format-standard","placeholder-for-hentry","category-vps-faq"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v25.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How To Get Started with the MERN Stack?<\/title>\n<meta name=\"description\" content=\"Learn how to get started with the MERN Stack, from setting up Node.js and MongoDB to building your first full-stack web application.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/how-to-get-started-with-the-mern-stack\/\" \/>\n<meta property=\"og:locale\" content=\"en_GB\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How To Get Started with the MERN Stack?\" \/>\n<meta property=\"og:description\" content=\"Learn how to get started with the MERN Stack, from setting up Node.js and MongoDB to building your first full-stack web application.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/how-to-get-started-with-the-mern-stack\/\" \/>\n<meta property=\"og:site_name\" content=\"Web Hosting FAQs by MilesWeb\" \/>\n<meta property=\"article:published_time\" content=\"2026-09-01T06:11:26+00:00\" \/>\n<meta name=\"author\" content=\"Pravin Dahadade\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Pravin Dahadade\" \/>\n\t<meta name=\"twitter:label2\" content=\"Estimated reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/how-to-get-started-with-the-mern-stack\/\",\"url\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/how-to-get-started-with-the-mern-stack\/\",\"name\":\"How To Get Started with the MERN Stack?\",\"isPartOf\":{\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#website\"},\"datePublished\":\"2026-09-01T06:11:26+00:00\",\"author\":{\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#\/schema\/person\/8ec3f61c42d57dcdfe230b85246842ad\"},\"description\":\"Learn how to get started with the MERN Stack, from setting up Node.js and MongoDB to building your first full-stack web application.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/how-to-get-started-with-the-mern-stack\/#breadcrumb\"},\"inLanguage\":\"en-GB\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/how-to-get-started-with-the-mern-stack\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/how-to-get-started-with-the-mern-stack\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How To Get Started with the MERN Stack?\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#website\",\"url\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/\",\"name\":\"Web Hosting FAQs by MilesWeb\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-GB\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#\/schema\/person\/8ec3f61c42d57dcdfe230b85246842ad\",\"name\":\"Pravin Dahadade\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-GB\",\"@id\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/3dbf83949fba3453ab1d66d34757a110?s=96&d=blank&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/3dbf83949fba3453ab1d66d34757a110?s=96&d=blank&r=g\",\"caption\":\"Pravin Dahadade\"},\"description\":\"With an interest in doing something creative daily. I like to write technical blogs related to web hosting, digital marketing, and other IT topics. Also like to spend leisure time on social media to find different strategies for client engagement.\",\"url\":\"https:\/\/www.milesweb.co.uk\/hosting-faqs\/author\/pravin-d\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How To Get Started with the MERN Stack?","description":"Learn how to get started with the MERN Stack, from setting up Node.js and MongoDB to building your first full-stack web application.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/how-to-get-started-with-the-mern-stack\/","og_locale":"en_GB","og_type":"article","og_title":"How To Get Started with the MERN Stack?","og_description":"Learn how to get started with the MERN Stack, from setting up Node.js and MongoDB to building your first full-stack web application.","og_url":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/how-to-get-started-with-the-mern-stack\/","og_site_name":"Web Hosting FAQs by MilesWeb","article_published_time":"2026-09-01T06:11:26+00:00","author":"Pravin Dahadade","twitter_misc":{"Written by":"Pravin Dahadade","Estimated reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/how-to-get-started-with-the-mern-stack\/","url":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/how-to-get-started-with-the-mern-stack\/","name":"How To Get Started with the MERN Stack?","isPartOf":{"@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#website"},"datePublished":"2026-09-01T06:11:26+00:00","author":{"@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#\/schema\/person\/8ec3f61c42d57dcdfe230b85246842ad"},"description":"Learn how to get started with the MERN Stack, from setting up Node.js and MongoDB to building your first full-stack web application.","breadcrumb":{"@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/how-to-get-started-with-the-mern-stack\/#breadcrumb"},"inLanguage":"en-GB","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.milesweb.co.uk\/hosting-faqs\/how-to-get-started-with-the-mern-stack\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/how-to-get-started-with-the-mern-stack\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/"},{"@type":"ListItem","position":2,"name":"How To Get Started with the MERN Stack?"}]},{"@type":"WebSite","@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#website","url":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/","name":"Web Hosting FAQs by MilesWeb","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-GB"},{"@type":"Person","@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#\/schema\/person\/8ec3f61c42d57dcdfe230b85246842ad","name":"Pravin Dahadade","image":{"@type":"ImageObject","inLanguage":"en-GB","@id":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/3dbf83949fba3453ab1d66d34757a110?s=96&d=blank&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/3dbf83949fba3453ab1d66d34757a110?s=96&d=blank&r=g","caption":"Pravin Dahadade"},"description":"With an interest in doing something creative daily. I like to write technical blogs related to web hosting, digital marketing, and other IT topics. Also like to spend leisure time on social media to find different strategies for client engagement.","url":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/author\/pravin-d\/"}]}},"views":0,"_links":{"self":[{"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/posts\/17792","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/users\/12"}],"replies":[{"embeddable":true,"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/comments?post=17792"}],"version-history":[{"count":2,"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/posts\/17792\/revisions"}],"predecessor-version":[{"id":17794,"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/posts\/17792\/revisions\/17794"}],"wp:attachment":[{"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/media?parent=17792"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/categories?post=17792"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.milesweb.co.uk\/hosting-faqs\/wp-json\/wp\/v2\/tags?post=17792"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}