React + Node App

by · Last modified: July 13, 2023

In this post, I will show you some examples that use React App with Node backend. You will see Github links for making following projects:

  • React + Node App with MySQL
  • React + Node App with PostgreSQL
  • React + Node App with MongoDB
  • React + Node App with SQL Server (MSSQL)
  • React + Node: JWT Authentication and Authorization

Overview

The Github source code shows many full stack React and Node sample Projects with CRUD Operations. The back-end server uses Node.js with Express for REST API and specific library for interacting with database. Front-end side is made with React/React Hooks/React Redux, React Router and Bootstrap.

Each of them is the Tutorial CRUD Application in that:

  • Each Tutorial has id, title, description, published status.
  • We can create, retrieve, update, delete Tutorials.
  • We can also find Tutorials by title.

The images below shows screenshots of our System.

– Add Tutorial:

react-node-app-github-express-create

– Retrieve Tutorials:

react-node-app-github-express-retrieve

– Click on Edit button to go to a Tutorial page:

react-node-app-github-express-retrieve-one

On this Page, you can:

  • change status to Published using Publish button
  • delete the Tutorial using Delete button
  • update the Tutorial details with Update button

react-node-app-github-express-update

– Search Tutorials by title:

react-node-app-github-express-search

How to Run

Node Express server:
Open command line at the project root folder, run:

npm install
node .

The Node App will export Rest APIs at port 8080, CORS configuration for working with port 8081.

React Client:
Create .env file with content:

PORT=8081

Choose React Github source code as you need.
Open command line at the project root folder, run:

npm install
npm start

Or:

yarn install
yarn start

React + Node App Github with MySQL

Tutorial:
– React + Node Express + MySQL
– React Redux + Node Express + MySQL

Github Source code:
– Frontend:

– Backend:

– Video:

React + Node App Github with PostgreSQL

Tutorial: React + Node Express + PostgreSQL

Github Source code:
– Frontend:

– Backend: Node Express + Sequelize + PostgreSQL: Rest API

– Video:

React + Node App Github with MongoDB

Tutorial: React + Node Express + MongoDB

Github Source code:
– Frontend:

– Backend: Node Express + MongoDB: Rest API

– Video:

React + Node App Github with SQL Server (MSSQL)

Github Source code:
– Frontend:

– Backend: Node Express + MSSQL: Rest API

React Express Login Github

– Tutorial:

Github Source code:
– Frontend:

– Backend:

– Video:

Using HttpOnly Cookies instead:
– Frontend:

– Backend:

How to Run React and Node App on same Port

Assume that we have 2 projects: React & Node.

If we run them separately:

  • Node Express Server exports Rest Apis at Url: http://localhost:8080/
  • React Client runs at url: http://localhost:8081/

Otherwise, when deploying React production-build with Node project, we only need to run Node Project for the fullstack (React + Node) system.

In this example, we access http://localhost:8080/ for the UI.

You can find step by step instruction at How to integrate React with Node App.

Tags:

You may also like...

Tutorials