Release candidate is the first stage with official support and when we recommend partners to start using it in projects. Features are not ported 1:1 from the MVC accelerator, so please update yourself on the details by reading the docs and checking whether the features you need are built or still planned.
Read more about the features being built and planned
Note
To be able to use the React accelerator, the customer need to be on the Litium Commerce Cloud offer. For more information, contact your partner responsible.
Technologies and frameworks
- NextJS framework
- React, React Server Components
- TailwindCSS
- Apollo Client to query data from GraphQL server
- ESLint to find and fix problems in JS/TS
- Prettier to format code
- Typescript
- Jest for running unit tests
- Playwright for running end-to-end tests
- Images are optimized by Litium Image Optimization
Development
Please check the Get started on how to configure and start development.
Folder structure
The project was created by using create-next-app tool and is pre-configured with Typescript, Tailwind, ESLint, Prettier, Jest and Playwright. All client resources are located in the src\client folder. It includes the following items:
app: NextJS's app directory which was introduced in NextJS 13, which supports React Server Components.
components: React components.
e2e: End to end tests.
models: model interfaces.
operations: GraphQL's fragments and mutations.
public: static files like icons, images.
scripts: scripts to be used when building project.
services: service functions.
stores: state management's stores
styles: Tailwind's base styles and extensions.
utils: utility functions.
.env: environment variables configuration file. For more information, please check Get started page on how to set variables values.
tailwind.config.js: Tailwind's configuration file. To make it easier to override and extend stylings, the project is configured and using abstract color names and Tailwind's scale units. The theme then can be modified or extended by updating tailwind.config.js file. Please check Theme configuration for more information .
Related