Skip to content
Toyota Motor Europe DXP Reference Guide

JavaScript

Corepack

Section titled “Corepack”

You should use Corepack to manage your package manager dependency.

Terminal window
# Only needed once per Node.js install
corepack enable
# Use this to set / update your package manager
corepack use pnpm@latest

This will set packageManager in your package.json.

{
  "packageManager": "pnpm@9.1.1+sha256.9551e803dcb7a1839fdf5416153a844060c7bce013218ce823410532504ac10b"
}

pnpm

Section titled “pnpm”

Use PNPM or NPM as your package manager to manage dependencies and build scripts. Always commit your lockfile.

ESLint

Section titled “ESLint”

ESLint helps maintain code quality and consistency by enforcing coding standards and catching common mistakes.

A DXP ESLint config is available.

Prettier

Section titled “Prettier”

Prettier is an opinionated code formatter that automatically enforces consistent code styles and formatting rules across a project.

A DXP prettier config is available.

TypeScript

Section titled “TypeScript”

Use TypeScript for static typing and enhanced developer tooling. TypeScript helps catch errors early and improves the overall developer experience, especially in larger projects.

TypeScript does add some overhead you would want to skip for config files and scripts.

A DXP TSConfig is available.

Type-safe data

Section titled “Type-safe data”

When data comes into your application you should use a TypeScript-oriented data validation library to give you strong type-assurance with a simple developer experience.

  • Zod: Great for the back-end. Not so great for the front-end as it employs the builder pattern, which prevents any tree-shaking.
  • Valibot: For front-end we recommend valibot.
  • Typebox: For API boundaries we recommend typebox which acts as a bridging library between JSON schema and TypeScript.

UI

Section titled “UI”

React

Section titled “React”

For complex user interaction we advise using React (^18).

Render Strategy

Section titled “Render Strategy”
  • CSR: Client-side rendering is the default rendering strategy. It’s the most common and easiest to implement.
  • SSR: Server-side rendering is used for performance optimization and SEO purposes. It’s more complex to implement and maintain.
  • Hybrid: A combination of both CSR and SSR. It’s used for performance optimization and SEO purposes.

State Management

Section titled “State Management”

Feel free to use React Context directly for simple global state management.

The most used state management libs across teams are Redux and Zustand.

We’re looking into provided a shared global state management setup.