JTL-Platform Internal React

⚡️ Prerequisites

• For local development, ensure you are using the correct Node.js and pnpm versions:
  • Recommended: Use mise version manager
  • Run mise install to install the correct versions
• Run pnpm install on repository root to install all dependencies
• Version management:
  • Node.js version is defined in .tool-versions
  • pnpm version is defined in package.json packageManager field

🛠️ Development

You can connect to the MyGet feed by creating a .npmrc file in the root of the repository with the following content:

@jtl:registry=https://jtl-software.myget.org/F/cloud-platform/npm/
always-auth=true
//jtl-software.myget.org/F/cloud-platform/npm/:_authToken=AUTH_TOKEN

# pnpm-specific configuration
strict-peer-dependencies=true

Note: The .npmrc file is ignored by git and should not be committed to the repository. In CI/CD pipelines, this file is created dynamically using the MY_GET_API_KEY secret.

Create your .env file in the root of the repository with the following content from .env.example.

You can start storybook by running:

pnpm storybook

🔌 Ports

To prevent conflicts with other services during development, we have a reserved port range for this project: 50180-50189. Please use a port within this range when adding a new service.

| Port | Protocol | Service | | ----- | -------- | --------- | | 50180 | HTTP | Storybook | | 50181 | HTTP | Proxy |

Repository Secrets & Variables

| Name | Description | Type | | ---------------- | ------------------------------------------------------------------------------ | -------- | | MY_GET_API_KEY | The API key with push permissions to the MyGet feed to publish the NPM package | Secret |

Dependencies

To ensure compatibility, peerDependencies allow both versions:

"peerDependencies": {
  "react": "^18.0.0 || ^19.0.0",
  "react-dom": "^18.0.0 || ^19.0.0"
}

This ensures that when other projects install this component library, both React 18 and 19 will work without conflicts.

🌐 Internationalization

This project includes built-in internationalization support using react-intl. For detailed documentation on how to use and implement translations in your application, see the Internationalization Guide.

Multi-Tenancy

This project includes built-in support multi-tenancy. For detailed documentation on how to use, see the Multi-tenancy Guide.

Authentication

This project contains a centralized and an opionated way to handle authentication related functionalities. For detailed documentation on how to use these abstraction, see Authentication Guide