[DAPS-1358] Init Setup

[AronPerez]

PR Description

Tasks

• [ ] - A description of the PR has been provided, and a diagram included if it is a new feature.
• [ ] - Formatter has been run
• [ ] - CHANGELOG comment has been added
• [ ] - Labels have been assigned to the pr
• [ ] - A reviwer has been added
• [ ] - A user has been assigned to work on the pr
• [ ] - If new feature a unit test has been added

Summary by Sourcery

Initialize the DataFed React+TypeScript frontend and accompanying Express server with build, test, and documentation scaffolding.

New Features:

• Scaffold Express-based server with logging, health check, API version endpoint, static asset serving, HTTPS support, and graceful shutdown.
• Create React+TypeScript application skeleton with main App component, login flow, record lookup UI, global and component styles.

Build:

• Configure TypeScript compiler options via tsconfig and integrate Babel for JSX and TypeScript transpilation.
• Add Webpack configuration supporting development (HMR, source maps) and production (asset optimization, code splitting).

Documentation:

• Add README detailing project structure, development workflow, build steps, and coding standards.

Tests:

• Set up Jest configuration and include initial test files and coverage settings.

Chores:

• Define project dependencies and scripts in package.json.

[sourcery-ai[bot]]

Reviewer's Guide

Initial setup of the React+TypeScript frontend and Express server, including TypeScript compiler configuration, build tooling, server scaffolding, React application bootstrapping, testing setup, and project documentation.

Sequence Diagram: API Request for Version Info

sequenceDiagram
    participant Client
    participant ExpressApp as Express Application
    participant RequestIdMiddleware as X-Request-Id Middleware
    participant LoggerMiddleware as Request Logger
    participant APIRouter as API Router
    participant VersionHandler as /_version Handler

    Client->>+ExpressApp: HTTP GET /api/_version
    ExpressApp->>+RequestIdMiddleware: process request
    RequestIdMiddleware-->>-ExpressApp: next()
    ExpressApp->>+LoggerMiddleware: process request
    LoggerMiddleware-->>-ExpressApp: next()
    ExpressApp->>+APIRouter: route request
    APIRouter->>+VersionHandler: handle /_version
    VersionHandler-->>-APIRouter: JSON response (version, gitHash, env)
    APIRouter-->>-ExpressApp: response
    ExpressApp-->>-Client: HTTP 200 OK with JSON

Sequence Diagram: Server Graceful Shutdown

sequenceDiagram
    participant OS as Operating System
    participant Process
    participant HTTPServer as HTTP Server
    participant HTTPSServer as HTTPS Server (optional)
    participant ActiveConnections as Set<Socket>

    OS->>Process: SIGINT/SIGTERM/SIGHUP signal
    Process->>Process: gracefulShutdown(httpServer, signal)
    Process->>ActiveConnections: For each conn: conn.destroy()
    Process->>HTTPServer: server.close()
    HTTPServer-->>Process: callback (err?)
    alt Production with SSL
        Process->>Process: gracefulShutdown(httpsServerInstance, signal)
        Process->>ActiveConnections: For each conn: conn.destroy() (if separate set or managed)
        Process->>HTTPSServer: server.close()
        HTTPSServer-->>Process: callback (err?)
    end
    Process->>OS: process.exit(0 or 1)

File-Level Changes

Change	Details	Files
TypeScript compiler configuration updated	Lowered target to ES6 and switched to CommonJS module resolution Added outDir/rootDir, experimentalDecorators, emitDecoratorMetadata flags Enabled skipLibCheck and forceConsistentCasingInFileNames Restricted include patterns to .ts/.tsx and excluded node_modules/build	web/react-design/tsconfig.json
New Express server initialization and middleware	Configured helmet, body-parser, request logging, and UUID request IDs Defined environment flags (development, production, ci) and SSL options Mounted health check and version API routes under /api/_version and /health Added static asset serving with SPA fallback in production Integrated Webpack dev and hot middleware for development Implemented global error handler and graceful shutdown on signals	web/react-design/src/index.ts
Webpack build configuration introduced	Defined common plugins (HtmlWebpackPlugin, DefinePlugin, context replacement) Set up loaders for JS/JSX, Handlebars, assets, and SCSS with environment-based rules Configured development HMR and React Refresh, production CSS extraction and minimization Configured optimization: splitChunks, TerserPlugin, CssMinimizerPlugin Resolved .ts/.tsx extensions, polyfills, and devServer settings for history API fallback	web/react-design/webpackConfig.js
React application bootstrapped with styling and tests	Created main App.tsx with user context, record lookup form, and conditional rendering Added global (index.css) and component (App.css) styles for light/dark modes Provided HTML template (index.html) and entry point (main.tsx) Included initial component test (App.test.tsx)	web/react-design/src/App.tsx web/react-design/src/App.css web/react-design/src/index.css web/react-design/src/main.tsx web/react-design/src/index.html web/react-design/src/App.test.tsx
Project tooling, dependencies, and documentation added	Defined package.json with scripts for dev, build, and start, and listed dependencies/devDependencies Configured jest.config.js for ts-jest, coverage, and module mapping Established babel.config.js with presets for env, React, and TypeScript plus decorator support Authored README.md outlining project structure, workflows, coding standards, and API integration	web/react-design/package.json web/react-design/jest.config.js web/react-design/babel.config.js web/react-design/README.md

Possibly linked issues

• #1358: PR initializes the React+TypeScript project, including build tools, testing, linting, and basic structure per the issue.

---

Tips and commands

Interacting with Sourcery

• Trigger a new review: Comment @sourcery-ai review on the pull request.
• Continue discussions: Reply directly to Sourcery's review comments.
• Generate a GitHub issue from a review comment: Ask Sourcery to create an issue from a review comment by replying to it. You can also reply to a review comment with @sourcery-ai issue to create an issue from it.
• Generate a pull request title: Write @sourcery-ai anywhere in the pull request title to generate a title at any time. You can also comment @sourcery-ai title on the pull request to (re-)generate the title at any time.
• Generate a pull request summary: Write @sourcery-ai summary anywhere in the pull request body to generate a PR summary at any time exactly where you want it. You can also comment @sourcery-ai summary on the pull request to (re-)generate the summary at any time.
• Generate reviewer's guide: Comment @sourcery-ai guide on the pull request to (re-)generate the reviewer's guide at any time.
• Resolve all Sourcery comments: Comment @sourcery-ai resolve on the pull request to resolve all Sourcery comments. Useful if you've already addressed all the comments and don't want to see them anymore.
• Dismiss all Sourcery reviews: Comment @sourcery-ai dismiss on the pull request to dismiss all existing Sourcery reviews. Especially useful if you want to start fresh with a new review - don't forget to comment @sourcery-ai review to trigger a new review!

Customizing Your Experience

Access your dashboard to:

• Enable or disable review features such as the Sourcery-generated pull request summary, the reviewer's guide, and others.
• Change the review language.
• Add, remove or edit custom review instructions.
• Adjust other review settings.

Getting Help

• Contact our support team for questions or feedback.
• Visit our documentation for detailed guides and information.
• Keep in touch with the Sourcery team by following us on X/Twitter, LinkedIn or GitHub.