# Customization

Learn how to customize your Concord CRM installation, as the code is not obfuscated, you will be able to perform customization easily.

Concord CRM is configurable with tons of options but in some cases you will need to customize the code for your requirements to add new feature or modify existing features.

You will be able to perform customization as long you have a developer knowledge and you are familiar with Laravel and VueJS and you can configure a development environment on your PC.

In order to perform any customization, you will need to be familiar with common development tools like working with NodeJS, NPM, Composer, Vite as well with Laravel, VueJS and Tailwind CSS.

The tech stack mention above are used to create Concord CRM as SPA (single page application) with API using Laravel and PHP.

Please note that if you want to customize a component and add your own custom code, e.q. you want to customize the navbar, you cannot just edit a regular `.html` or `.php` file save it and see the changes on your installation, most of the HTML is compiled for production with Vite and it's rendered on the flow (see below Javascript Files).

- Customization support is not included with the purchase, we cannot provide customization that extended default Concord CRM features, if you don't have the knowledge for customization, it's highly recommended to hire a professional to do the job for you.

- The guide here is just a general guide to help you get started, if you are already familiar with Laravel, VueJS and Tailwind CSS, feel free to use your own development techniques to customize your Concord CRM installation.

- We can't teach you how to add new features or adjust existing ones, it's just too broad, you will need to be familiar with PHP, Javascript, Laravel, VueJS, feel free to explore the code to get more familiar with Concord CRM code and find suitable way how you can develop your requirement.

- We cannot provide general web hosting and/or general PHP/Javascript support.

- We cannot provide general Laravel and development support.

- We cannot provide HOW-TO advice on if Concord CRM is capable of doing what you want/need.

## Development Environment

Before even starting to customize Concord CRM, you will need a development environment in place in order to perform any customization. If you are not familiar with Laravel, we highly recommend to first read Laravel Installation Guide

We use Laravel Homestead to create a virtual machine for the development environment, however, if you are already familiar with Laravel and use different environment, you are free to do so, for example, you can use Docker with Laravel Sail.

- Make sure you have installed Git on your local machine.
- Install Laravel Homestead globally.
- If you haven't already, install NodeJS and NPM.

## Configure Concord CRM

After your development environment is configured, you will need to perform clean installation in Concord CRM.

- We believe that you already installed Laravel Homestead, extract the Concord CRM files e.q. in `~/code/concordcrm`.
- Perform fresh Concord CRM installation.
- Via Homestead command line run `composer update` to install the dev dependencies.
- Install NPM packages by running `npm install`.
- Edit the `.env` file and set the `APP_ENV` config key to `local`.
- Edit the `.env` file and set the `APP_DEBUG` config key to `true`.

## Javascript And CSS files

The core CSS files are located in `resources/css` and the core Javascript files and components are located in `Modules/Core/resources/js`, this folder contains re-usable Vue SFC like UI components.

However, the actual features Javascript and CSS files are located in the `Modules/*/resources/js` directory, where the `*` is a module name.

For example, the contacts module Javascript files and Vue components are located in the `Modules/Contacts/resources/js`

You are free to edit the files in the directories if you are in need, please keep in mind that those files are development files and any changes to the files won't be compiled unless you are watching the files by running the npm command `npm run dev` in the root of Concord CRM directory.

The `npm run dev` will start a Vite development server and will use HMR to reflect any changes, please note that `npm run dev` should be used for development purposes only, later, you will still need to build the files with `npm run build`.

After the files are compiled, they will be placed in the `public/dist` directory.

To learn more about Vite, make sure to check the official Vite documentation and Laravel documentation for Vite.

## Deployment

After you finish making any changes to your Concord CRM instance, you will need to prepare Concord CRM for deployment on your live server.

- Run `npm run build` to build the Javascript and CSS files for production with Vite.
- If you installed development composer dependencies run `composer install --no-dev`.
- Upload the files to server (without `node_modules` folder and including the `vendor` folder).

Of course, if you are using build service like Envoyer or Forge, you can include the build scripts mentioned above in your build script.

## Conflicts With Concord CRM Updates

If you decide to edit Concord CRM and customize it for your requirements, we highly recommend to re-think your logic on how you will be merging changes when Concord CRM update is released, you can use Git to maintain your own repository for Concord CRM then merge the changes when new released of Concord CRM is published.

We can't provide a guide on how to achieve this, but if you don't have the knowledge or ability to maintain the changes we highly recommend to use your customized version if fits for your requirements, you don't need to perform update.