Spring React TypeScript REST

Fullstack Application — React (TypeScript) frontend, Axios HTTP client, Deno middleware, Spring Boot Java backend, OkHttp client, and MySQL (AWS RDS - Aurora) service.

Docker's example of this stack using React, Java, and MySQL

Frameworks

Frontend

Middleware

Backend

Cloud

Tools

Stack

Clear git cache (Frontend/Backend)

git rm -r --cached .

Reset git head (Frontend/Backend)

git reset --hard <COMMIT_ID>

Scan files for secrets (Frontend/Backend)

gshield secret scan repo

Clean up code (Frontend)

cd frontend
yarn prettier --write .

Clean up code (Middleware)

cd middleware
yarn prettier --write .

Add Packages (Frontend)

cd frontend
yarn add

Install Packages (Frontend)

cd frontend
yarn install

Install Packages (Middleware)

cd middleware
yarn install

Clean Cache (Frontend)

cd frontend
yarn cache clean

Clean Cache (Middleware)

cd middleware
yarn cache clean

Upgrade Packages (Frontend)

cd frontend
yarn plugin import interactive-tools

cd frontend
yarn upgrade-interactive

Upgrade Packages (Middleware)

cd middleware
yarn plugin import interactive-tools

cd middleware
yarn upgrade-interactive

Frontend

Access the frontend code by opening a command line in the root of this project and changing to the frontend folder.

cd frontend

Yarn

Install Yarn

Install Node LTS for the proper operating system
Enable Corepack for installing Yarn
```
corepack enable
```
Install [Yarn](corepack prepare yarn@stable --activate) for installing and managing package.json dependencies
```
corepack prepare yarn@stable --activate
```
Upgrade Yarn to the latest stable version
```
yarn set version stable
```
Install package.json dependencies for project
```
yarn install
```

Create/convert env

Rename the example.env file to .env for Yarn and Docker
- This is a security measure for reducing commits with secrets

Build Application with Yarn

Install Visual Studio Code editor
In Visual Studio Code terminal build the React TypeScript application into a bundle
```
yarn build
```

Start Frontend

Start project
```
yarn start
```

Docker

Build Backend Docker Image

For more examples and information on Node JavaScript Docker builds, reference the Node JavaScript Documentation

Docker build command

docker build -t spring-react-typescript-rest/frontend .

Run Docker Image

Docker run command

Start Container (Publish):

docker run -p 3000:3000 spring-react-typescript-rest/frontend

Push Docker Image

Docker login command

Login:
```
docker login
```

Docker tag command

Tag:

docker tag spring-react-typescript-rest/frontend <DOCKER_USERNAME>/spring-react-typescript-rest-frontend:latest

Docker push command

Push:

docker push <DOCKER_USERNAME>/spring-react-typescript-rest-frontend:latest

Amplify

Install Amplify CLI

Install AWS Amplify CLI to setup Amplify functionality

npm install -g @aws-amplify/cli

Create a CLI based Access Id and Secret Key for an AWS IAM User
Configure the AWS Amplify configuration

amplify configure

Initialize the AWS Amplify project configuration
If the initialization does not complete, rename the .gitignore, make sure to copy the contents of the initial .gitignore, into the file Amplify generates

Middleware

Access the middleware code by opening a command line in the root of this project and changing to the middleware folder.

cd middleware

Deno

Start middleware

Start project

deno run --allow-net --allow-read --allow-env --allow-run --watch=routes/ main.ts

Docker

Build Backend Docker Image

For more examples and information on Spring Boot Docker builds, reference the Spring Framework Documentation.

Docker build command

docker build -t spring-react-typescript-rest/middleware .

Run Docker Image

Docker run command

Start Container (Publish):

docker run -p 4040:4040 spring-react-typescript-rest/middleware

Start Container (Interactively & pseudo-TTY) :

docker run spring-react-typescript-rest/middleware -it 4040:4040

Push Docker Image

Docker login command

Login:
```
docker login
```

Docker tag command

Tag:

docker tag spring-react-typescript-rest/middleware <DOCKER_USERNAME>/spring-react-typescript-rest-middleware:latest

Docker push command

Push:
```
docker push <DOCKER_USERNAME>/spring-react-typescript-rest-middleware:latest
```
Push Docker Image to ECR (Amazon Elastic Container Registry)
Add the Powershell AWS tools for ECR, to begin setting up registry permissions
```
Install-Module -Name AWS.Tools.ECR
```
You can reference the Getting started documentation for implementing access configuration (Make sure the repository is established with a non-root account)

Pipe AWS password to Docker login command

(Get-ECRLoginCommand).Password | docker login --username AWS --password-stdin aws_account_id.dkr.ecr.region.amazonaws.com

Docker tag command

Tag:

docker tag spring-react-typescript-rest/middleware <AWS_ACCOUNT_ID>.dkr.ecr.<REGION>.amazonaws.com/middleware:latest

Docker push command

Push:

docker push <AWS_ACCOUNT_ID>.dkr.ecr.<REGION>.amazonaws.com/middleware:latest

Backend

Access the backend code by opening a command line in the root of this project and changing to the backend folder.

cd backend

Gradle

Install Gradle

In Powershell running as admin, enable Windows Subsystem for Linux

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

In Powershell running as admin, enable Virtual Machine feature

dism.exe /online /enable-feature /featurename:Microsoft-Windows-Subsystem-Linux /all /norestart

In Powershell running as admin, install WSL to the second version
```
wsl --install Ubuntu-22.04
```
Install Hyper terminal
In Hyper click the hamburger menu -> edit -> preferences -> update the two lines by pasting or typing so they reflect shell: 'C:\\Windows\\System32\\wsl.exe' and shellArgs: [~]
In Hyper terminal upgrade WSL (Ubuntu)
```
sudo apt update && sudo apt upgrade -y
```
Install Unzip in WSL (Ubuntu)
```
sudo apt-get install unzip -y
```
Install Zip in WSL (Ubuntu)
```
sudo apt-get install zip -y
```
Install chocolatey
Install SDKMan with chocolatey (Ubuntu)
```
curl -s "https://get.sdkman.io" | bash
```
Configure SDKMan in your terminal command line
```
source "$HOME/.sdkman/bin/sdkman-init.sh"
```
Install Gradle
```
sdk install gradle 8.1.1
```

Start Backend with Gradle

Create configuration in IntelliJ IDEA or reference the SpringReactTypeScriptREST.run.xml file in the backend folder and start the application with IntelliJ IDEA

<component name="ProjectRunConfigurationManager">
  <configuration default="false" name="SpringReactTypeScriptREST" type="SpringBootApplicationConfigurationType" factoryName="Spring Boot" nameIsGenerated="true">
    <option name="ACTIVE_PROFILES" value="dev" />
    <module name="spring-react-typescript-rest-backend.main" />
    <option name="SPRING_BOOT_MAIN_CLASS" value="com.springreacttypescriptrest.backend.SpringReactTypeScriptREST" />
    <extension name="software.aws.toolkits.jetbrains.core.execution.JavaAwsConnectionExtension">
      <option name="credential" />
      <option name="region" />
      <option name="useCurrentConnection" value="false" />
    </extension>
    <method v="2">
      <option name="Make" enabled="true" />
    </method>
  </configuration>
</component>

Create/convert application properties

Rename the application-dev.properties and application-prod.properties files to application-development.properties and application-produdction.properties for Gradle and Docker
- This is a security measure for reducing commits with secrets

Build JAR with Gradle

Install IntelliJ IDEA IDE
In IntelliJ IDEA terminal build the Spring Boot application into a JAR
```
./gradlew build
```

Docker

Build Backend Docker Image

For more examples and information on Spring Boot Docker builds, reference the Spring Framework Documentation.

Docker build command

docker build -t spring-react-typescript-rest/backend .

Run Docker Image

Docker run command

Start Container (Publish):

docker run -p 8080:8080 spring-react-typescript-rest/backend

Start Container (Interactively & pseudo-TTY) :

docker run spring-react-typescript-rest/backend -it 8080:8080

Push Docker Image

Docker login command

Login:
```
docker login
```

Docker tag command

Tag:

docker tag spring-react-typescript-rest/backend <DOCKER_USERNAME>/spring-react-typescript-rest-backend:latest

Docker push command

Push:
```
docker push <DOCKER_USERNAME>/spring-react-typescript-rest-backend:latest
```
Push Docker Image to ECR (Amazon Elastic Container Registry)
Add the Powershell AWS tools for ECR, to begin setting up registry permissions
```
Install-Module -Name AWS.Tools.ECR
```
You can reference the Getting started documentation for implementing access configuration (Make sure the repository is established with a non-root account)

Pipe AWS password to Docker login command

(Get-ECRLoginCommand).Password | docker login --username AWS --password-stdin aws_account_id.dkr.ecr.region.amazonaws.com

Docker tag command

Tag:

docker tag spring-react-typescript-rest/backend <AWS_ACCOUNT_ID>.dkr.ecr.<REGION>.amazonaws.com/backend:latest

Docker push command

Push:

docker push <AWS_ACCOUNT_ID>.dkr.ecr.<REGION>.amazonaws.com/backend:latest

AWS

Install AWS CLI

Install AWS CLI to setup AWS functionality
Validate successful installation AWS CLI
```
aws --version
```
Create a CLI based Access Id and Secret Key for an AWS IAM User
Prepare the following values for the configuration stage of the AWS CLI, the region can be found on this documentation page, reference the column with the label, "region".
Access Key: <ACCESS_KEY>
Secret Key: <SECRET_KEY>
Region:

aws configure

Set AWS IAM Permissions

Add any required permissions to the IAM User for which the AWS CLI configuration was established with

AWS RDS - Aurora

MySQL

Install MySQL Community Server
Install MySQL Workbench

Helm

Install Helm with chocolatey
```
choco install kubernetes-helm
```
Validate successful installation of Helm
```
helm version
```
Create Helm chart with chocolatey
```
helm create <CHART_NAME>
```

Kubernetes

Install Kubernetes CLI with chocolatey
```
choco install kubernetes-cli
```
Validate successful installation of KubeCTL
```
kubectl version --client
```
Install EKS Kubernetes CLI with chocolatey
```
chocolatey install -y eksctl
```
Upgrade EKS Kubernetes CLI
```
chocolatey upgrade -y eksctl
```
Validate successful installation of EKSCTL
```
eksctl version
```

Create EKS Cluster

Create a cluster for your application with KubeCTL and EKSCTL

eksctl create cluster --name=Cluster --version=1.27 --nodes=1 --node-type=t3.medium

Validate successful EKS cluster creation with KubeCTL
```
kubectl get nodes
```

Add EKS Cluster Node Groups

Create a cluster for your application with KubeCTL and EKSCTL

eksctl create nodegroup --cluster=Cluster --region=<REGION> --name=Nodegroup --node-ami-family=AmazonLinux2 --node-type=t3.medium --nodes=1 --nodes-min=1 --nodes-max=3

Validate successful EKS cluster node group creation with KubeCTL
```
kubectl get nodes
```

Request AWS Certificate Manager (ACM) - Certificate

Access AWS Certificate Manager (ACM) in AWS Console
Request a public certificate for the domain the application will use
Add the domain and the certificate's arn to the ingress.yaml file

Configure EKS Cluster

Change to kubernetes folder within the backend folder cd backend/kubernetes
Update and apply namespace file with KubeCTL
```
kubectl apply -f namespace.yaml
```
Validate successful EKS cluster namespace creation with KubeCTL
```
kubectl get namespaces --show-labels
```
Update and apply deployment file with KubeCTL
```
kubectl apply -f deployment.yaml
```

Validate successful EKS cluster deployment creation with KubeCTL

kubectl get deployments --show-labels --namespace=backend-namespace

Update and apply service file/s with KubeCTL

kubectl apply -f service.yaml
kubectl apply -f service-secure.yaml

Validate successful EKS cluster service creation with KubeCTL

kubectl get services --show-labels --namespace=backend-namespace

Update and apply ingress file/s with KubeCTL

kubectl apply -f ingress.yaml
kubectl apply -f ingress-secure.yaml

Validate successful EKS cluster ingress creation with KubeCTL

kubectl get ingress --show-labels --namespace=backend-namespace

Deploy/Restart EKS Cluster Images

Rollout restart deployment with KubeCTL to pull new image

kubectl rollout restart deployment/backend-deployment --namespace=backend-namespace

Validate successful EKS cluster deployment pod restarts with KubeCTL
```
kubectl get pods --namespace=backend-namespace
```

Add AWS Load Balancer Controller (add-on)

Get AWS Region IAM Policy JSON

curl -O https://raw.githubusercontent.com/kubernetes-sigs/aws-load-balancer-controller/v2.4.7/docs/install/iam_policy.json

Create AWS Load Balancer Controller IAM Policy

aws iam create-policy --policy-name AWSLoadBalancerControllerIAMPolicy --policy-document file://iam_policy.json

Create AWS EKS OIDC Provider

eksctl utils associate-iam-oidc-provider --region=<REGION> --cluster=Cluster --approve

Create AWS Load Balancer Controller IAM Role

eksctl create iamserviceaccount --cluster=Cluster --namespace=kube-system --name=aws-load-balancer-controller --role-name AmazonEKSLoadBalancerControllerRole --attach-policy-arn=arn:aws:iam::<ACCOUNT_ID>:policy/AWSLoadBalancerControllerIAMPolicy --approve

ADD AWS Load Balancer Controller Helm Repository

helm repo add eks https://aws.github.io/eks-charts

Update AWS Load Balancer Controller Helm Repository
```
helm repo update eks
```

Install AWS Load Balancer Controller with Helm

helm install aws-load-balancer-controller eks/aws-load-balancer-controller -n kube-system --set clusterName=Cluster --set serviceAccount.create=false --set serviceAccount.name=aws-load-balancer-controller

Validate successful AWS Load Balancer Controller deployment with KubeCTL
```
kubectl get deployment -n kube-system aws-load-balancer-controller
```

Name		Name	Last commit message	Last commit date
Latest commit History 1 Commit
backend		backend
database		database
frontend		frontend
kubernetes		kubernetes
middleware		middleware
.gitattributes		.gitattributes
.gitignore		.gitignore
LICENSE		LICENSE
README.MD		README.MD

License

heyitsjoealongi/spring-react-typescript-rest

Folders and files

Latest commit

History

Repository files navigation

Spring React TypeScript REST

Frameworks

Frontend

Middleware

Backend

Cloud

Tools

Stack

Clear git cache (Frontend/Backend)

Reset git head (Frontend/Backend)

Scan files for secrets (Frontend/Backend)

Clean up code (Frontend)

Clean up code (Middleware)

Add Packages (Frontend)

Install Packages (Frontend)

Install Packages (Middleware)

Clean Cache (Frontend)

Clean Cache (Middleware)

Upgrade Packages (Frontend)

Upgrade Packages (Middleware)

Frontend

Yarn

Install Yarn

Create/convert env

Build Application with Yarn

Start Frontend

Docker

Build Backend Docker Image

Run Docker Image

Push Docker Image

Amplify

Install Amplify CLI

Middleware

Deno

Start middleware

Docker

Build Backend Docker Image

Run Docker Image

Push Docker Image

Push Docker Image to ECR (Amazon Elastic Container Registry)

Backend

Gradle

Install Gradle

Start Backend with Gradle

Create/convert application properties

Build JAR with Gradle

Docker

Build Backend Docker Image

Run Docker Image

Push Docker Image

Push Docker Image to ECR (Amazon Elastic Container Registry)

AWS

Install AWS CLI

Set AWS IAM Permissions

AWS RDS - Aurora

MySQL

Helm

Kubernetes

Create EKS Cluster

Add EKS Cluster Node Groups

Request AWS Certificate Manager (ACM) - Certificate

Configure EKS Cluster

Deploy/Restart EKS Cluster Images

Add AWS Load Balancer Controller (add-on)

Acknowledgements

License

About

Topics

Resources

License

Uh oh!

Stars

Watchers

Forks