feat: Added template for MERN JS Socket.io #175

Farkhanda-Dalal · 2025-10-25T05:41:12Z

Description

Add a new MERN template that demonstrates real-time communication using Socket.io for Javascript.

Related Issue

Closes issue #168

Changes:

Added New MERN + Socket.io Template:

Created a new real-time chat template using MERN (Vite for React) and Socket.io.
Backend: An Express server that uses an in-memory array to store messages and broadcasts new messages to all clients via Socket.io.
Frontend: A Vite + React client with a simple chat interface that connects to the server and updates in real-time.

Integrated Template into CLI:

Added "MERN + Socket.io" as a new option in the main CLI menu.
Created the necessary setup logic in project.js and installer.js to copy the template files and install dependencies.
Limited the language choice to "JavaScript" for this specific template to match the provided files.

Checklist

My code follows the project’s style guidelines.
I have tested my changes locally.
I have updated documentation in my template README.md

Proof of Work:

Created Folder using the template:

Frontend Test:

Testing Endpoints on Postman:

Copilot

Pull Request Overview

This PR adds a new MERN + Socket.io template to enable real-time chat functionality in JavaScript projects. The template includes both client and server code with Socket.io integration for bidirectional communication.

Key Changes

Added new "MERN + Socket.io" template option with JavaScript-only support
Implemented mernSocketioSetup function to handle template installation
Updated CLI prompts to include the new stack option and restrict language choice to JavaScript for this template

Reviewed Changes

Copilot reviewed 34 out of 41 changed files in this pull request and generated 9 comments.

Show a summary per file

File	Description
`index.js`	Added "MERN + Socket.io" to stack choices and new conditional language prompts
`utils/project.js`	Added project setup flow for mern-socketio stack
`utils/installer.js`	Implemented `mernSocketioSetup` function for dependency installation
`utils/templateManager.js`	Formatting changes only (quote style normalization)
`templates/mern-socketio/**`	New template files for server and client with Socket.io integration

Files not reviewed (4)

templates/mern-socketio/client/package-lock.json: Language not supported
templates/mern-socketio/javascript/client/package-lock.json: Language not supported
templates/mern-socketio/javascript/server/package-lock.json: Language not supported
templates/mern-socketio/server/package-lock.json: Language not supported

Comments suppressed due to low confidence (7)

templates/mern-socketio/javascript/server/controller/messages.js:1

The Message model is imported but never used. The controller uses an in-memory array instead of the database model, making this import redundant and potentially confusing.
templates/mern-socketio/javascript/server/models/Message.js:1
This file uses ES6 import syntax, but the package.json specifies 'type: commonjs', and other files in the server use CommonJS require() syntax. This will cause a runtime error.
templates/mern-socketio/javascript/server/index.js:1
This comment indicates Mongoose is not needed, but the package.json still includes 'mongoose' as a dependency, and there's a Message model file. Either remove the dependency and model file, or update the comment to clarify the intended state.
templates/mern-socketio/client/src/components/Chat.js:1
The socket URL is hardcoded differently here compared to socket.js which uses the same URL. This creates duplicated socket connections and inconsistent configuration. Consider importing the socket from socket.js instead.
templates/mern-socketio/client/src/index.js:1
This file uses the deprecated ReactDOM.render API. React 18 requires using ReactDOM.createRoot() instead. The main.jsx file already has the correct implementation, so this file appears to be redundant.
templates/mern-socketio/client/src/components/Chat.js:1
The Chat component listens for 'message' events, but the server emits 'newMessage' events (as seen in the controller). This event name mismatch will prevent messages from being received.
templates/mern-socketio/client/public/index.html:1
This public/index.html file is redundant. Vite projects use index.html in the project root (which already exists), not in the public folder. This file will be ignored by Vite.

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

Copilot · 2025-10-25T05:42:31Z

templates/mern-socketio/server/controller/messages.js

@@ -0,0 +1,42 @@
+const Message = require('../models/Message');


The Message model is imported but never used. The controller uses an in-memory array instead of the database model, making this import redundant and potentially confusing.

Suggested change

const Message = require('../models/Message');

Copilot · 2025-10-25T05:42:32Z

templates/mern-socketio/server/models/Message.js

@@ -0,0 +1,20 @@
+import mongoose from 'mongoose';


This file uses ES6 import syntax, but the package.json does not specify 'type: module', and other files in the server use CommonJS require() syntax. This will cause a runtime error.

Copilot · 2025-10-25T05:42:32Z

templates/mern-socketio/server/index.js

+require('dotenv').config();
+const express = require('express');
+const http = require('http');
+// Mongoose is no longer needed


This comment indicates Mongoose is not needed, but the package.json still includes 'mongoose' as a dependency, and there's a Message model file. Either remove the dependency and model file, or update the comment to clarify the intended state.

Suggested change

// Mongoose is no longer needed

// Mongoose is not used in this file. If not needed elsewhere in the project, remove the 'mongoose' dependency and any related model files.

Copilot · 2025-10-25T05:42:33Z

templates/mern-socketio/javascript/client/src/components/Chat.js

+
+const socket = io('http://localhost:5000'); // Adjust the URL as needed
+


The socket URL is hardcoded differently here compared to socket.js which uses the same URL. This creates duplicated socket connections and inconsistent configuration. Consider importing the socket from socket.js instead.

Suggested change

const socket = io('http://localhost:5000'); // Adjust the URL as needed

import socket from '../socket'; // Adjust the path as needed

Copilot · 2025-10-25T05:42:33Z

templates/mern-socketio/javascript/client/src/index.js

+import React from 'react';
+import ReactDOM from 'react-dom';
+import App from './App';
+
+ReactDOM.render(
+  <React.StrictMode>
+    <App />
+  </React.StrictMode>,
+  document.getElementById('root')
+);


This file uses the deprecated ReactDOM.render API. React 18 requires using ReactDOM.createRoot() instead. The main.jsx file already has the correct implementation, so this file appears to be redundant.

Suggested change

import React from 'react';

import ReactDOM from 'react-dom';

import App from './App';

ReactDOM.render(

<React.StrictMode>

<App />

</React.StrictMode>,

document.getElementById('root')

);

Copilot · 2025-10-25T05:42:33Z

templates/mern-socketio/javascript/client/src/components/Chat.js

+        socket.on('message', (message) => {
+            setMessages((prevMessages) => [...prevMessages, message]);
+        });
+
+        return () => {
+            socket.off('message');


The Chat component listens for 'message' events, but the server emits 'newMessage' events (as seen in the controller). This event name mismatch will prevent messages from being received.

Suggested change

socket.on('message', (message) => {

setMessages((prevMessages) => [...prevMessages, message]);

});

return () => {

socket.off('message');

socket.on('newMessage', (message) => {

setMessages((prevMessages) => [...prevMessages, message]);

});

return () => {

socket.off('newMessage');

Copilot · 2025-10-25T05:42:34Z

index.js

+    {
+      name: "projectType",
+      type: "list",
+      message: "Select a project type:",
+      choices: [
+        "MERN",
+        "MEAN",
+        "MEVN",
+        "MERN (Real-Time with Socket.io)",
+        "PERN",
+      ],
+    },


This 'projectType' prompt appears to be unused - it's not referenced elsewhere in the code and doesn't affect the project setup flow. Additionally, it duplicates the stack selection functionality and includes 'PERN' which isn't implemented.

Suggested change

{

name: "projectType",

type: "list",

message: "Select a project type:",

choices: [

"MERN",

"MEAN",

"MEVN",

"MERN (Real-Time with Socket.io)",

"PERN",

],

},

Copilot · 2025-10-25T05:42:34Z

templates/mern-socketio/server/.env.example

+CLIENT_URL=http://localhost:3000
+MONGO_URI=URL


The MONGO_URI is included in the .env.example, but the server code doesn't establish a database connection and uses in-memory storage. This configuration is misleading and should be removed or the documentation should clarify it's for future use.

Suggested change

CLIENT_URL=http://localhost:3000

MONGO_URI=URL

CLIENT_URL=http://localhost:3000

Copilot · 2025-10-25T05:42:34Z

templates/mern-socketio/javascript/client/public/index.html

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>MERN Socket.io App</title>
+</head>
+<body>
+    <div id="root"></div>
+</body>
+</html>


This public/index.html file is redundant. Vite projects use index.html in the project root (which already exists), not in the public folder. This file will be ignored by Vite.

Suggested change

<!DOCTYPE html>

<html lang="en">

<head>

<meta charset="UTF-8">

<meta name="viewport" content="width=device-width, initial-scale=1.0">

<title>MERN Socket.io App</title>

</head>

<body>

<div id="root"></div>

</body>

</html>

JoeCelaster · 2025-10-25T08:12:49Z

Hi @Farkhanda-Dalal , May i know why you have implemented this ?.

Added template for MERN JS Socket.io

aec228c

Copilot AI review requested due to automatic review settings October 25, 2025 05:41

Copilot AI reviewed Oct 25, 2025

View reviewed changes

Removed project selection array due to redundancy

291e82d

Farkhanda-Dalal force-pushed the main branch 2 times, most recently from 3e3d91c to 291e82d Compare October 27, 2025 14:47

Updated frontend and backend (generic setup). Removed Chat Interface

94dd5e7

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

feat: Added template for MERN JS Socket.io #175

feat: Added template for MERN JS Socket.io #175

Uh oh!

Farkhanda-Dalal commented Oct 25, 2025 •

edited

Loading

Uh oh!

Copilot AI left a comment

Uh oh!

Copilot AI Oct 25, 2025

Uh oh!

Copilot AI Oct 25, 2025

Uh oh!

Copilot AI Oct 25, 2025

Uh oh!

Copilot AI Oct 25, 2025

Uh oh!

Copilot AI Oct 25, 2025

Uh oh!

Copilot AI Oct 25, 2025

Uh oh!

Copilot AI Oct 25, 2025

Uh oh!

Copilot AI Oct 25, 2025

Uh oh!

Copilot AI Oct 25, 2025

Uh oh!

JoeCelaster commented Oct 25, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

		@@ -0,0 +1,42 @@
		const Message = require('../models/Message');

	// Mongoose is no longer needed
	// Mongoose is not used in this file. If not needed elsewhere in the project, remove the 'mongoose' dependency and any related model files.


		const socket = io('http://localhost:5000'); // Adjust the URL as needed


	const socket = io('http://localhost:5000'); // Adjust the URL as needed
	import socket from '../socket'; // Adjust the path as needed

		CLIENT_URL=http://localhost:3000
		MONGO_URI=URL No newline at end of file

	CLIENT_URL=http://localhost:3000
	MONGO_URI=URL
	CLIENT_URL=http://localhost:3000

feat: Added template for MERN JS Socket.io #175

Are you sure you want to change the base?

feat: Added template for MERN JS Socket.io #175

Uh oh!

Conversation

Farkhanda-Dalal commented Oct 25, 2025 • edited Loading Uh oh! There was an error while loading. Please reload this page.

Uh oh!

Description

Related Issue

Changes:

Checklist

Proof of Work:

Created Folder using the template:

Frontend Test:

Testing Endpoints on Postman:

Uh oh!

Copilot AI left a comment

Choose a reason for hiding this comment

Pull Request Overview

Key Changes

Reviewed Changes

Uh oh!

Copilot AI Oct 25, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 25, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 25, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 25, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 25, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 25, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 25, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 25, 2025

Choose a reason for hiding this comment

Uh oh!

Copilot AI Oct 25, 2025

Choose a reason for hiding this comment

Uh oh!

JoeCelaster commented Oct 25, 2025

Uh oh!

Reviewers

Assignees

Labels

Projects

Milestone

Development

Uh oh!

2 participants

Farkhanda-Dalal commented Oct 25, 2025 •

edited

Loading