Submit templates for repl.it/templates here.

← Back to all posts
MERN Stack Web Application Template
LOLMcman (68)

MERN Stack Template

The MERN stack is a popular JavaScript tech stack used to create single-page web applications. This template is for jump starting your web development by including a prebuilt and configurable REST API and React frontend.

Components

The MERN stack is made up of:

  • MongoDB: A document-oriented database used to store the application's data
  • Express.js: A Node.js framework used to create the backend.
  • React: A library created by Facebook used to create the UI components of the application
  • Node.js: The JavaScript runtime environment which that executes JavaScript code outside of the browser

Features

This template already comes with a basic version of the classic to-do list application. Important features include:

  • MongoDB database
  • REST API
  • React frontend

Using this template

I have split this template into two repls: the frontend and the backend (I was originally going to have them in 1 file but for some reason it forever to load and start the repl).

In the backend repl, create a '.env' file and set a variable called 'DB' equal to your MongoDB database. Then, in the frontend repl, replace the backend variable in config.js with the url to your backend repl. Once you've done these two things, you can start working on your new web application.

Comments
hotnewtop
moorhosj (0)

I am getting an error about sending too many headers: Request received
/home/runner/mern-backend/node_modules/mongoose/lib/helpers/promiseOrCallback.js:19
throw error;
^

Error [ERR_HTTP_HEADERS_SENT]: Cannot set headers after they are sent to the client

AdCharity (1362)

you could try connecting express and react together (I've done it it's just extremely slow since React is such a space drainer), but I do believe it comes with some minor downsides like caches and stuff

AtticusKuhn (241)

@AdCharity I have used express routing with react in next.js. I find that is good.

AdCharity (1362)

@AtticusKuhn it kind of depends on your needs. On the final build command, there are some downsides to using your own server instead of the inbuilt Next.js one (which sucks on all accounts), but I don't think there's anything serious besides speed.

AtticusKuhn (241)

<title>React App</title> hmmmmmm.