# Web applications in React, Bootstrap, MongoDB, Express/Printable version

The current, editable version of this book is available in Wikibooks, the open-content textbooks collection, at
https://en.wikibooks.org/wiki/Web_applications_in_React,_Bootstrap,_MongoDB,_Express

# Create a MongoDB database locally

* 1) Install MongoDB Community Edition on your PC
* 2) Create a folder named mongo_database on proprio pc and a subfolder under it named data_items
* 3) Open a terminal in the mongo_database folder and type:
in this way the MongoDB server is started in the url 127.0.0.1 at port 27017
* 4) Open another terminal in the mongo_database folder and type in sequence:
In this way the database we will use will be called: db_items
* 5)Before starting the web server that we will create, the MongoDB server must be started with instruction 3)

# Create a Node Express web server locally that connects to a MongoDB database
## Installing Node.Js and Express Generator

* 1) Node.Js is a Javascript framework that also allows you to write server-side code and therefore, in particular, allows you to create an Express web server. npm (short for Node Package Manager [2]) is the default package manager for the Node.js JavaScript runtime environment. It consists of a command line client, also called npm, and an online database of public and private packages, called the npm registry.
* 2) Install Node.js on your PC from here: https://nodejs.org/
* 3) In the terminal type:
to verify that both node and npm have been installed correctly on your system.
* 4) Install the express-generator package via npm by typing in the terminal:
* 5) Open the terminal in Documents and type:
* 6) In the ItemsServer folder, type in the terminal:
* 7) In the ItemsServer folder type in the terminal to start the server:
* 8) In the browser at the link http://localhost:3000/ the message "Welcome to Express" will appear.A Node Express web server is done !

## API REST and MONGOOSE

The requests that the client makes to the server are made through the REST API. For example, if you are making a GET request, you are asking the server to return a resource. If you make a POST request, the server is being asked to create a new resource. If you are making a PUT request, you are asking the server to update an existing resource. And if you issue a DELETE request, the server is being asked to delete the resource identified by the particular URI. The exchange of data between client and server takes place in JSON format, which represents the standard with which Javascript objects are built. For example, the URL http://localhost:3000/items/234 means that the client asks the server to act on item 234, on which it is possible to perform GET, PUT or DELETE operations. To implement REST API calls on the MongoDB database you need to install mongoose:
* 1) In the ItemsServer folder open a terminal and type:
* 2) Create a mongoose schema for the document items of the MongoDB database and insert it in the items.js file inside the models sub folder of the ItemServer folder
* 3) In the subFolder routes of ItemServer, create the file itemRouter.js :
* 4) Edit the app.js file in the ItemsServer folder :
* 5) We created a Node Express web server that connects locally to a MongoDB database.

# Use the Postman program to perform read, create, update, delete operations on a MongoDB database through a Node Express web server

* 1) Download and install the Postman program from here: https://www.postman.com/downloads/
* 2) Start the MongoDB server, opening a terminal in the mongo_database folder and typing:
* 3) Start the Node Express web server, opening a terminal in the ItemsServer folder and typing:
* 4) Open the Postman program and create a new item in the database via the POST method:
* 5) Change the item via the PUT method and the item ID:
* 6) View the data in the database via the GET method:
* 7) Delete the item by the DELETE method and the item ID

# Create a React app with Bootstrap that performs read, create, update, delete operations on a MongoDB database via a Node Express web server

Now we will create the Front end in React-Bootstrap that connects to the Node Express web server and through Rest API acts on the MongoDB database with GET, POST, PUT, DELETE operations on the items in a warehouse:
* 1) In the Documents folder open a terminal and type:
* 2) In the items-app folder open a terminal and type to install the Bootstrap css framework:
* 3) Replace the App.js file with the following:
* 4) Create a Components sub folder in which to insert the following files:
* 5) In the terminal type:
and use the program.