{"id":2674,"date":"2019-10-11T01:49:54","date_gmt":"2019-10-11T01:49:54","guid":{"rendered":"https:\/\/bezkoder.com\/?p=2674"},"modified":"2023-10-16T04:28:37","modified_gmt":"2023-10-16T04:28:37","slug":"react-node-express-postgresql","status":"publish","type":"post","link":"https:\/\/www.bezkoder.com\/react-node-express-postgresql\/","title":{"rendered":"React + Node.js + Express + PostgreSQL example: Build a CRUD App"},"content":{"rendered":"<p>In this tutorial, I will show you how to build full-stack React + Node.js + Express + PostgreSQL example with a CRUD Application. The back-end server uses Node.js + Express for REST APIs, front-end side is a React.js client with React Router, Axios &#038; Bootstrap.<\/p>\n<p>Related Posts:<br \/>\n&#8211; <a href=\"https:\/\/bezkoder.com\/react-express-authentication-jwt\/\">React + Node.js Express: User Authentication with JWT example<\/a><br \/>\n&#8211; <a href=\"https:\/\/bezkoder.com\/react-file-upload-axios\/\">React File Upload with Axios and Progress Bar to Rest API<\/a><\/p>\n<p>Run both projects in one place:<br \/>\n<a href=\"https:\/\/bezkoder.com\/integrate-react-express-same-server-port\/\">How to integrate React with Node.js Express on same Server\/Port<\/a><\/p>\n<p><!--more--><br \/>\n<div id=\"toc_container\" class=\"no_bullets\"><p class=\"toc_title\">Contents<\/p><ul class=\"toc_list\"><li><a href=\"#React_Nodejs_Express_PostgreSQL_example_Overview\">React + Node.js + Express + PostgreSQL example Overview<\/a><\/li><li><a href=\"#React_Nodejs_Express_PostgreSQL_Architecture\">React, Node.js Express, PostgreSQL Architecture<\/a><\/li><li><a href=\"#Video\">Video<\/a><\/li><li><a href=\"#Nodejs_Express_Back-end\">Node.js Express Back-end<\/a><ul><li><a href=\"#Overview\">Overview<\/a><\/li><li><a href=\"#Project_Structure\">Project Structure<\/a><\/li><li><a href=\"#Implementation\">Implementation<\/a><ul><li><a href=\"#Create_Nodejs_App\">Create Node.js App<\/a><\/li><li><a href=\"#Setup_Express_web_server\">Setup Express web server<\/a><\/li><li><a href=\"#Configure_PostgreSQL_database_038_Sequelize\">Configure PostgreSQL database &#038; Sequelize<\/a><\/li><li><a href=\"#Initialize_Sequelize\">Initialize Sequelize<\/a><\/li><li><a href=\"#Define_the_Sequelize_Model\">Define the Sequelize Model<\/a><\/li><li><a href=\"#Create_the_Controller\">Create the Controller<\/a><\/li><li><a href=\"#Run_the_Nodejs_Express_Server\">Run the Node.js Express Server<\/a><\/li><\/ul><\/li><\/ul><\/li><li><a href=\"#Reactjs_Front-end\">React.js Front-end<\/a><ul><li><a href=\"#Overview-2\">Overview<\/a><\/li><li><a href=\"#Technology\">Technology<\/a><\/li><li><a href=\"#Project_Structure-2\">Project Structure<\/a><\/li><li><a href=\"#Implementation-2\">Implementation<\/a><ul><li><a href=\"#Setup_Reactjs_Project\">Setup React.js Project<\/a><\/li><li><a href=\"#Import_Bootstrap_to_React_CRUD_App\">Import Bootstrap to React CRUD App<\/a><\/li><li><a href=\"#Add_React_Router_to_React_CRUD_App\">Add React Router to React CRUD App<\/a><\/li><li><a href=\"#Add_Navbar_to_React_CRUD_App\">Add Navbar to React CRUD App<\/a><\/li><li><a href=\"#Initialize_Axios_for_React_CRUD_HTTP_Client\">Initialize Axios for React CRUD HTTP Client<\/a><\/li><li><a href=\"#Create_Data_Service\">Create Data Service<\/a><\/li><li><a href=\"#Create_React_ComponentsPages\">Create React Components\/Pages<\/a><\/li><li><a href=\"#Run_React_CRUD_App\">Run React CRUD App<\/a><\/li><\/ul><\/li><\/ul><\/li><li><a href=\"#Source_Code\">Source Code<\/a><\/li><li><a href=\"#Conclusion\">Conclusion<\/a><\/li><li><a href=\"#Further_Reading\">Further Reading<\/a><\/li><\/ul><\/div>\n<\/p>\n<h2><span id=\"React_Nodejs_Express_PostgreSQL_example_Overview\">React + Node.js + Express + PostgreSQL example Overview<\/span><\/h2>\n<p>We will build a full-stack Tutorial Application in that:<\/p>\n<ul>\n<li>Tutorial has id, title, description, published status.<\/li>\n<li>User can create, retrieve, update, delete Tutorials.<\/li>\n<li>There is a search box for finding Tutorials by title.<\/li>\n<\/ul>\n<p>Here are screenshots of the example.<\/p>\n<p>&#8211; Add a Tutorial:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-crud-example-create.png\" alt=\"react-node-express-postgresql-crud-example-create\" width=\"480\" height=\"364\" class=\"alignnone size-full wp-image-2675 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-crud-example-create.png\" alt=\"react-node-express-postgresql-crud-example-create\" width=\"480\" height=\"364\" class=\"alignnone size-full wp-image-2675 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-crud-example-create.png 480w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-crud-example-create-300x228.png 300w\" sizes=\"(max-width: 480px) 100vw, 480px\" \/><\/noscript><\/p>\n<p>\u2013 Show all objects:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-crud-example-retrieve.png\" alt=\"react-node-express-postgresql-crud-example-retrieve\" width=\"700\" height=\"512\" class=\"alignnone size-full wp-image-2676 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-crud-example-retrieve.png\" alt=\"react-node-express-postgresql-crud-example-retrieve\" width=\"700\" height=\"512\" class=\"alignnone size-full wp-image-2676 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-crud-example-retrieve.png 700w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-crud-example-retrieve-300x219.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/noscript><\/p>\n<p>\u2013 Click on <strong>Edit<\/strong> button to access an object:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-crud-example-retrieve-one.png\" alt=\"react-node-express-postgresql-crud-example-retrieve-one\" width=\"490\" height=\"432\" class=\"alignnone size-full wp-image-2677 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-crud-example-retrieve-one.png\" alt=\"react-node-express-postgresql-crud-example-retrieve-one\" width=\"490\" height=\"432\" class=\"alignnone size-full wp-image-2677 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-crud-example-retrieve-one.png 490w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-crud-example-retrieve-one-300x264.png 300w\" sizes=\"(max-width: 490px) 100vw, 490px\" \/><\/noscript><\/p>\n<p>On this Page, you can:<\/p>\n<ul>\n<li>change status to <strong>Published<\/strong>\/<strong>Pending<\/strong> using <strong>Publish<\/strong>\/<strong>UnPublished<\/strong> button<\/li>\n<li>remove the object from PostgreSQL Database using <strong>Delete<\/strong> button<\/li>\n<li>update this object&#8217;s details on Database with <strong>Update<\/strong> button<\/li>\n<\/ul>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-crud-example-update.png\" alt=\"react-node-express-postgresql-crud-example-update\" width=\"460\" height=\"446\" class=\"alignnone size-full wp-image-2678 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-crud-example-update.png\" alt=\"react-node-express-postgresql-crud-example-update\" width=\"460\" height=\"446\" class=\"alignnone size-full wp-image-2678 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-crud-example-update.png 460w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-crud-example-update-300x291.png 300w\" sizes=\"(max-width: 460px) 100vw, 460px\" \/><\/noscript><\/p>\n<p>&#8211; Search objects by field &#8216;title&#8217;:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-crud-example-search.png\" alt=\"react-node-express-postgresql-crud-example-search\" width=\"700\" height=\"420\" class=\"alignnone size-full wp-image-2679 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-crud-example-search.png\" alt=\"react-node-express-postgresql-crud-example-search\" width=\"700\" height=\"420\" class=\"alignnone size-full wp-image-2679 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-crud-example-search.png 700w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-crud-example-search-300x180.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/noscript><\/p>\n<p>&#8211; Check PostgreSQL database:<\/p>\n<pre><code class=\"language-bash\">testdb=# select * from tutorials;\r\n id |               title                |          description          | published |         createdAt          |         updatedAt\r\n----+------------------------------------+-------------------------------+-----------+----------------------------+----------------------------\r\n  5 | PostgreSQL Tut#1                   | Tut#1 Description             | f         | 2020-03-11 09:14:01.773+07 | 2020-03-11 09:14:01.773+07\r\n  6 | React.js Tut#2                     | Tut#2 Description             | f         | 2020-03-11 09:15:05.629+07 | 2020-03-11 09:15:05.629+07\r\n  8 | React Hooks Tut#4                  | Tut#4 Description             | f         | 2020-03-11 09:24:33.295+07 | 2020-03-11 09:24:33.295+07\r\n  9 | React Express PostgreSQL Tut#5     | Tut#5 Description             | f         | 2020-03-11 09:24:53.463+07 | 2020-03-11 09:24:53.463+07\r\n  7 | Node. Express PostgreSQL (updated) | This is Description for Tut#3 | t         | 2020-03-11 09:22:53.635+07 | 2020-03-11 09:28:45.568+07\r\n(5 rows)\r\n<\/code><\/pre>\n<h2><span id=\"React_Nodejs_Express_PostgreSQL_Architecture\">React, Node.js Express, PostgreSQL Architecture<\/span><\/h2>\n<p>This is architecture of our system:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-crud-example-architecture.png\" alt=\"react-node-express-postgresql-crud-example-architecture\" width=\"700\" height=\"252\" class=\"alignnone size-full wp-image-2680 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-crud-example-architecture.png\" alt=\"react-node-express-postgresql-crud-example-architecture\" width=\"700\" height=\"252\" class=\"alignnone size-full wp-image-2680 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-crud-example-architecture.png 700w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-crud-example-architecture-300x108.png 300w\" sizes=\"(max-width: 700px) 100vw, 700px\" \/><\/noscript><\/p>\n<p>&#8211; Node.js Express exports REST APIs &#038; interacts with PostgreSQL Database using Sequelize ORM.<br \/>\n&#8211; React Client sends HTTP Requests and retrieves HTTP Responses using <em>Axios<\/em>, consume data on the components. React Router is used for navigating to pages.<\/p>\n<h2><span id=\"Video\">Video<\/span><\/h2>\n<p>This is our React Node.js PostgreSQL CRUD application with Express &#038; Sequelize demo:<\/p>\n<p><iframe class=\"lazyload\" width=\"560\" height=\"315\" data-src=\"https:\/\/www.youtube.com\/embed\/qrVu03v87uQ?rel=0\" frameborder=\"0\" allow=\"accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture\" allowfullscreen><\/iframe><\/p>\n<h2><span id=\"Nodejs_Express_Back-end\">Node.js Express Back-end<\/span><\/h2>\n<h3><span id=\"Overview\">Overview<\/span><\/h3>\n<p>These are APIs that Node.js Express App will export:<\/p>\n<div class=\"table-responsive\">\n<table  class=\"table table-hover  table table-hover table table-hover\"  width=\"100%\">\n<thead>\n<tr>\n<th>Methods<\/th>\n<th>Urls<\/th>\n<th>Actions<\/th>\n<\/tr>\n<\/thead>\n<tbody>\n<tr>\n<td>GET<\/td>\n<td>api\/tutorials<\/td>\n<td>get all Tutorials<\/td>\n<\/tr>\n<tr>\n<td>GET<\/td>\n<td>api\/tutorials\/:id<\/td>\n<td>get Tutorial by <code>id<\/code><\/td>\n<\/tr>\n<tr>\n<td>POST<\/td>\n<td>api\/tutorials<\/td>\n<td>add new Tutorial<\/td>\n<\/tr>\n<tr>\n<td>PUT<\/td>\n<td>api\/tutorials\/:id<\/td>\n<td>update Tutorial by <code>id<\/code><\/td>\n<\/tr>\n<tr>\n<td>DELETE<\/td>\n<td>api\/tutorials\/:id<\/td>\n<td>remove Tutorial by <code>id<\/code><\/td>\n<\/tr>\n<tr>\n<td>DELETE<\/td>\n<td>api\/tutorials<\/td>\n<td>remove all Tutorials<\/td>\n<\/tr>\n<tr>\n<td>GET<\/td>\n<td>api\/tutorials?title=[kw]<\/td>\n<td>find all Tutorials which title contains <code>'kw'<\/code><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n<h3><span id=\"Project_Structure\">Project Structure<\/span><\/h3>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-example-server-project-structure.png\" alt=\"react-node-express-postgresql-example-server-project-structure\" width=\"250\" height=\"344\" class=\"alignnone size-full wp-image-2681 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-example-server-project-structure.png\" alt=\"react-node-express-postgresql-example-server-project-structure\" width=\"250\" height=\"344\" class=\"alignnone size-full wp-image-2681 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-example-server-project-structure.png 250w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-example-server-project-structure-218x300.png 218w\" sizes=\"(max-width: 250px) 100vw, 250px\" \/><\/noscript><\/p>\n<p>&#8211; <em>db.config.js<\/em> exports configuring parameters for PostgreSQL connection &#038; Sequelize.<br \/>\n&#8211; <strong>Express<\/strong> web server in <em>server.js<\/em> where we configure CORS, initialize &#038; run Express REST APIs.<br \/>\n&#8211; Next, we add configuration for PostgreSQL database in <strong>models<\/strong>\/<em>index.js<\/em>, create <strong>Sequelize<\/strong> data model in <strong>models<\/strong>\/<em>tutorial.model.js<\/em>.<br \/>\n&#8211; Tutorial controller in <strong>controllers<\/strong>.<br \/>\n&#8211; Routes for handling all CRUD operations (including custom finder) in <em>tutorial.routes.js<\/em>.<\/p>\n<h3><span id=\"Implementation\">Implementation<\/span><\/h3>\n<h4><span id=\"Create_Nodejs_App\">Create Node.js App<\/span><\/h4>\n<p>First, we create a folder:<\/p>\n<pre><code>$ mkdir nodejs-express-sequelize-postgresql\r\n$ cd nodejs-express-sequelize-postgresql\r\n<\/code><\/pre>\n<p>Next, we initialize the Node.js App with a <em>package.json<\/em> file:<\/p>\n<pre><code>npm init\r\n\r\nname: (nodejs-express-sequelize-postgresql) \r\nversion: (1.0.0) \r\ndescription: Node.js Rest Apis with Express, Sequelize & PostgreSQL.\r\nentry point: (index.js) server.js\r\ntest command: \r\ngit repository: \r\nkeywords: nodejs, express, sequelize, postgresql, rest, api\r\nauthor: bezkoder\r\nlicense: (ISC)\r\n\r\nIs this ok? (yes) yes\r\n<\/code><\/pre>\n<p>We need to install necessary modules: <code>express<\/code>, <code>sequelize<\/code>, <code>pg<\/code>, <code>pg-hstore<\/code> and <code>body-parser<\/code>.<br \/>\nRun the command:<\/p>\n<pre><code>npm install express sequelize pg pg-hstore body-parser cors --save\r\n<\/code><\/pre>\n<p>*<code>pg<\/code> for PostgreSQL and <code>pg-hstore<\/code> for converting data into the PostgreSQL hstore format.<\/p>\n<h4><span id=\"Setup_Express_web_server\">Setup Express web server<\/span><\/h4>\n<p>In the root folder, let&#8217;s create a new <em>server.js<\/em> file:<\/p>\n<pre><code class=\"language-js\">const express = require(\"express\");\r\nconst bodyParser = require(\"body-parser\");\r\nconst cors = require(\"cors\");\r\n\r\nconst app = express();\r\n\r\nvar corsOptions = {\r\n  origin: \"http:\/\/localhost:8081\"\r\n};\r\n\r\napp.use(cors(corsOptions));\r\n\r\n\/\/ parse requests of content-type - application\/json\r\napp.use(bodyParser.json());\r\n\r\n\/\/ parse requests of content-type - application\/x-www-form-urlencoded\r\napp.use(bodyParser.urlencoded({ extended: true }));\r\n\r\n\/\/ simple route\r\napp.get(\"\/\", (req, res) => {\r\n  res.json({ message: \"Welcome to bezkoder application.\" });\r\n});\r\n\r\n\/\/ set port, listen for requests\r\nconst PORT = process.env.PORT || 8080;\r\napp.listen(PORT, () => {\r\n  console.log(`Server is running on port ${PORT}.`);\r\n});\r\n<\/code><\/pre>\n<p>What we do are:<br \/>\n&#8211; import <code>express<\/code>, <code>body-parser<\/code> and <code>cors<\/code> modules:<\/p>\n<ul>\n<li>Express is for building the Rest apis<\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/body-parser\">body-parser<\/a> helps to parse the request and create the <code>req.body<\/code> object<\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/cors\">cors<\/a> provides Express middleware to enable CORS with various options.<\/li>\n<\/ul>\n<p>&#8211; create an Express app, then add <code>body-parser<\/code> and <code>cors<\/code> middlewares using <code>app.use()<\/code> method. Notice that we set origin: <code>http:\/\/localhost:8081<\/code>.<br \/>\n&#8211; define a GET route which is simple for test.<br \/>\n&#8211; listen on port 8080 for incoming requests.<\/p>\n<p>Now let&#8217;s run the app with command: <code>node server.js<\/code>.<br \/>\nOpen your browser with url <a href=\"http:\/\/localhost:8080\/\">http:\/\/localhost:8080\/<\/a>, you will see:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/01\/node-js-express-sequelize-postgresql-example-setup-server.png\" alt=\"node-js-express-sequelize-postgresql-example-setup-server\" width=\"394\" height=\"144\" class=\"alignnone size-full wp-image-2143 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/01\/node-js-express-sequelize-postgresql-example-setup-server.png\" alt=\"node-js-express-sequelize-postgresql-example-setup-server\" width=\"394\" height=\"144\" class=\"alignnone size-full wp-image-2143 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/01\/node-js-express-sequelize-postgresql-example-setup-server.png 394w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/01\/node-js-express-sequelize-postgresql-example-setup-server-300x110.png 300w\" sizes=\"(max-width: 394px) 100vw, 394px\" \/><\/noscript><\/p>\n<p>Yeah, the first step is done. We&#8217;re gonna work with Sequelize in the next section.<\/p>\n<h4><span id=\"Configure_PostgreSQL_database_038_Sequelize\">Configure PostgreSQL database &#038; Sequelize<\/span><\/h4>\n<p>In the <em>app<\/em> folder, we create a separate <em>config<\/em> folder for configuration with <em>db.config.js<\/em> file like this:<\/p>\n<pre><code class=\"language-js\">module.exports = {\r\n  HOST: \"localhost\",\r\n  USER: \"postgres\",\r\n  PASSWORD: \"123\",\r\n  DB: \"testdb\",\r\n  dialect: \"postgres\",\r\n  pool: {\r\n    max: 5,\r\n    min: 0,\r\n    acquire: 30000,\r\n    idle: 10000\r\n  }\r\n};\r\n<\/code><\/pre>\n<p>First five parameters are for PostgreSQL connection.<br \/>\n<code>pool<\/code> is optional, it will be used for Sequelize connection pool configuration:<\/p>\n<ul>\n<li><code>max<\/code>: maximum number of connection in pool<\/li>\n<li><code>min<\/code>: minimum number of connection in pool<\/li>\n<li><code>idle<\/code>: maximum time, in milliseconds, that a connection can be idle before being released<\/li>\n<li><code>acquire<\/code>: maximum time, in milliseconds, that pool will try to get connection before throwing error<\/li>\n<\/ul>\n<p>For more details, please visit <a href=\"https:\/\/sequelize.org\/master\/class\/lib\/sequelize.js~Sequelize.html#instance-constructor-constructor\">API Reference for the Sequelize constructor<\/a>.<\/p>\n<h4><span id=\"Initialize_Sequelize\">Initialize Sequelize<\/span><\/h4>\n<p>We&#8217;re gonna initialize Sequelize in <strong>app<\/strong>\/<strong>models<\/strong> folder that will contain model in the next step.<\/p>\n<p>Now create <strong>app<\/strong>\/<strong>models<\/strong>\/<em>index.js<\/em> with the following code:<\/p>\n<pre><code class=\"language-js\">const dbConfig = require(\"..\/config\/db.config.js\");\r\n\r\nconst Sequelize = require(\"sequelize\");\r\nconst sequelize = new Sequelize(dbConfig.DB, dbConfig.USER, dbConfig.PASSWORD, {\r\n  host: dbConfig.HOST,\r\n  dialect: dbConfig.dialect,\r\n  operatorsAliases: false,\r\n\r\n  pool: {\r\n    max: dbConfig.pool.max,\r\n    min: dbConfig.pool.min,\r\n    acquire: dbConfig.pool.acquire,\r\n    idle: dbConfig.pool.idle\r\n  }\r\n});\r\n\r\nconst db = {};\r\n\r\ndb.Sequelize = Sequelize;\r\ndb.sequelize = sequelize;\r\n\r\ndb.tutorials = require(\".\/tutorial.model.js\")(sequelize, Sequelize);\r\n\r\nmodule.exports = db;\r\n<\/code><\/pre>\n<p>Don&#8217;t forget to call <code>sync()<\/code> method in <em>server.js<\/em>:<\/p>\n<pre><code class=\"language-js\">...\r\nconst app = express();\r\napp.use(...);\r\n\r\nconst db = require(\".\/app\/models\");\r\ndb.sequelize.sync();\r\n\r\n...\r\n<\/code><\/pre>\n<p>In development, you may need to drop existing tables and re-sync database. Just use <code>force: true<\/code> as following code:<\/p>\n<pre><code class=\"language-js\">\r\ndb.sequelize.sync({ force: true }).then(() => {\r\n  console.log(\"Drop and re-sync db.\");\r\n});\r\n<\/code><\/pre>\n<h4><span id=\"Define_the_Sequelize_Model\">Define the Sequelize Model<\/span><\/h4>\n<p>In <em>models<\/em> folder, create <em>tutorial.model.js<\/em> file like this:<\/p>\n<pre><code class=\"language-js\">module.exports = (sequelize, Sequelize) => {\r\n  const Tutorial = sequelize.define(\"tutorial\", {\r\n    title: {\r\n      type: Sequelize.STRING\r\n    },\r\n    description: {\r\n      type: Sequelize.STRING\r\n    },\r\n    published: {\r\n      type: Sequelize.BOOLEAN\r\n    }\r\n  });\r\n\r\n  return Tutorial;\r\n};\r\n<\/code><\/pre>\n<p>This Sequelize Model represents <strong>tutorials<\/strong> table in PostgreSQL database. These columns will be generated automatically: <em>id<\/em>, <em>title<\/em>, <em>description<\/em>, <em>published<\/em>, <em>createdAt<\/em>, <em>updatedAt<\/em>.<\/p>\n<p>After initializing Sequelize, we don&#8217;t need to write CRUD functions, Sequelize supports all of them:<\/p>\n<ul>\n<li>create a new Tutorial: <code><a href=\"https:\/\/sequelize.org\/master\/class\/lib\/model.js~Model.html#static-method-create\">create<\/a>(object)<\/code><\/li>\n<li>find a Tutorial by id: <code><a href=\"https:\/\/sequelize.org\/master\/class\/lib\/model.js~Model.html#static-method-findByPk\">findByPk<\/a>(id)<\/code><\/li>\n<li>get all Tutorials: <code><a href=\"https:\/\/sequelize.org\/master\/class\/lib\/model.js~Model.html#static-method-findAll\">findAll<\/a>()<\/code><\/li>\n<li>update a Tutorial by id: <code><a href=\"https:\/\/sequelize.org\/master\/class\/lib\/model.js~Model.html#static-method-update\">update<\/a>(data, where: { id: id })<\/code><\/li>\n<li>remove a Tutorial: <code><a href=\"https:\/\/sequelize.org\/master\/class\/lib\/model.js~Model.html#static-method-destroy\">destroy<\/a>(where: { id: id })<\/code><\/li>\n<li>remove all Tutorials: <code>destroy(where: {})<\/code><\/li>\n<li>find all Tutorials by title: <code>findAll({ where: { title: ... } })<\/code><\/li>\n<\/ul>\n<p>These functions will be used in our Controller.<\/p>\n<p>We can improve the example by adding Comments for each Tutorial. It is the One-to-Many Relationship and I write a tutorial for this at:<br \/>\n<a href=\"https:\/\/bezkoder.com\/sequelize-associate-one-to-many\/\">Node.js Sequelize Associations: One-to-Many example<\/a><\/p>\n<p>Or you can add Tags for each Tutorial and add Tutorials to Tag (Many-to-Many Relationship):<br \/>\n<a href=\"https:\/\/bezkoder.com\/sequelize-associate-many-to-many\/\">Node.js Sequelize Associations: Many-to-Many example<\/a><\/p>\n<h4><span id=\"Create_the_Controller\">Create the Controller<\/span><\/h4>\n<p>Inside <strong>app<\/strong>\/<strong>controllers<\/strong> folder, let&#8217;s create <em>tutorial.controller.js<\/em> with these CRUD functions:<\/p>\n<ul>\n<li>create<\/li>\n<li>findAll<\/li>\n<li>findOne<\/li>\n<li>update<\/li>\n<li>delete<\/li>\n<li>deleteAll<\/li>\n<li>findAllPublished<\/li>\n<\/ul>\n<pre><code class=\"language-js\">const db = require(\"..\/models\");\r\nconst Tutorial = db.tutorials;\r\nconst Op = db.Sequelize.Op;\r\n\r\n\/\/ Create and Save a new Tutorial\r\nexports.create = (req, res) => {\r\n  \r\n};\r\n\r\n\/\/ Retrieve all Tutorials from the database.\r\nexports.findAll = (req, res) => {\r\n  \r\n};\r\n\r\n\/\/ Find a single Tutorial with an id\r\nexports.findOne = (req, res) => {\r\n  \r\n};\r\n\r\n\/\/ Update a Tutorial by the id in the request\r\nexports.update = (req, res) => {\r\n  \r\n};\r\n\r\n\/\/ Delete a Tutorial with the specified id in the request\r\nexports.delete = (req, res) => {\r\n  \r\n};\r\n\r\n\/\/ Delete all Tutorials from the database.\r\nexports.deleteAll = (req, res) => {\r\n  \r\n};\r\n\r\n\/\/ Find all published Tutorials\r\nexports.findAllPublished = (req, res) => {\r\n  \r\n};\r\n<\/code><\/pre>\n<p>You can continue with step by step to implement this Node.js Express App in the post:<br \/>\n<a href=\"https:\/\/bezkoder.com\/node-express-sequelize-postgresql\/\">Node.js Express &#038; PostgreSQL: CRUD Rest APIs example with Sequelize<\/a><\/p>\n<h4><span id=\"Run_the_Nodejs_Express_Server\">Run the Node.js Express Server<\/span><\/h4>\n<p>Run our Node.js application with command: <code>node server.js<\/code>.<\/p>\n<h2><span id=\"Reactjs_Front-end\">React.js Front-end<\/span><\/h2>\n<h3><span id=\"Overview-2\">Overview<\/span><\/h3>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-example-react-components-overview.png\" alt=\"react-node-express-postgresql-example-react-components-overview\" width=\"680\" height=\"210\" class=\"alignnone size-full wp-image-2683 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-example-react-components-overview.png\" alt=\"react-node-express-postgresql-example-react-components-overview\" width=\"680\" height=\"210\" class=\"alignnone size-full wp-image-2683 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-example-react-components-overview.png 680w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-example-react-components-overview-300x93.png 300w\" sizes=\"(max-width: 680px) 100vw, 680px\" \/><\/noscript><\/p>\n<p>\u2013 The <code>App<\/code> component is a container with React <code>Router<\/code>. It has <code>navbar<\/code> that links to routes paths.<\/p>\n<p>\u2013 <code>TutorialsList<\/code> component gets and displays Tutorials.<br \/>\n\u2013 <code>Tutorial<\/code> component has form for editing Tutorial&#8217;s details based on <code>:id<\/code>.<br \/>\n\u2013 <code>AddTutorial<\/code> component has form for submission new Tutorial.<\/p>\n<p>\u2013 These Components call <code>TutorialDataService<\/code> methods which use <code>axios<\/code> to make HTTP requests and receive responses.<\/p>\n<p>Or you can use React with Redux:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/11\/react-redux-crud-example-rest-api-axios-app-components.png\" alt=\"react-redux-crud-example-rest-api-axios-app-components\" width=\"690\" height=\"360\" class=\"alignnone size-full wp-image-6884 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/11\/react-redux-crud-example-rest-api-axios-app-components.png\" alt=\"react-redux-crud-example-rest-api-axios-app-components\" width=\"690\" height=\"360\" class=\"alignnone size-full wp-image-6884 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/11\/react-redux-crud-example-rest-api-axios-app-components.png 690w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/11\/react-redux-crud-example-rest-api-axios-app-components-300x157.png 300w\" sizes=\"(max-width: 690px) 100vw, 690px\" \/><\/noscript><\/p>\n<p>More details at: <a href=\"https:\/\/bezkoder.com\/react-redux-crud-example\/\">React Redux CRUD App example with Rest API<\/a><\/p>\n<h3><span id=\"Technology\">Technology<\/span><\/h3>\n<ul>\n<li>React 18\/17<\/li>\n<li>react-router-dom 6<\/li>\n<li>axios 0.27.2<\/li>\n<li>bootstrap 4<\/li>\n<\/ul>\n<h3><span id=\"Project_Structure-2\">Project Structure<\/span><\/h3>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-example-client-project-structure.png\" alt=\"react-node-express-postgresql-example-client-project-structure\" width=\"250\" height=\"412\" class=\"alignnone size-full wp-image-2682 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-example-client-project-structure.png\" alt=\"react-node-express-postgresql-example-client-project-structure\" width=\"250\" height=\"412\" class=\"alignnone size-full wp-image-2682 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-example-client-project-structure.png 250w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-example-client-project-structure-182x300.png 182w\" sizes=\"(max-width: 250px) 100vw, 250px\" \/><\/noscript><\/p>\n<p>&#8211; <strong>package.json<\/strong> contains 4 main modules: <code>react<\/code>, <code>react-router-dom<\/code>, <code>axios<\/code> &#038; <code>bootstrap<\/code>.<br \/>\n&#8211; <code>App<\/code> is the container that has <code>Router<\/code> &#038; navbar.<br \/>\n&#8211; There are 3 components: <code>TutorialsList<\/code>, <code>Tutorial<\/code>, <code>AddTutorial<\/code>.<br \/>\n&#8211; <strong>http-common.js<\/strong> initializes axios with HTTP base Url and headers.<br \/>\n&#8211; <code>TutorialDataService<\/code> has methods for sending HTTP requests to the Apis.<br \/>\n&#8211; <strong>.env<\/strong> configures <em>port<\/em> for this React CRUD App.<\/p>\n<p>For Typescript version:<\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2021\/07\/react-typescript-project-axios-crud-project-structure.png\" alt=\"\" width=\"314\" height=\"560\" class=\"alignnone size-full wp-image-8485 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2021\/07\/react-typescript-project-axios-crud-project-structure.png\" alt=\"\" width=\"314\" height=\"560\" class=\"alignnone size-full wp-image-8485 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2021\/07\/react-typescript-project-axios-crud-project-structure.png 314w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2021\/07\/react-typescript-project-axios-crud-project-structure-168x300.png 168w\" sizes=\"(max-width: 314px) 100vw, 314px\" \/><\/noscript><\/p>\n<p>Please visit:<br \/>\n<a href=\"https:\/\/bezkoder.com\/react-typescript-axios\/\">React Typescript CRUD example with Web API<\/a><\/p>\n<h3><span id=\"Implementation-2\">Implementation<\/span><\/h3>\n<h4><span id=\"Setup_Reactjs_Project\">Setup React.js Project<\/span><\/h4>\n<p>Open cmd at the folder you want to save Project folder, run command:<br \/>\n<code>npx create-react-app react-crud<\/code><\/p>\n<p>After the process is done. We create additional folders and files like the following tree:<\/p>\n<hr\/>\n<p style=\"padding-left: 10px;\"><i class=\"fa fa-folder\"><\/i> public<\/p>\n<p style=\"padding-left: 10px;\"><i class=\"fa fa-folder\"><\/i> src<\/p>\n<p style=\"padding-left: 30px;\"><i class=\"fa fa-folder\"><\/i> components<\/p>\n<p style=\"padding-left: 50px;\"><i class=\"far fa-file\"><\/i> add-tutorial.component.js<\/p>\n<p style=\"padding-left: 50px;\"><i class=\"far fa-file\"><\/i> tutorial.component.js<\/p>\n<p style=\"padding-left: 50px;\"><i class=\"far fa-file\"><\/i> tutorials-list.component.js<\/p>\n<p style=\"padding-left: 30px;\"><i class=\"fa fa-folder\"><\/i> services<\/p>\n<p style=\"padding-left: 50px;\"><i class=\"far fa-file\"><\/i> tutorial.service.js<\/p>\n<p style=\"padding-left: 30px;\"><i class=\"far fa-file\"><\/i> App.css<\/p>\n<p style=\"padding-left: 30px;\"><i class=\"far fa-file\"><\/i> App.js<\/p>\n<p style=\"padding-left: 30px;\"><i class=\"far fa-file\"><\/i> index.js<\/p>\n<p style=\"padding-left: 10px;\"><i class=\"far fa-file\"><\/i> package.json<\/p>\n<hr\/>\n<h4><span id=\"Import_Bootstrap_to_React_CRUD_App\">Import Bootstrap to React CRUD App<\/span><\/h4>\n<p>Run command: <code>npm install bootstrap<\/code>.<\/p>\n<p>Open <strong>src<\/strong>\/<em>App.js<\/em> and modify the code inside it as following-<\/p>\n<pre><code class=\"language-js\">import React, { Component } from \"react\";\r\nimport \"bootstrap\/dist\/css\/bootstrap.min.css\";\r\n\r\nclass App extends Component {\r\n  render() {\r\n    \/\/ ...\r\n  }\r\n}\r\n\r\nexport default App;\r\n<\/code><\/pre>\n<h4><span id=\"Add_React_Router_to_React_CRUD_App\">Add React Router to React CRUD App<\/span><\/h4>\n<p>&#8211; Run the command: <code>npm install react-router-dom<\/code>.<br \/>\n&#8211; Open <strong>src<\/strong>\/<em>index.js<\/em> and wrap <code>App<\/code> component by <code>BrowserRouter<\/code> object.<\/p>\n<pre><code class=\"language-markup\">import React from \"react\";\r\nimport { createRoot } from \"react-dom\/client\";\r\nimport { BrowserRouter } from \"react-router-dom\";\r\n\r\nimport App from \".\/App\";\r\n\r\nconst container = document.getElementById(\"root\");\r\nconst root = createRoot(container);\r\n\r\nroot.render(\r\n  &lt;BrowserRouter>\r\n    &lt;App \/>\r\n  &lt;\/BrowserRouter>\r\n);\r\n<\/code><\/pre>\n<h4><span id=\"Add_Navbar_to_React_CRUD_App\">Add Navbar to React CRUD App<\/span><\/h4>\n<p>Open <strong>src<\/strong>\/<em>App.js<\/em>, this <code>App<\/code> component is the root container for our application, it will contain a <code>navbar<\/code>, and also, a <code>Routes<\/code> object with several <code>Route<\/code>. Each <code>Route<\/code> points to a React Component.<\/p>\n<pre><code class=\"language-jsx\">import React, { Component } from \"react\";\r\n...\r\n\r\nclass App extends Component {\r\n  render() {\r\n    return (\r\n      &lt;div>\r\n        &lt;nav className=\"navbar navbar-expand navbar-dark bg-dark\">\r\n          &lt;a href=\"\/tutorials\" className=\"navbar-brand\">\r\n            bezKoder\r\n          &lt;\/a>\r\n          &lt;div className=\"navbar-nav mr-auto\">\r\n            &lt;li className=\"nav-item\">\r\n              &lt;Link to={\"\/tutorials\"} className=\"nav-link\">\r\n                Tutorials\r\n              &lt;\/Link>\r\n            &lt;\/li>\r\n            &lt;li className=\"nav-item\">\r\n              &lt;Link to={\"\/add\"} className=\"nav-link\">\r\n                Add\r\n              &lt;\/Link>\r\n            &lt;\/li>\r\n          &lt;\/div>\r\n        &lt;\/nav>\r\n\r\n        &lt;div className=\"container mt-3\">\r\n          &lt;Routes>\r\n            &lt;Route path=\"\/\" element={&lt;TutorialsList\/>} \/>\r\n            &lt;Route path=\"\/tutorials\" element={&lt;TutorialsList\/>} \/>\r\n            &lt;Route path=\"\/add\" element={&lt;AddTutorial\/>} \/>\r\n            &lt;Route path=\"\/tutorials\/:id\" element={&lt;Tutorial\/>} \/>\r\n          &lt;\/Routes>\r\n        &lt;\/div>\r\n      &lt;\/div>\r\n    );\r\n  }\r\n}\r\n\r\nexport default App;\r\n<\/code><\/pre>\n<h4><span id=\"Initialize_Axios_for_React_CRUD_HTTP_Client\">Initialize Axios for React CRUD HTTP Client<\/span><\/h4>\n<p>Let&#8217;s install <em>axios<\/em> with command: <code>npm install axios<\/code>.<br \/>\nUnder <strong>src<\/strong> folder, we create <em>http-common.js<\/em> file with following code:<\/p>\n<pre><code class=\"language-js\">import axios from \"axios\";\r\n\r\nexport default axios.create({\r\n  baseURL: \"http:\/\/localhost:8080\/api\",\r\n  headers: {\r\n    \"Content-type\": \"application\/json\"\r\n  }\r\n});\r\n<\/code><\/pre>\n<p>You can change the <code>baseURL<\/code> that depends on REST APIs url that your Server configures.<\/p>\n<h4><span id=\"Create_Data_Service\">Create Data Service<\/span><\/h4>\n<p>In this step, we&#8217;re gonna create a service that uses axios object above to send HTTP requests.<\/p>\n<p><strong>services<\/strong>\/<em>tutorial.service.js<\/em><\/p>\n<pre><code class=\"language-js\">import http from \"..\/http-common\";\r\n\r\nclass TutorialDataService {\r\n  getAll() {\r\n    return http.get(\"\/tutorials\");\r\n  }\r\n\r\n  get(id) {\r\n    return http.get(`\/tutorials\/${id}`);\r\n  }\r\n\r\n  create(data) {\r\n    return http.post(\"\/tutorials\", data);\r\n  }\r\n\r\n  update(id, data) {\r\n    return http.put(`\/tutorials\/${id}`, data);\r\n  }\r\n\r\n  delete(id) {\r\n    return http.delete(`\/tutorials\/${id}`);\r\n  }\r\n\r\n  deleteAll() {\r\n    return http.delete(`\/tutorials`);\r\n  }\r\n\r\n  findByTitle(title) {\r\n    return http.get(`\/tutorials?title=${title}`);\r\n  }\r\n}\r\n\r\nexport default new TutorialDataService();\r\n<\/code><\/pre>\n<p>We call axios <code>get<\/code>, <code>post<\/code>, <code>put<\/code>, <code>delete<\/code> method corresponding to HTTP Requests: GET, POST, PUT, DELETE to make CRUD Operations.<\/p>\n<h4><span id=\"Create_React_ComponentsPages\">Create React Components\/Pages<\/span><\/h4>\n<p>Now we&#8217;re gonna build 3 components corresponding to 3 Routes defined before.<\/p>\n<ul>\n<li>Add new Item<\/li>\n<li>List of items<\/li>\n<li>Item details<\/li>\n<\/ul>\n<p>You can continue with step by step to implement this React App in the post:<br \/>\n&#8211; <a href=\"https:\/\/bezkoder.com\/react-crud-web-api\/\">React.js CRUD example to consume Web API<\/a><br \/>\n&#8211; or <a href=\"https:\/\/bezkoder.com\/react-hooks-crud-axios-api\/\">React Hooks CRUD example to consume Web API<\/a><\/p>\n<p>Using React with Redux:<br \/>\n&#8211; <a href=\"https:\/\/bezkoder.com\/react-redux-crud-example\/\">React Redux CRUD example with Rest API<\/a><br \/>\n&#8211; <a href=\"https:\/\/bezkoder.com\/react-hooks-redux-crud\/\">React Hooks + Redux: CRUD example with Rest API<\/a><\/p>\n<p>For Typescript version:<br \/>\n<a href=\"https:\/\/bezkoder.com\/react-typescript-axios\/\">React Typescript CRUD example to consume Web API<\/a><\/p>\n<h4><span id=\"Run_React_CRUD_App\">Run React CRUD App<\/span><\/h4>\n<p>You can run our App with command: <code>npm start<\/code>.<br \/>\nIf the process is successful, open Browser with Url: <code>http:\/\/localhost:8081\/<\/code> and check it.<\/p>\n<h2><span id=\"Source_Code\">Source Code<\/span><\/h2>\n<p>You can find Github source code for this tutorial at: <a href=\"https:\/\/www.githubcode.com\/react-node-app-github\/\">React + Node App Github<\/a><\/p>\n<h2><span id=\"Conclusion\">Conclusion<\/span><\/h2>\n<p>Today we have an overview of React.js + Node.js Express + PostgreSQL example when building a full-stack CRUD App.<\/p>\n<p>We also take a look at client-server architecture for REST API using Express &#038; Sequelize ORM, as well as React.js project structure for building a front-end app to make HTTP requests and consume responses.<\/p>\n<p>Next tutorials show you more details about how to implement the system (including source code):<br \/>\n&#8211; <a href=\"https:\/\/bezkoder.com\/node-express-sequelize-postgresql\/\">Back-end<\/a><br \/>\n&#8211; Front-end:<\/p>\n<ul>\n<li><a href=\"https:\/\/bezkoder.com\/react-crud-web-api\/\">Using React Components<\/a><\/li>\n<li><a href=\"https:\/\/bezkoder.com\/react-typescript-axios\/\">Using React Typescript Components<\/a><\/li>\n<li><a href=\"https:\/\/bezkoder.com\/react-redux-crud-example\/\">Using React Redux<\/a><\/li>\n<li><a href=\"https:\/\/bezkoder.com\/react-hooks-crud-axios-api\/\">Using React Hooks<\/a><\/li>\n<li><a href=\"https:\/\/bezkoder.com\/react-hooks-redux-crud\/\">Using React Hooks + Redux<\/a><\/li>\n<li><a href=\"https:\/\/bezkoder.com\/react-material-ui-examples-crud\/\">Using React with Material UI<\/a><\/li>\n<\/ul>\n<p>You will want to know how to run both projects in one place:<br \/>\n<a href=\"https:\/\/bezkoder.com\/integrate-react-express-same-server-port\/\">How to integrate React with Node.js Express on same Server\/Port<\/a><\/p>\n<p>With Pagination:<br \/>\n<a href=\"https:\/\/bezkoder.com\/react-pagination-material-ui\/\">React Pagination with API using Material-UI<\/a><\/p>\n<p><img decoding=\"async\" src=\"data:image\/gif;base64,R0lGODlhAQABAIAAAAAAAP\/\/\/yH5BAEAAAAALAAAAAABAAEAAAIBRAA7\" data-src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/06\/react-pagination-with-api-material-ui-change-page.png\" alt=\"react-pagination-with-api-material-ui-change-page\" width=\"750\" height=\"460\" class=\"alignnone size-full wp-image-3658 lazyload\" \/><noscript><img decoding=\"async\" src=\"https:\/\/bezkoder.com\/wp-content\/uploads\/2020\/06\/react-pagination-with-api-material-ui-change-page.png\" alt=\"react-pagination-with-api-material-ui-change-page\" width=\"750\" height=\"460\" class=\"alignnone size-full wp-image-3658 lazyload\" srcset=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/06\/react-pagination-with-api-material-ui-change-page.png 750w, https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/06\/react-pagination-with-api-material-ui-change-page-300x184.png 300w\" sizes=\"(max-width: 750px) 100vw, 750px\" \/><\/noscript><\/p>\n<p>Or Serverless with Firebase:<br \/>\n&#8211; <a href=\"https:\/\/bezkoder.com\/react-firebase-crud\/\">React Firebase CRUD with Realtime Database<\/a><br \/>\n&#8211; <a href=\"https:\/\/bezkoder.com\/react-firestore-crud\/\">React Firestore CRUD App example | Firebase Cloud Firestore<\/a><\/p>\n<p>Happy learning, see you again!<\/p>\n<h2><span id=\"Further_Reading\">Further Reading<\/span><\/h2>\n<ul>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/express\">https:\/\/www.npmjs.com\/package\/express<\/a><\/li>\n<li><a href=\"https:\/\/github.com\/sequelize\/sequelize\">https:\/\/github.com\/sequelize\/sequelize<\/a><\/li>\n<li><a href=\"https:\/\/www.npmjs.com\/package\/pg\">https:\/\/www.npmjs.com\/package\/pg<\/a><\/li>\n<li><a href=\"https:\/\/reactjs.org\/docs\/react-component.html\">React Component<\/a><\/li>\n<\/ul>\n","protected":false},"excerpt":{"rendered":"<p>In this tutorial, I will show you how to build full-stack React + Node.js + Express + PostgreSQL example with a CRUD Application. The back-end server uses Node.js + Express for REST APIs, front-end side is a React.js client with React Router, Axios &#038; Bootstrap. Related Posts: &#8211; React + Node.js Express: User Authentication with [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":2685,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[49,27,134],"tags":[82,38,28,37,135,136,39],"class_list":["post-2674","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-full-stack","category-node-js","category-react","tag-crud","tag-express","tag-node-js","tag-postgresql","tag-react","tag-react-router","tag-rest-api"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v21.2 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>React + Node.js + Express + PostgreSQL example: Build a CRUD App - BezKoder<\/title>\n<meta name=\"description\" content=\"Step by step to build React Express PostgreSQL example with Node.js - React connects with PostgreSQL database for CRUD operations.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.bezkoder.com\/react-node-express-postgresql\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React + Node.js + Express + PostgreSQL example: Build a CRUD App - BezKoder\" \/>\n<meta property=\"og:description\" content=\"Step by step to build React Express PostgreSQL example with Node.js - React connects with PostgreSQL database for CRUD operations.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.bezkoder.com\/react-node-express-postgresql\/\" \/>\n<meta property=\"og:site_name\" content=\"BezKoder\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/bezkoder\" \/>\n<meta property=\"article:published_time\" content=\"2019-10-11T01:49:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-10-16T04:28:37+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-crud-example-feature-image.png\" \/>\n\t<meta property=\"og:image:width\" content=\"750\" \/>\n\t<meta property=\"og:image:height\" content=\"410\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"bezkoder\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"bezkoder\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"12 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.bezkoder.com\/react-node-express-postgresql\/\",\"url\":\"https:\/\/www.bezkoder.com\/react-node-express-postgresql\/\",\"name\":\"React + Node.js + Express + PostgreSQL example: Build a CRUD App - BezKoder\",\"isPartOf\":{\"@id\":\"https:\/\/www.bezkoder.com\/#website\"},\"datePublished\":\"2019-10-11T01:49:54+00:00\",\"dateModified\":\"2023-10-16T04:28:37+00:00\",\"author\":{\"@id\":\"https:\/\/www.bezkoder.com\/#\/schema\/person\/eb4ad162bbd76adb4fde3089aa839a5a\"},\"description\":\"Step by step to build React Express PostgreSQL example with Node.js - React connects with PostgreSQL database for CRUD operations.\",\"breadcrumb\":{\"@id\":\"https:\/\/www.bezkoder.com\/react-node-express-postgresql\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.bezkoder.com\/react-node-express-postgresql\/\"]}]},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/www.bezkoder.com\/react-node-express-postgresql\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/www.bezkoder.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React + Node.js + Express + PostgreSQL example: Build a CRUD App\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.bezkoder.com\/#website\",\"url\":\"https:\/\/www.bezkoder.com\/\",\"name\":\"BezKoder\",\"description\":\"Mobile &amp; Web App Development Tutorials\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.bezkoder.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.bezkoder.com\/#\/schema\/person\/eb4ad162bbd76adb4fde3089aa839a5a\",\"name\":\"bezkoder\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.bezkoder.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/67090ba8df7b2956375fa0fdf09902595527a34cf7d741bdebbbc8e63fcdd7b5?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/67090ba8df7b2956375fa0fdf09902595527a34cf7d741bdebbbc8e63fcdd7b5?s=96&d=mm&r=g\",\"caption\":\"bezkoder\"},\"url\":\"https:\/\/www.bezkoder.com\/author\/bezkoder\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React + Node.js + Express + PostgreSQL example: Build a CRUD App - BezKoder","description":"Step by step to build React Express PostgreSQL example with Node.js - React connects with PostgreSQL database for CRUD operations.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.bezkoder.com\/react-node-express-postgresql\/","og_locale":"en_US","og_type":"article","og_title":"React + Node.js + Express + PostgreSQL example: Build a CRUD App - BezKoder","og_description":"Step by step to build React Express PostgreSQL example with Node.js - React connects with PostgreSQL database for CRUD operations.","og_url":"https:\/\/www.bezkoder.com\/react-node-express-postgresql\/","og_site_name":"BezKoder","article_publisher":"https:\/\/www.facebook.com\/bezkoder","article_published_time":"2019-10-11T01:49:54+00:00","article_modified_time":"2023-10-16T04:28:37+00:00","og_image":[{"width":750,"height":410,"url":"https:\/\/www.bezkoder.com\/wp-content\/uploads\/2020\/03\/react-node-express-postgresql-crud-example-feature-image.png","type":"image\/png"}],"author":"bezkoder","twitter_card":"summary_large_image","twitter_misc":{"Written by":"bezkoder","Est. reading time":"12 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.bezkoder.com\/react-node-express-postgresql\/","url":"https:\/\/www.bezkoder.com\/react-node-express-postgresql\/","name":"React + Node.js + Express + PostgreSQL example: Build a CRUD App - BezKoder","isPartOf":{"@id":"https:\/\/www.bezkoder.com\/#website"},"datePublished":"2019-10-11T01:49:54+00:00","dateModified":"2023-10-16T04:28:37+00:00","author":{"@id":"https:\/\/www.bezkoder.com\/#\/schema\/person\/eb4ad162bbd76adb4fde3089aa839a5a"},"description":"Step by step to build React Express PostgreSQL example with Node.js - React connects with PostgreSQL database for CRUD operations.","breadcrumb":{"@id":"https:\/\/www.bezkoder.com\/react-node-express-postgresql\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.bezkoder.com\/react-node-express-postgresql\/"]}]},{"@type":"BreadcrumbList","@id":"https:\/\/www.bezkoder.com\/react-node-express-postgresql\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/www.bezkoder.com\/"},{"@type":"ListItem","position":2,"name":"React + Node.js + Express + PostgreSQL example: Build a CRUD App"}]},{"@type":"WebSite","@id":"https:\/\/www.bezkoder.com\/#website","url":"https:\/\/www.bezkoder.com\/","name":"BezKoder","description":"Mobile &amp; Web App Development Tutorials","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.bezkoder.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.bezkoder.com\/#\/schema\/person\/eb4ad162bbd76adb4fde3089aa839a5a","name":"bezkoder","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.bezkoder.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/67090ba8df7b2956375fa0fdf09902595527a34cf7d741bdebbbc8e63fcdd7b5?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/67090ba8df7b2956375fa0fdf09902595527a34cf7d741bdebbbc8e63fcdd7b5?s=96&d=mm&r=g","caption":"bezkoder"},"url":"https:\/\/www.bezkoder.com\/author\/bezkoder\/"}]}},"_links":{"self":[{"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/posts\/2674","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/comments?post=2674"}],"version-history":[{"count":0,"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/posts\/2674\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/media\/2685"}],"wp:attachment":[{"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/media?parent=2674"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/categories?post=2674"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.bezkoder.com\/wp-json\/wp\/v2\/tags?post=2674"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}