The MERN Stack is a set of libraries and frameworks that allow developers to develop full-stack applications using only JavaScript. The stack consists of:
This stack is appealing because it allows developers who might traditionally be "trapped" on the front-end to extend their JavaScript super powers across the entire pipeline of an application without the cognitive-overhead of context switching between programming languages and oftentimes programming paradigms.
step-0 and step-1 can be run by simply opening their corresponding index.html files in a browser. step-0 is a bare-minimum "Hello, World" for React using JSX but no build step 🎉! step-1 is a fully client-side implementation of the app we will be building.
step-2 and step-3 can be run with npm run start:step-{2 or 3}. step-2 introduces the Node server and Express for serving content. step-3 implements a REST-ful API using Express and stores/retrieves data from a MongoDB database.
NOTE: You must have mongoDB installed and running to run these examples. (See below for installation and start up instructions)
The following instructions walk through setting up MongoDB on MacOS. Instructions for other OS platforms can be found here.
-
install mongodb -
brew update && brew install mongodb -
create folder for database storage -
mkdir -p /data/db -
set read/write permissions -
sudo chmod 0755 /data/db && chown $USER /data/db -
start mongodb -
mongod
-
mkdir mern-tutorial && cd mern-tutorial -
npm init -
npm install express body-parser mongoose --save
The purpose of this tutorial is to serve as a jumping-off point for full-stack Javascript development. To expand on the ideas and concepts implemented here, I recommend checking out mern.io for a fully-featured, production-ready implementation of the "MERN Stack" that includes server-side rendering, component generation CLI, a development pipeline using Webpack, and much more!
If you have any questions feel free to reach out either here or find me on Twitter @arahansen. I'd be more than happy to chat!