In this workshop, we will start from zero (no repo) and we will finish with an Angular application that consumes data from an API. As a prerequisite you need:
- Node.js
- Angular CLI
npm i -g @angular/cli
- Ignite UI CLI
npm i -g igniteui-cli
- Visual Studio Code
From this point onwards we start the workshop. Steps we will take in this workshop.
- repository setup
- front-end angular repository
- back-end setup (node.js in same repo)
- SSR
- data setup (back-end)
- setup up data services (front-end)
- setup up UI fast with reusable UI components (Ignite UI for Angular)
- data transformations – pipes
- Setting up services for cross-component communications
- unit testing – optional if time allows
- deployment – optional if time allows
To start with our project, we will setup a new repository with the igniteui-cli
.
ig new
And then we follow the wizard by choosing the Angular framework and the Ignite UI for Angular project template. Choose custom styles.
We will kill two birds with one stone in this step. We will add SSR (server-side rendering) and a node express server with API endpoints.
ng add @nguniversal/express-engine
Then lets run it to test:
npm run dev:ssr