Irrigation Pi Frontend

Environment setup

Install Nodejs using nvm.

Install Nodejs version 20 using nvm

nvm install --lts=iron

Activate Nodejs v20 and install global packages

nvm use lts/iron
npm install -g npm@latest @ionic/cli@latest @angular/cli@latest openapicmd@latest

Development setup

Install frontend dependencies

cd frontend && npm clean-install

Start fronted development server

nvm use lts/iron
cd frontend && ionic serve

Development server configurations

The ionic serve command takes the same configuration arguments like the ionic build command. The configurations differ in which backend URL is used by the frontend. See also Build configurations

ionic serve --configuration=development # default
ionic serve --configuration=production

Openapi

Generating type definitions

irrigation-pi run backend
openapi typegen http://localhost:8000/openapi.json > frontend/@types/openapi.d.ts

Deployment

Build production frontend application

nvm use lts/iron
cd frontend && ionic build

The frontend application is compiled to static HTML and JavaScript files into the fronted/www/browser directory. It can be served using a web server.

Testing production build locally

The production build can be served locally to test wether it compiled successfully.

npx http-server --port=8100 --proxy http://localhost:8100\?  www/browser

Build configurations

The frontend build has 2 configurations:

• production (default)
  • Uses http://raspberrypi.local/api as backend URL
• development
  • Uses http://localhost:8000/api as backend URL

Production

The production build configuration is the default. Hence the two commands are equivalent:

ionic build --configuration=production
ionic build # equivalent to above

Development

Development builds can be made using the following command:

ionic build --configuration=development