Dev environment setup

Please note: this step is absolutely optional. It aims for advanced users who want to speed up development process with professional grade Front-End toolset shiped with Finder. If you are not familiar with these tools and have no time to dive in you can still use plain Vue / CSS / JS to customize Finder. Files you need are located inside Finder/dist folder. In this case you can skip this and next sections. Happy coding :)

Finder is built using modern development toolset.

Bootstrap Official website: Latest version of the most popular HTML, CSS, and JS framework in the world. Finder is built on Bootstrap and heavily depends on it. Finder has all BS5 components + bunch of own plugins and components.
Sass (Syntactically Awesome Style Sheets) Official website: Sass is the most mature, stable, and powerful professional grade CSS extension language in the world.
Vue.js Official website: Vue.js is an open-source model–view–viewmodel front end JavaScript library for building user interfaces and single-page applications. It was created by Evan You, and is maintained by him and the rest of the active core team members.
TypeScript Official website: TypeScript is a free and open-source high-level programming language developed by Microsoft that adds static typing with optional type annotations to JavaScript. It is designed for the development of large applications and transpiles to JavaScript.
Vite Official website: Vite is a local development server written by Evan You, the creator of Vue.js, and used by default by Vue and for React project templates. It has support for TypeScript. It uses Rollup and esbuild internally for bundling.

This section will explain how to setup professional Front-End development environment for fast and smooth Finder customization using these technologies.

Text Editor and Terminal (Command Line)

You can use any text editor at your disposal and available Command line tool (Command Prompt for Windows or Terminal on MacOS). Our personal preference is Visual Studio Code. It is free, has great buil-in terminal (console), built-in git client, debugging, huge extensions library and available for MacOS, Windows, Linux.

Installing Node.js and npm

In order to be able to setup Finder development environment you will need to install Node.js and its Package Manager (npm).

Node.js is absolutely free and available for download via its official website for MacOS, Windows, Linux systems. Download Node.js and npm here.

Learn more about Node Package Manager and available packages here: https://www.npmjs.com

Installing packages necessary for Finder development

When Node.js and npm is installed you are ready to install all dependencies necessary for Finder development.

Inside your command line tool type:npm install

This will start the process of installing all dependencies which are listed inside Finder/**/package.json file. Wait until installation is finished and jump to the next section Working with vite.

installation

step 1

Inside your command line tool type:npm install

This will start the process of installing all dependencies which are listed inside Finder/**/package.json file. Wait until installation is finished and jump to the next section Working with vite.

step 2

Inside your command line tool type:npm run dev

Runs the project locally, starts the development server and watches for any changes in your code, including your HTML, Javascript, sass, etc. The development server is accessible at http://localhost:8080.

step 3

Inside your command line tool type:npm run build

Generates a /dist directory with all the production files.