# Blog using the MERN Stack Part 1 - Starting the project

## 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 ](https://docs.microsoft.com/en-us/windows/wsl/tutorials/wsl-database)
* 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:

```bash
npm -v
```

{% hint style="info" %}
You can use [Node Version Manager](https://github.com/nvm-sh/nvm#install--update-script) (nvm) to install different versions of Node and to switch between them.
{% endhint %}

{% hint style="info" %}
The Node Package Manager (npm) should come installed with NodeJS.  
{% endhint %}

{% hint style="warning" %}
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)
{% endhint %}

## 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.  

```bash
mkdir blog_mern
```

Go ahead and go into that folder:

```bash
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:

```bash
npx create-react-app client
```

{% hint style="info" %}
[npx](https://blog.npmjs.org/post/162869356040/introducing-npx-an-npm-package-runner) will go download and run a package temporarily.  See [here ](https://stackoverflow.com/a/52018825)for more details on what the difference between npm vs npx is.  
{% endhint %}

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

```bash
code .
```

The folder structure is:

![Folder Structure of Client](https://1970861158-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ljn7Z64iRi1UjaYmuws%2F-MRdIqiljOxW2LZdDmuu%2F-MRdRHwronUAD7MG6AZb%2FScreenshot%202021-01-22%20193327.png?alt=media\&token=07997aef-c1a9-4dd8-bb03-ea1b1369b560)

* client
  * node\_modules directory
  * public directory
  * src directory
  * .eslintcache
  * .gitignore
  * package.json
  * README.md
  * yarn.lock

Initialize a git repo in this folder.

```bash
git init
```

Cool, we're done here for now.  

## Second, create your Backend

Change directory back to your parent directory:

```bash
cd ..
```

In the blog\_mern folder, create your backend folder

```bash
mkdir server
```

Go into your server folder with:

```bash
cd server
```

Initialise your code with `npm init` :

{% hint style="warning" %}
Make sure to set your entry point as app.js
{% endhint %}

```bash
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:

```bash
code .
```

This should open the empty folder in Code.  Create a file called `app.js`. &#x20;

Your folder structure should look like:&#x20;

![Folder Structure](https://1970861158-files.gitbook.io/~/files/v0/b/gitbook-legacy-files/o/assets%2F-Ljn7Z64iRi1UjaYmuws%2F-MZVqDbx6uC5KiklK7RI%2F-MZVwyCygh1vXTBrofq_%2FScreenshot%202021-04-30%20140509.png?alt=media\&token=b17eceb3-9735-406d-b4d8-44929fd607b4)

* server
  * app.js
  * package.json

Initilise a git repo:

```bash
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. &#x20;