Skip to main content

Stack React TypeScript

Introduction​

The React TypeScript stack offers support for easily implementing a React frontend while using TypeScript as the implementation language.
It is based on Vite CLI — a modern frontend build tool known for its fast development server, hot module replacement (HMR), and optimized production builds.

Project Structure​

After cloning the project using the Solution CLI, the following initial project structure is created:

├── eslint.config.js
├── index.html
├── k5-project.yml
├── package-lock.json
├── package.json
├── public
│   └── vite.svg
├── README.md
├── src
│   ├── App.css
│   ├── App.tsx
│   ├── assets
│   │   └── react.svg
|   ├── generated
|   |   ├── helm-chart
|   |   |   ├── templates 
|   |   |   |   ├── deployment.yaml 
|   |   |   |   ├── service.yaml  
|   |   |   |   └── route.yaml  
|   |   |   ├── values.yaml
|   |   |   └── Chart.yaml  
|   |   ├── .gitignore
|   |   ├── Caddyfile
|   |   └── Dockerfile
│   ├── index.css
│   ├── main.tsx
│   └── vite-env.d.ts
├── tsconfig.app.json
├── tsconfig.json
├── tsconfig.node.json
├── start-server.sh
└── vite.config.ts

Root files​

  • eslint.config.js - Linting rules for TypeScript/React.
  • index.html - Main HTML file where the app mounts.
  • k5-project.yml - Project config for the K5 platform.
  • package.json / package-lock.json - Project dependencies and scripts.
  • README.md - Project overview.

public/​

  • vite.svg - Static asset served as-is by Vite.

src/​

  • App.tsx / App.css - Root React component and its styles.
  • assets/ - Static assets like images.
  • index.css - Global styles.
  • main.tsx - App entry point; mounts App.tsx.
  • vite-env.d.ts - Vite-specific TypeScript types.
  • generated/helm-chart - A default helm chart for deployment.
  • generated/Caddyfile - A default web server configuration.
  • generated/Dockerfile - A default dockerfile to containerize application.
⚠warning

Any modifications made to files in the folder src/generated will be lost, as this folder is automatically regenerated each time.

TypeScript config​

  • tsconfig.json - Base config.
  • tsconfig.app.json - App-specific settings.
  • tsconfig.node.json - Node.js environment settings.

Vite config​

  • vite.config.ts - Vite build and dev server configuration.

start-server​

  • start-server.sh - starting caddy web server.

CI/CD​

Unlike for other stacks, the React TypeScript stack does not offer built-in CI/CD support. To deploy the service, please use your own pipeline technology and implementation.

Code generation in pipeline​

To make sure, code generation is triggered during pipeline execution, please add a code generation step to your pipeline prior to the deployment steps.

The code generation can be triggered through the script step-generate-code.sh which is contained in the React TypeScript stack image. To make sure you use the correct image name, please check the ConfigMap k5-pipeline-image-versions for key GENERATE_CODE_REACT_TS_IMAGE and use it in your pipeline.

Gitlab CI example​

Below you can find an example .gitlab-ci.yaml, triggering the code generation in the step generate-code:

generate-code:
  stage: generate-code-nestjs
  image:
    name: ${IMAGE_REGISTRY}/${GENERATE_CODE_REACT_TS_IMAGE}
  script:
    - /opt/open-banking-platform/scripts/v1/step-generate-code.sh
    - echo "job 'generate-code' completed"
  artifacts:
    when: on_success
    expire_in: 30 days
    paths:
      - "./"

Deployment artifacts​

To ease the deployment, each project contains deployment artifacts within the folder src/generated (see above Project structure). These artifacts represent the default deployment configuration and are updated during every code generation execution in pipeline.

The environment variables in the generated helm chart can be easily extended by providing an extension-values.yml file as described in chapter Extend Helm deployment variables.

Example usage​

To use the default deployment artifacts, your pipeline build step should reference src/generated/Dockerfile, as shown in the following example:

docker build -t $SERVICE_PROJECT_IMAGE_REGISTRY/$IMAGE_NAME:$IMAGE_TAG -f src/generated/Dockerfile .

For the deployment step, the Helm command should point to src/generated/helm-chart, like in the example below:

helm upgrade --install DEPLOYMENT_NAME src/generated/helm-chart \
  --set image.repository=IMAGE_NAME \
  --set image.tag=IMAGE_TAG \
  --set namespace=NAMESPACE

Customization​

If you need full control over the deployment process, you can customize the Dockerfile, the Helm chart, or both by adding your own files at any path of your choice. Then, make sure to reference and use your custom files in the pipeline steps accordingly.