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 Cordovalink

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 applicationlink

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 applicationlink

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 emulatorslink

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

Androidlink

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.

iOSlink

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!