Radzen applications on a mobile device

Radzen applications are responsive by default which means that they work on a variety of devices - desktops, laptops, tablets or phones.

In this blog post I will show how to use Apache Cordova to create native iOS or Android wrapper of a Radzen application.

Install Cordova

Cordove is shipped as a NodeJS package. To install it run the following command from a terminal or command prompt.

npm install -g cordova

Create a Cordova application

The next step is to create a cordova application which will serve as the wrapper of the Radzen application.

Cordova can do that via the cordova create command. For demo purposes I will wrap the RadzenCRM demo so I will run the following command.

cordova create RadzenCRM com.radzen.crm "Radzen CRM"

Build the Radzen application

Cordova applications run on a mobile device and cannot host the server-side layer of a Radzen application. We will use the manual build procedure.

1. Go in the client directory of your Radzen application.
2. Edit the client\src\environments\environment.prod.ts file and change all data source URLs to your production server:

   export const environment = {
     serverMethodsUrl: 'http://yourserver/',
     crm: 'https://yourserver/CRM',
     securityUrl: 'http://yourserver/auth',
     production: true
   };
   

   For the RadzenCRM demo those are:

   export const environment = {
    serverMethodsUrl: 'https://crm.radzen.com/',
    crm: 'https://crm.radzen.com/odata/CRM',
    securityUrl: 'https://crm.radzen.com/auth',
    production: true
   };
   

3. Run npm install.
4. Create a production build within the wwwroot directory of your Cordova application:
   • Windows: .\node_modules\.bin\ng build --prod --base-href . --output-path <some-directory>\RadzenCRM\www
   • MacOS: ./node_modules/.bin/ng build --prod --base-href . --output-path <some-directory>/RadzenCRM/www

Run in emulators

We can now test the application in the Android or iOS emulators.

Android

First make sure that you have all Android prerequisites installed. Refer to the Cordova documentation for more instructions.

1. Open command prompt (Windows) or terminal (macOS) and go to the directory of your Cordova application.
2. Run cordova platform add android.
3. Then run cordova emulate android. After building the application Cordova will run it in the configured Android Virtual Device.

iOS

The iOS emulator works only on macOS and will need a working XCode installation.

1. Open terminal (macOS) and go to the directory of your Cordova application.
2. Run cordova platform add ios.
3. Then run cordova emulate ios. Cordova will build the application and it in iOS Simulator.

Cheers!