Front-End setup and compilation
In our ambition to stay up to date and bring to our product high quality standards, Front-End Architecture 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 Angular
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.
For new Kendo components is highly recommended to check the proper package installation at Kendo Webpage and follow their instructions.
Angular Framework prerequisites
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
Here is the complete quick start guide by Angular.
Yarn or Npm
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.
Here you can find more yarn useful commands.
Note: We recommend the NPM due the newest versions are faster as Yarn but with high consistency to avoid vulnerabilities.
WinformsComponents Compilation
Once everything is installed use npm command to build project
Samples Compilation
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 serveserves an Angular project via a development server and build modules,-oflag opens a default browser on the specified port.
Setup and compile process is complete, you will be able to execute testing commands like:
npm testto running unit tests over the WinformsComponents repository path.npm run cy:opento running Component Integration Tests (CIT) over Samples application using Cypress with UI deployment.npm run cy:testto running (CIT) without UI and only displaying console information.
Last updated
Was this helpful?