Part-1 | NestJS(v9) | ReactJS(v18) | MongoDB | CRUD Example

The main objectives of this article are:

• NestJS And ReactJS Application Communication.
• NestJS.
• Create NestJS Application.
• Debug The NestJS Application From Visual Studio Code.
• ReactJS
• Create ReactJS Applicaiton
• Install React Bootstrap
• Add React Bootstrap Menu.

NestJS And ReactJS Application Communication:

• The user request the ReactJS application(single page application) then js files are downloaded and then runs the application on the browser.
• Since ReactJS is a single-page application it depends on API for data to display.
• So ReactJS request the NestJS endpoint through HTTP requests.
• NestJS API that runs at the server gives the JSON response. NestJS API communicates with the database for fetching and storing the data.

NestJS:

NestJS is a framework used to develop the server-side application. NestJS is built on top of the Node.js framework just like Express. It is a combination of Progressive Javascript, Object-Oriented Programming, Functional Programming, and Functional Reactive Programming.

NestJS application built with 'Models' and 'Controllers' to serve an HTTP request. NestJS works with TypeScript for strongly typed programming.

Create NestJS Application:

To run or set up the NestJS or ReactJS application, first, we must contain the 'Node.js' in our local machine. So to download and install the 'Node.js' go to 'https://nodejs.org/en/download/'. 

Next, we have to install the NestJS CLI into our local machine.

npm i -g @nestjs/cli

Run the below command to create the NestJS application.

nest new your-project-name

Command to start the NestJS application.

npm run start

Explore our new NestJS application:

package.json - The 'package.json' file contains 'dependencies'(libraries that nestjs depends on), 'devdependencies'(libraries that are required for development), 'scripts'(commands to run, debug, tests, etc), etc.

tsconfig.json - The 'tsconfig.json' file contains the configuration to build the project.

main.ts - The 'main.ts' file is the entry file of our application. Here we can see our application port number. Here we can observe it loads the 'AppModule'.

app.module.ts - The 'app.module.ts' file is our entry file.

app.controller.ts - The 'app.controller.ts' file is the default controller file which either we can use or ignore it.

app.service.ts - The 'app.service.ts' file is the default service file which either we can use or ignore it.

Change Default Port Number:

By default, the NestJS runs at port number '3000', but for ReactJS application also runs under port number '3000'. So let's change our 'NestJS' application port number to something like '4000' in the 'src/main.ts' file.

Debug NestJS Application From Visual Studio Code:

Let's understand how to enable the debugger in the NestJS application using Visual Studio Code.

Run the below command to start the nestjs application in debug mode.

npm run start:debug

Now select the 'Run & Debug'  and then click on 'create a launch.json' and then select  the 'Node JS'

 as the environment.

Now in the 'launch.json' file replace the 'configuration' array as follows.

.vscode/launch.json:

{
    "version": "0.2.0",
    "configurations": [
        {
            "name": "Attach",
            "port": 9229,
            "request": "attach",
            "skipFiles": [
                "<node_internals>/**"
            ],
            "type": "node"
        }
    ]
}

Now add the debugger in any part of the controller and then click on 'start debug'.

ReactJS:

ReactJS is a javascript library for creating user interface components. ReactJS components contain javascript function and they return JSX(JavaScript XML) as output. ReactJS effectively renders and update the component on data changes.

Create ReactJS Application:

Command to create the ReactJS application.

npx create-react-app my-app

Command to start and run the ReactJS application server.

npm start

Let's go through the project and explore the important files.

index.html -  Inside the public folder we can see the index.html. Only the HTML file of the entire ReactJS application. It contains a  'div' element whose 'id' value is 'root', inside of this element all the ReactJS components get rendered.

index.js - Entry javascript file for ReactJS. It helps to paint 'App' component content in 'index.html'.

App.js - The 'App.js' react component. It returns the 'JSX'(Javascript XML) content(JSX means writing the HTML code inside of the javascript directly).

Install React Bootstrap:

ReactJS Bootstrap is just built on Bootstrap. So that all UI components are straightforward to integrate into the ReactJS application.

Command to install the ReactJS bootstrap.

npm install react-bootstrap bootstrap

Now import the bootstrap CSS node module file reference on the 'index.js'.

src/index.js:

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";
import 'bootstrap/dist/css/bootstrap.min.css'

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(<App />);

• (Line: 5) Added the bootstrap CSS file reference.
• Here removed existing default code like 'reprtWebVitals' and 'React.StrictMode'(react component) which we won't require for learning.

Add React Bootstrap Menu:

The 'Menu' is shared content for all the pages in any application. So let's create separate components like 'Layout.js' inside of a new folder path like 'components/shared'.

src/components/shared/Layout.js:

import { Container } from "react-bootstrap";
import Navbar from "react-bootstrap/Navbar";

const Layout = ({ children }) => {
  return (
    <>
      <Navbar bg="primary" variant="dark">
        <Navbar.Brand>Navbar</Navbar.Brand>
      </Navbar>
      <Container>{children}</Container>
    </>
  );
};

export default Layout;

• Here 'Layout' is our component function entire logic is added inside of it and this function returns JSX content. The 'Layout' function has input parameters like 'children' t.
• (Line: 1&2) Imported the react-bootstrap component like 'Containers' & 'Navbar'.
• (Line: 13) The 'Layout' function must be render as custom tag like '<Layout></Layout>'. So to read the content inside of the 'Layout' element we have to use 'children' and to render content we have to ReactJS expressions like '{}'(this can render plain text, HTML, and even executes logical expressions).

Since 'App.js' entry component, so let's encapsulate its content inside of the 'Layout' element tag as follows.

src/App.js:

import logo from './logo.svg';
import './App.css';
import Layout from './components/shared/Layout';

function App() {
  return (
    <Layout><h1>Welcome!</h1></Layout>
  );
}
export default App;

Support Me!
Buy Me A Coffee PayPal Me

Video Session:

Wrapping Up:

Hopefully, I think this article delivered some useful information on NestJS(v9) | ReactJS(v18) CRUD sample. I love to have your feedback, suggestions, and better techniques in the comment section below.

Refer:

Part-2 | NestJS(v9) | ReactJS(v18) | MongoDB | CRUD Example

Part-3 | NestJS(v9) | ReactJS(v18) | MongoDB | CRUD Example

Part-4 | NestJS(v9) | ReactJS(v18) | MongoDB | CRUD Example

Part-5 | NestJS(v9) | ReactJS(v18) | MongoDB | CRUD Example

Part-6 | NestJS(v9) | ReactJS(v18) | MongoDB | CRUD Example

Follow Me:

YouTube

Facebook

Twitter

Pinterest