Front-End setup and compilation
Last updated
Was this helpful?
Last updated
Was this helpful?
In our ambition to stay up to date and bring to our product high quality standards, Front-End was made using Angular framework together with Kendo UI Angular, you will see a clean, fast and native code easy to build and setup.
On this guide we will learn how to setup front-end environment, there are a couple prerequisites that we need to follow before start.
Kendo UI for Angular has high-performance Angular UI components without any jQuery dependencies that we implement and customize on our Front-End, this is installed as discrete, scoped npm packages on package.json.
As we previously mention, Angular is the backbone of our front-end code and before proceeding we need:
Node.js
Node Package Manager (NPM)
Install angular CLI (Command Line Interface) using yarn or npm install.
And finally execute :
or
Yarn is a package manager as same as NPM, Its purpose is to solve a handful of problems that are faced with NPM, the main reason to use Yarn is because installing packages is even faster however is not consistent than NPM. Yarn is only a CLI client that fetches modules from the NPM registry.
In order to use yarn you must install it globals.
Note: We recommend the NPM due the newest versions are faster as Yarn but with high consistency to avoid vulnerabilities.
Once everything is installed use npm command to build project
Once everything is installed you can compile samples using commands like:
Differences with and without -c production
There are differences when the applications is builded with -c production parameter. The production build produces an efficient deployment application, the bundles size decrease producing an improve in performance loading the app, the components code is minified, the css is minified and packaged, better security reducing possibilities of client-site HTML and injection attacks, the app is fewer asynchronous requests and faster rendering.
ng serve serves an Angular project via a development server and build modules,-o flag opens a default browser on the specified port.
Setup and compile process is complete, you will be able to execute testing commands like:
npm test to running unit tests over the WinformsComponents repository path.
npm run cy:open to running Component Integration Tests (CIT) over Samples application using Cypress with UI deployment.
npm run cy:test to running (CIT) without UI and only displaying console information.
For new Kendo components is highly recommended to check the proper package installation at and follow their instructions.
Here is the complete guide by Angular.
you can find more yarn useful commands.