git_username

git_email

heroku_email

heroku_password

Learn to build and deploy a full-stack MERN application. Gain insights into MongoDB basics, Node.js backend, and React frontend. Explore API testing and Heroku deployment.

Beginning Node.js, Express & MongoDB Development.png

MERN.tar.gz

first

second

third

fourth

fifth

temp

app_l

movies_list

react icon

movie_routes

display_m

movie_r

In this course, you’ll learn how to build a full-stack application using the MERN stack and deploy it to the internet. The MERN stack is a popular stack of technologies that build modern Single Page Applications (SPAs).

You’ll begin with the basics of MongoDB and the process of setting it up. Next, you will go over work with the Atlas cloud database. Then, you’ll learn how to set up the backend using Node and express. Also, you’ll be creating a fully functional movie review application. After creating the controller and data access objects, you’ll learn to create routes. Next, you’ll test the created API. Finally, you’ll learn how to create the frontend using the React components and deploy the application on Heroku.

By the end of this course, you’ll learn how to connect both the backend and the frontend to create a full-stack MERN application, as well as how to deploy it.

Beginning Node.js, Express & MongoDB Development

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

# Adding `express` and `cors` middleware

Our backend uses the `ES6 import` statement. So before we start creating the backend, we need to add the `import` statement to our `package.json`.


{
"name": "backend",
"version": "1.0.0", 
"description": "", 
"main": "index.js", 
"type": "module", 
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1" },
...


This will use the `import` statements from `ES6`. 
Now, let's create a new file `server.js` in the `backend` folder with the following code:

import express from 'express'
import cors from 'cors'
import movies from './api/movies.route.js'

const app = express()
app.use(cors()) 
app.use(express.json())

app.use("/api/v1/movies", movies) 
app.use('*', (req,res)=>{
  res.status(404).json({error: "not found"}) 
})
export default app


**Lines 1–3:** First, we import the `express` and `cors` middleware. We also import `movie.route.js` (a separate file that we'll create later to store our routes).


**Line 5:** We create the server.


**Lines 6–7:** For functionality, we attach the `cors` and `express.json` middleware to the Express server we created. The JSON parsing middleware `express.json` enables the server to read and accept JSON in a request’s body.



**Lines 9–12:** We specify the initial routes for our application.

> **Note:** The general convention for API URLs is to begin it with` /api/<version number>`. And since our API is about movies, the main URL for our application will be `/api/v1/movies`. The subsequent specific routes are specified in the second argument, `movies`. If someone tries to go to a route that doesn't exist, the wild card route `app.use('*')` returns a 404 page with a `not found` message.






**Line 13:** We export `app` as a module so that other files can import it. This allows us to separate our main server code from our database code.

> **Note:** Middleware is a set of functions that Express executes in the middle after the incoming request and before the output. Middleware might make changes to the request and response objects. The `use` function registers a middleware with our Express application. The `app.use(express.json())` and `express.json()` middleware allow us to retrieve data from a request via the `body` attribute. (We'll see this in the code later on.) Without this middleware, data retrieval would be much more difficult.


Learn how to create a back-end server using Node.js.

Introduction and Setting up the Database

Setting up the Backend

Setting up the Frontend : Creating the Server

Setting up the Frontend: Creating the React Components

Deployment

Conclusion

Creating the Backend

Adding `express` and `cors` middleware

Creating the Backend

Adding express and cors middleware

Adding `express` and `cors` middleware