Blog using the MERN Stack Part 1 - Starting the project

22/01/2021

Introduction

We'll be creating a blog using the MERN Stack.

The MERN Stack stands for:

• MongoDB

• ExpressJS

• React

• NodeJS

MongoDB is a NoSQL database. It's a general purpose database that uses BSON (a JSON like format) to store data. It can be incredibly powerful when used properly.

NodeJS an asynchronous event-driven JavaScript runtime.

ExpressJS is a web framework that uses NodeJS. it incredily easy to make routes for API Calls.

Lastly, ReactJS is a powerful frontend library made by Facebook. It makes everything pretty.

Prerequisites

You'll need to install a couple of things:

• the lastest stable version of NodeJS (currently v14.5.2 at time of writing)

• MongoDB

• Access to Visual Studio Code from the terminal

Make sure you have node successfully installed by running:

node -v

Make sure you have npm successfully installed by running:

npm -v

You can use Node Version Manager (nvm) to install different versions of Node and to switch between them.

The Node Package Manager (npm) should come installed with NodeJS.

I am using Windows Subsystem for Linux 2 (Ubuntu 20.04 LTS) so if you are following along in another distribution, your console commands might be different (but you probably knew that)

Create a parent directory

We want to create our parent directory which will house both our frontend and backend. So the plan is to have:

• Blog

  • Client

  • Server

I was using WSL for Windows. My linux distribution is Ubuntu 20.04 LTS.

mkdir blog_mern

Go ahead and go into that folder:

cd blog_mern

First, create your Frontend

For the front end of our app, we will be using React. Go ahead and install create-react-app globally in node. We do this by running:

npx create-react-app client

npx will go download and run a package temporarily. See here for more details on what the difference between npm vs npx is.

This creates our React app. Open it in Visual Studio Code.

code .

The folder structure is:

Folder Structure of Client

• client

  • node_modules directory

  • public directory

  • src directory

  • .eslintcache

  • .gitignore

  • package.json

  • README.md

  • yarn.lock

Initialize a git repo in this folder.

git init

Cool, we're done here for now.

Second, create your Backend

Change directory back to your parent directory:

cd ..

In the blog_mern folder, create your backend folder

mkdir server

Go into your server folder with:

cd server

Initialise your code with npm init :

Make sure to set your entry point as app.js

gamesfreak26@Xanthic:/mnt/e/Repos/MERN/blog/backend$ npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.

See `npm help init` for definitive documentation on these fields
and exactly what they do.

Use `npm install <pkg>` afterwards to install a package and
save it as a dependency in the package.json file.

Press ^C at any time to quit.
package name: (backend)
version: (1.0.0)
description:
entry point: (index.js) app.js
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to /mnt/e/Repos/MERN/blog/backend/package.json:

{
  "name": "backend",
  "version": "1.0.0",
  "description": "",
  "main": "app.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}


Is this OK? (yes)

Open Visual Studio Code:

code .

This should open the empty folder in Code. Create a file called app.js.

Your folder structure should look like:

Folder Structure

• server

  • app.js

  • package.json

Initilise a git repo:

git init

Conclusion

Inside our blog_mern parent folder, we have two folders: client and server. Both are git repos

• blog_mern

  • client (git repo)

    • node_modules directory

    • public directory

    • src directory

    • .eslintcache

    • .gitignore

    • package.json

    • README.md

    • yarn.lock

  • server (git repo)

    • app.js

    • package.json

In the next tutorial, we will learn how to implement CRUD on the backend.