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 Nuxt / CSS / TS to customize Finder. Files you need are located inside Finder/**/ 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.
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.
Nuxt.js Official website: Nuxt is a free and open source JavaScript library based on Vue.js, Nitro, and Vite. Nuxt is inspired by Next.js, which is a framework of similar purpose, based on React.js. The framework is advertised as a "Meta-framework for universal applications

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

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.

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, TypeScript, sass, etc. The development server is accessible at http://localhost:3000.

step 3

Inside your command line tool type:npm run build

Generates a .output directory with all the production files.