Nest + React or Express Example

Prepare fresh new Linux Mint 21.3 Virginia as Cinnamon with ubuntu jammy 22.04. Debian distribution.
Run all necessity apt-get update and apt-get dist-upgrade before and after the software installation. Use apt-get autoclean and apt-get autoremove.
Some packages, repositories and softwares require editing the terminal line to work with current ubuntu version and name instead of linux. Browse for jammy.
The installation will ask to add keys and generate them, apt store and repository and their version url.
Additional software and ubuntu core packages are required based on the following install.
- mysql community server 8
- mysql workbench 8
- postgresql server 14.13
- pgAdmin 4 version 8.12
- apache2 version 2.4.52
- php 8.3.12
- node 19.9.0
- npm 9.6.3
- VSCode or code 1.95.2
- TypeScript 5.6
- eclipse for php 2024-09
- chrome 130
- postman 10 (non cloud version)
- composer 2.8.1
- laravel 11
- docker 27.3.1
MySQL server contains auto generated user/password in /etc/mysql/debian.cnf, obtain it to login using workbench and create administrative user root2tech with the same password and grant all global privileges on host localhost. Add and keep both connections. The .env file is configured with the same mysql user and pass.
PostgreSQL: Describe password reset and trust localhost using ALTER USER postgres WITH PASSWORD 'newpassword'; by looking on the internet support pages on the topic of no password login or forgot password.
Lookup /etc/postgresql/VERSION/main/pg_hba.conf as a root and change the table with trust by backuping the file or keeping it copy-paste on the side of xed.
Type in terminal after sudo su the following lines psql -U postgres -W -h localhost to login locally and check systemctl enable/start/stop/status servicename for system services first. This will login without password in the pgsql terminal then type your new password, i.e. postgres as the username in the line for password reset, revert previous pg_hba.conf and restart the postgresql service.
Now repeat the step in terminal to ensure login with the same password and exit with \q and save new server in pgAdmin4 with the changed password.
Apache2 require special module to use php/node and by default will autoconfigure after install. Change the main directory and /var/www/ to your local user home folder projects destination. Edit /etc/apache2/apache2.conf for main directory change to Options Indexes FollowSymLinks Includes ExecCGI, AllowOverride All, Allow from all, Require all granted or research your preference, comment /var/www/ and copy directory /home/user/projects/ with example Options Indexes FollowSymLinks, AllowOverride None, Require all granted. User main folder will generate security error on apache and htaccess requirement usually for no permissions update, change the permissions of the main user folder to access the path in destination project to 755 or 775. Using symbolic links create your vhost by template in sites-available and sites-enabled. Add symlinks also of mods-available and mods-enabled for php8.3.conf and php8.3.load, if you are missing any additional mod check the installation errors and messages. Add to /etc/hosts vhost servername and configuration.
Node and npm are needed for package.json and node_modules, this includes npm run build and frontend. Usually install with code.
VSCode IDE is used for php and node development in addition to css and js, configure to skip vendor folder in search and filter as node_modules, whitespace rendering, install more extensions for php.
Older version of Postman must be installed from the internet that disables autoupdate by editing the hosts file with the set of ips. Add to panel using linux menu applet.
Docker requires first installation instructions and change of string to jammy distribution, can be inspected by the download url.
sudo apt-get update
sudo apt-get install ca-certificates curl
sudo install -m 0755 -d /etc/apt/keyrings
sudo curl -fsSL https://download.docker.com/linux/ubuntu/gpg -o /etc/apt/keyrings/docker.asc
sudo chmod a+r /etc/apt/keyrings/docker.asc
echo \
"deb [arch=$(dpkg --print-architecture) signed-by=/etc/apt/keyrings/docker.asc] https://download.docker.com/linux/ubuntu \
jammy stable" | \
sudo tee /etc/apt/sources.list.d/docker.list > /dev/null
sudo apt-get update
sudo apt-get install docker-ce docker-ce-cli containerd.io docker-buildx-plugin docker-compose-plugin
sudo docker run hello-world
Proceed to download docker-desktop-amd64.deb and install all dependencies automatically.
Requires virtualization support on the host machine.
Test it by installing cpu-enabled and typing kvm-ok, also bios configuration and i3-type of processor.
- nest
- express
- mysql and postgresql
- knex sql-orm
- zod data validation
- react
- react-router
- postman api and js fetch
- nest 10.4.7 (@nestjs/cli)
- prettier 3.3.3 (prettier)
- knex 3.1.0 (knex)
- node (@types/node)
- @types/node
- @types/express
- nest 10.4.7
- nest-knexjs 0.0.24
- @nestjs/config 3.3.0
- @nestjs/serve-static 4.0.2
- knex 3.1.0
- pg 8.13.1
- mysql2 3.11.4
- zod 3.23.8
cd nest-backend/
npm install
- react 18.3.1
- react-dom 18.3.1
- react-router 6.28.0
- react-router-dom 6.28.0
- @babel/core 7.26.0
- @babel/preset-react 7.25.9
- babel-loader 9.2.1
- webpack 5.96.1
- webpack-cli 5.1.4
cd ./../react-frontend/
npm install
Create new nest project in parent projects folder using nest new nest-backend after cd ./../ and use its contents along with react-frontend to assemble the nested react project. This will install all node_modules automatically. Enter cd ./nest-backend/ and save in zip for later if you wish using zip -r node_modules.zip node_modules, the method is useful for both vendor folder and node.
To install react use npx create-react-app react-frontend in the parent projects folder and enter openssh password if prompted.
Another way is to startup with webpack and babel. Get back to the parent projects folder and type mkdir react-frontend-webpack and cd react-frontend-webpack/. Continue the installation with npm init -y then npm install react react-dom and npm install webpack webpack-cli webpack-dev-server babel-loader @babel/core @babel/preset-env @babel/preset-react html-webpack-plugin terser-webpack-plugin --save-dev finally npm install style-loader css-loader --save-dev. This method requires configuration of webpack and babel files, creation of first react components and html template including any npm scripts.
Shorter npm install webpack webpack-cli babel-loader @babel/core @babel/preset-react --save-dev as folder react-frontend-webpack-short with smaller configuration.
On this level, 4 base folders exist in the projects and can be used to version and generate new ones in the future. Building the example requires public_html on top, nest-backend and react-frontend using separate package.json and node_modules. This method will allow any additional application programming and different frontend along react, also can come up with react on top that compiles as the main package.json and using directly the public folder. Since react 18 render method of the app requires createRoot function of react-dom/client also encapsulate the code in window.bodyOnLoad and add onload attribute to the html template body tag by loading the main dist/bundle.js in the head. Webpack must add scripts for watch/production/development to the package, define the module rules, configure the output of the entry point, resolve build path in public_html/dist and use production mode at the end.
All pages are loaded by the public_html folder using react bundle, nest must implement the api using nest g resource name and test it with postman.
Knex integration as part of the service and sometimes the controller in the root module. Creation of users with password for mysql and pgadmin, schema nest_react_example1. Creation of first migration, testing of database and seeding. Zod validation of each request and database management using crud operations.
If you rely on two schemas use the biserver communication choosing main and second by id with async factory to root. Usually for historical table data maintenance, archives, transfer with old or previous id, compact and optimization of database on stages.
Just like this your app is ready for more migration, more seeding, more postman, more g resource.
Last part of the management is writing the react with router for each navigation and ajax form, recompile, test and that's it.
async getTotal(id: number) {
var total: number = 0;
const sum_parts = await this.knex
.table('invoice_parts')
.select([this.knex.raw('sum(price*count) as sum_parts')])
.where('invoices_id', id);
if (this.debug) console.log('Sum Parts', sum_parts);
if (sum_parts.length == 1) total += parseFloat(sum_parts[0].sum_parts || 0);
const sum_array = await this.knex
.table('invoice_array')
.select([this.knex.raw('sum(price*count) as sum_array')])
.where('invoices_id', id);
if (this.debug) console.log('Sum Array', sum_array);
if (sum_array.length == 1) total += parseFloat(sum_array[0].sum_array || 0);
return total;
}
await this.knex.table('invoice_parts').where('invoices_id', id).delete();
await this.knex.table('invoice_array').where('invoices_id', id).delete();
import React from "react";
export default class ReactFetchComponent extends React.Component {
constructor(props) {
super(props);
}
fetchAPI(action, method, data, callb) {
const opt = {
method: method,
};
if (data) {
opt.headers = {
"Content-Type": "application/json",
};
opt.body = JSON.stringify(data);
}
fetch(action, opt)
.then((response) => response.json())
.then((d) => callb(d));
}
}
Top High Order of the App.js require Router Dom, Route, Routes, Link, Outlet, useParams and useNavigate hooks, in some examples also useSearchParams. Wrappers of class components based on functional hooks and location data.
Type in terminal npm run start from the main folder and open http://localhost:4400/. Nest and React are compiled.
- MongoDB Server 4.4.28
- MongoDB Compass 1.39.1
- Redis Server 7.4.1
- Redis Insight 2.60.0
- express 5.0.1
- body-parser 1.20.3
- cookie-parser 1.4.7
- cookie-session 2.1.0
- mongodb 4.14.0
- mongoose 6.7.4
- redis 4.7.0
- zod 3.23.8
cd express-backend/
npm install
npm run tsc
cd ./../
npm install
npm run build
npm run start
Updated At: January 2025