Introduction
This tutorial describes how to develop pure angular application using c8y/client and deploy to cumulocity tenant.
Prerequisite
- Create a new tenant: https://cumulocity.com/try-for-free/
- Any IDE like Visual Studio Code or commandline tool to access terminal
Install Angular CLI
- npm install -g @angular/cli will install the angular cli on your system
Develop the angular project
- ng new < projectname > - this command will create a new project.
- Angular Routing can be selected Yes or No based on your requirement. More details on angular routing can be found here.
- You can select the type of stylesheet you require.
- npm install @c8y/client - Navigate to the newly created project and execute this command to install c8y/client modules to the project
- ng serve - use this command to start running the project on localhost.
- You can navigate to http://localhost:4200/ to verify if the angular application is running
Cumulocity Specific Development
Add proxy details
Create a file named proxy.conf.json and add it to the project within src folder. The file content is as below
{ "/": { "target": "<your cumulocity tenant name>" , "secure": false, "changeOrigin": true, "logLevel": "info" } }Modify the file angular.json, add reference to the newly created proxy file
For demo purpose, you can add cumulocity authentication details to app.module.ts file. In production application, authentication has to be implemented seperately.
- app.component.ts - add the custom code to this file based on your requirement. The below example is to list all the device managed objects.
- app.component.html - add your UI related code here. The below example is to print the managed object details.
- ng build --href-base /apps/< your app name >/
- This command will build the application and a new folder named dist will be created within the project with all the files required to deploy the application.
- Create a file named cumulocity.json. The content of this file can be simple as below
- Place the cumulocity.json file within the dist/< yourapp > folder.
- Zip the contents within the dist/< yourapp > folder.
Angular application upload
- Upload the zip file to your cumulocity tenant under Administration -> Own Application -> upload web application
- Your newly deployed application will be available in the app switcher.
