App Server

Front End React .. Back End JS ..

A React frontend connected to a Node backend is a rock-solid combination for any application.

Connecting React.js to Node.js involves setting up a client-server architecture where React.js serves as the front-end (client) and Node.js serves as the back-end (server) of your application. This allows your React.js application to make requests to the Node.js server to fetch data or perform other server-side operations.

The following guide is intended to highlight the flow of requests from the client front-end to the back-end.

Please do not modify any files.

Application Server - Front End / Back End

Install nano

Before you can update the package index or install Vim or Nano, you need to identify the Linux distribution used in the Docker container.

1. Log into Portainer either by clicking on the bookmark or

   https://localhost:9443/#!/auth

2. Enter credentials.

Username	admin
Password	Portainer123

1. Click on 'Live Connect' option.

2. Click on: pdc-fe-1 container

pdc-fe-1

1. Exec into the container.

Exec into pdc-fe-1 container

1. Determine the contaner OS.

cat /etc/os-release

1. Install nano.

apt-get update && apt-get install nano -y

Install nano

Front End / Back End

Front End React

One of the main features of React is client-side routing:

In traditional websites, the browser requests a document from a web server, downloads and evaluates CSS and JavaScript assets, and renders the HTML sent from the server. When the user clicks a link, it starts the process all over again for a new page.

Client side routing allows your app to update the URL from a link click without making another request for another document from the server. Instead, your app can immediately render some new UI and make data requests with fetch to update the page with new information.

x

x