MERN Stack – Full Tutorial (MongoDB, Express, React, Node.js)

This is based on the video by FreeCodeCamp.org below and also I cloned the git repository to use their code for testing HERE:

I’m interested in playing with the React front end, as I’ve been playing with the node.js backend so I felt that this tutorial was an extension. After getting my head around the Backend stuff and seeing how useful it can be I’m now interested in looking at using a Front end programme like react to consume information that I’m pulling in from the back end.

I’m still writing the article on Puppeteer and web scraping and felt that this was an extension of what I’m doing.

There was another video on a covid data display using reasct here, I may explore that later, another tutorial, also long about 1.5 hrs on front end stuff.:

MERN Stack – MongoDB, Express, React, Node.js

I’m also interested in using MongoDB remote cloud DB for storing data, so the tutorial for this is great too. Following his tutorial I connected to mongoDB Atlas cloud and used the Google Cloud as the place to spin up the instance and logging in was pretty simple. I have now connected to the database from the backend of the code.

I used >git clone https://github.com/beaucarnes/mern-exercise-tracker-mongodb.git

In the selfie app I copied from code train there was a deficiency with storing the DB in a file on the Heroku cloud node.js runtime as I couldn’t access that information at a later date, it was just sitting onm that server instance. I could overwrite it or see it but could not copy it elsewhere.

So looking at other methods of connecting a DB to a deployed app is useful.

Getting backend server and DB connected and running

From the github repository I had to create my own .env file to put the URI link into, and it is connected to the server. The video was done in June 2019 and there is already depreciated code in it, so that is why I’m a bit wary of learning things like node & react, the environment is so dynamic, you leave it for a while and then come back and things have changed.

Also a bit twitchy as I’ve cloned the github repository and I’m not sure if the package.js has the latest npm packages that I’m pulling in. Still, I’m more interested in testing the app and exploring its use, if it does seem practical I may need to go back and build the app from scratch.

Users and exercises- adding/checking database

I used postman to do a post request to : http://localhost:5000/users/add and also a get request to :http://localhost:5000/users to check that the new user was added. It worked fine. So users database buerno.

The exercises worked wioth pos to http://localhost:5000/exercises/add and get to http://localhost:5000/exercises

so the database has been populated with data from the backend.

I also tested the id endpoint adding an id onto the exercise or user to get a specific record in the library (for testing)

Getting React to run

After getting the back end code and database running I started to try and run REACT. I installed it globally on my PC but it wouldnot run when I tried >npm start , I just got a load of errors.

I decided to make a fresh directory and install React from the start with >npm create-react-app this command installs react and creates directories and puts boilerplate code in for a basic app to run (the one with the react logo. That went fine and worked, no problem.

But my main mern app was not running, I messed around with trying to get it going and got a lot of errors. In the end I decided to bite the bullet and load React again using >npm install react and then when I used >npm start it worked fine.

I stuffed up a bit, I initially used >node server.js to run the backend server file that connected to mongoDB cloud DB and to the other JS code for CRUD commands for the exercises/users., but then changed the terminal to the React directory src> and ran src>npm app.js but what I’d done was shut down the node> server.js and I needed that running. To check, if you go to localhost:5000 in the browser the>node server.js should be running, then you need to go to another tab in the browser to localhost:3000 for the React fronmt end page. So as such, you have 2 servers going, one for Backend & one for Front end. Only when you have both open can thety talk to each other.

The React interface (browser localhost:3000) is calling the Server.js to get the info from the database, either posting or getting from it. So it makes sense that they are both running.

So to make this happen you need to open 2 terminals, one in the directory for the server.js file to call the commmand > node server.js and then another terminal in the src> directory to call the main react file App.js with >npm start

These can be checked by openig up 2 browser tabs:

With both open they can talk to each other.

So the app works, I can look at stuff from the 5000 server by adding endpoints to the URL or I can use postman to use GET & POST requests to it.

I can use te React Front end to input and query the info or edit it as well (at then of each row is an edit|delete optionsee image above). So at the end of the tutorial something works.

On importing from Github I still had to git install all the dependancies. So still not that familiar with the whole Git thing. Ineed to practice to gain confidence using it. At the beginning I hit a mental blank as to how to clone.

The tutorial

Although I didn’t write the code, but just copied it from the Github repository I did learn a bit about the whole setup and some of the requirements (like multiple terminals (it could have been done in one terminal but its easy to open others with VS Code.

Also to go back up one directory use > cd .. I was finding my dos commands had left me and struggled moving between directries, I need to do it a bit more on the terminal to refresh my memory.

End comment

It was fun poddling along trying to get this to work. A bit of learning about backend and frontend and full stack development. I still need to get my head around those concepts in more depth, but big picture is good.

I now see whewre React & Node sit in relation to each other. That is useful.

This tutorial, although interesting, is stll just learning how to play with some simple localhost interfaces, it is not a full deployment of the app in the cloud where I can access it remotely.

That is an issue, I need to know how to deploy these things otherwise its interesting but not useful.

Another spooky thing is a whole new programme and concepts elating to it AND JSX as an HTML lookalike. That does look as if its going to have a challenging learning curve attached to it.

I can see a use case for learning react, and have just come across React Native which is for mobile apps and watched a video on the CONS of using React Native. But that is an extension of React for later if I get more advanced and competent with using React.

Max Drake

About

My current area of interest is in exploring Asset & Facilities Management tools based on capturing information at Design/Construction phase for use throughout the life of the building. Tools I am using are open-source or common programmes to allow maximum accessibility to the information both in geometric and data format.

This has dropped me into the world of programming HTML, CSS, JavaScript, SQL, VBA, PHP & AJAX to name but a few distractions.