React + Node App
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
Contents
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:
– Retrieve Tutorials:
– Click on Edit button to go to a Tutorial page:
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
– Search Tutorials by title:
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:
- React Components
- React Hooks
- React Typescript Components
- React Typescript + Hooks
- React + Redux
- React + Redux + Hooks
– Backend:
- Node Express + MySQL (raw SQL): Rest API
- Node Express + Sequelize + MySQL: Rest API
- Node Express Typescript + MySQL: Rest API
- Node Express Typescript + Sequelize + MySQL: Rest API
– Video:
React + Node App Github with PostgreSQL
Tutorial: React + Node Express + PostgreSQL
Github Source code:
– Frontend:
- React Components
- React Hooks
- React Typescript Components
- React Typescript + Hooks
- React + Redux
- React + Redux + Hooks
– Backend: Node Express + Sequelize + PostgreSQL: Rest API
– Video:
React + Node App Github with MongoDB
Tutorial: React + Node Express + MongoDB
Github Source code:
– Frontend:
- React Components
- React Hooks
- React Typescript Components
- React Typescript + Hooks
- React + Redux
- React + Redux + Hooks
– Backend: Node Express + MongoDB: Rest API
– Video:
React + Node App Github with SQL Server (MSSQL)
Github Source code:
– Frontend:
- React Components
- React Hooks
- React Typescript Components
- React Typescript + Hooks
- React + Redux
- React + Redux + Hooks
– Backend: Node Express + MSSQL: Rest API
React Express Login Github
– Tutorial:
- React + Node.js Express: Authentication and Authorization with JWT example
- React + Node.js Express + MongoDB: Authentication and Authorization with JWT example
Github Source code:
– Frontend:
- React Components
- React Hooks
- React Typescript Components
- React Typescript + Hooks
- React + Redux
- React + Redux + Hooks
– 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.