Getting started

Once you have a good understanding of the concepts and technologies involved, getting started with developing customizations for the Lime CRM web client follows a straightforward process. This section will guide you through the initial setup and provide a basic workflow for developing customizations.

Setting Up Your Development Environment

Before you can start developing, you need to set up your development environment. This includes installing necessary tools and software, and setting up your first project.

1. Install Node.js:
   Node.js is required for development. Ensure you have it installed, or download it from the official Node.js website. Make sure to install the LTS (Long Term Support) version.
2. Install lime-project:
   lime-project is an internal tool used for creating solutions/packages and scaffolding components, among other things. To install it globally, follow the instructions listed here

3. Create a new solution:
   With lime-project installed, you can create your first solution or package. In your terminal, navigate to the directory where you want to create your new project, and run:

   lime-project new solution
   

This will create a new directory for your solution with the necessary files and directories.

Developing Your First Customization

After setting up your development environment, you're ready to develop your first customization. Here's a basic workflow to get you started:

1. Scaffold a new web component:
   With lime-project, you can scaffold new web components for your customization. From your project directory, run:

   lime-project generate web-component my-first-component
   

   This will create a new web component in your project under the frontend/src/components directory.

2. Implement your component:
   Open the newly created component file (my-first-component.tsx) in your favorite code editor. This is where you'll implement your component's logic and presentation. Make sure to utilize the platform and context properties injected by the platform to interact with Lime CRM. Feel free to structure and rename components as you see fit. However, never alter the generated tag name of the component. It's crucial to maintain the tag name's uniqueness among all customizations.

3. Build and test your customization:
   Building and testing your project is handled by NPM scripts. To initiate the build process, you need to run the following command in your project directory:

   npm start
   

   This command will build your project and set up a watch process that rebuilds your project whenever changes are made to your source files. Make sure to test your components frequently during development to ensure that they function as expected.

4. Configure Your Component in Lime CRM Admin:
   After building your component, you need to configure it to be displayed within the Lime CRM application. The most basic place to start with is the start page. To do this, follow these steps:

   • Log in to Lime CRM Admin.
   • Navigate to the start page settings.
   • Add a new component configuration and specify your component by its unique tag name.
   • Configure additional settings as needed, such as display rules or component properties.
   • Save your changes.

   After completing this step, your new web component should be visible on the start page of your Lime CRM application. If it doesn't appear, ensure you've correctly configured the component in Lime CRM Admin, and that your component's tag name matches the one used in the configuration.

   Remember that components can also be configured to be displayed in different parts of the application, such as on object cards, in custom tabs, or even as new routes that can be navigated to. The exact configuration will depend on your component's purpose and functionality.

As you continue developing, you'll get more familiar with the workflow and the tools available to you. Remember to leverage the full potential of web components and the Lime CRM platform to create efficient and effective customizations. Happy coding!