Dev environment setup
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 installThis 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 installThis 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 devRuns 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 buildGenerates a /dist directory with all the production files.