Skip to main content
Version: Next

Local Development

Requirements​

Before using the backend-side of the project, ensure that you have the following components installed:

Backend​

Getting Started​

  1. Clone the Synmetrix repository:

    git clone https://github.com/mlcraft-io/mlcraft.git
    cd mlcraft

  2. Run the initialization script:

    bash init.sh

Frontend​

Requirements​

Before using the client-side of the project, ensure that you have the following components installed:

Getting Started​

To install the client-side of the project, follow these steps:

# Clone the Synmetrix Client repository
git clone https://github.com/mlcraft-io/client-v2

# Navigate to the project directory
cd client-v2

# Install required packages using Yarn
yarn

# Start the client-side application
yarn start

After completing these steps, open your web browser and go to to access the Synmetrix client.

Usage​

For detailed guidance on utilizing the Synmetrix client and exploring its features, please consult the Synmetrix Documentation.

Storybook Integration​

Explore the interactive UI components and functionalities of the Synmetrix client using Storybook. Storybook provides a convenient environment to showcase and test UI components in isolation.

To launch Storybook, use the following command:

yarn storybook

Once the command is executed, navigate to

Code Linting​

Maintain code consistency and quality in the Synmetrix client by implementing linting. Follow these steps to configure linting in Visual Studio Code (VS Code):

Requirements:​

Configuration:​

  1. Install ESLint and Prettier VS Code extensions.
  2. Open your VS Code settings (settings.json) and add the following configuration:
{
  "eslint.enable": true,
  "eslint.format.enable": true,
  "editor.formatOnSave": true
}

This configures VS Code to run ESLint and Prettier on file save.

Component Structure​

In the Synmetrix project, components follow a consistent structure to enhance maintainability and organization. Each component typically consists of the following files:

  1. index.tsx: The main file containing the component's implementation. This file includes the React component code.

  2. index.module.less: A Less file containing the component's styles. Using module.less ensures that styles are scoped to the component and won't conflict with styles from other components.

  3. index.stories.tsx: A file dedicated to Storybook stories for the component. Storybook stories help in visually testing and documenting the component's variations and use cases.

  4. index.test.tsx: The file containing unit tests for the component using testing framework vitest. Writing tests ensures the reliability and correctness of the component's functionality.

Here's an example directory structure for a component named ExampleComponent:

/src
  /components
    /ExampleComponent
      index.tsx
      index.module.less
      index.stories.tsx
      index.test.tsx

Testing​

Ensure the reliability and correctness of the Synmetrix client by utilizing testing functionalities powered by Vitest. Vitest provides a robust testing framework to validate the behavior of your components and functionalities.

To run tests, use the following command:

yarn test

Executing this command will initiate the testing suite, allowing you to assess the client's performance and functionality. Any detected issues or failures will be highlighted, providing valuable insights for debugging and maintaining code quality.

Build​

Efficiently build and package the Synmetrix client with the following commands:

  • Build the Client:

    yarn build

    This command utilizes Vite to build the Synmetrix client.

  • Post-Build Tasks:

    yarn postbuild

    After the build, this command creates compressed archives (dist.tar.gz and dist.zip) of the generated distribution files.

  • Build Storybook:

    yarn build-storybook

    Use this command to build the Storybook for the client.

  • Serve the Built Client Locally:

    yarn serve

    This command previews the built client locally using Vite.

Incorporate these commands into your workflow to streamline the build process and prepare the Synmetrix client for deployment.

Conventional Commits​

We adhere to the Conventional Commits specification to ensure consistent and meaningful commit messages. The structure of our commits follows the pattern:

<type>[optional scope]: <description>

[optional body]

[optional footer(s)]

For a detailed understanding of Conventional Commits, refer to the Conventional Commits specification.