DedrisFramework DedrisFramework
GitHub Get Started
Get Started

Build your first Cordova app with DedrisFramework

This guide takes you from zero to a running app on a real device — using nothing but HTML, CSS and JavaScript. No prior native experience required.

1

Prerequisites

Before you begin, make sure you have a recent version of Node.js (which includes npm) installed. You can check with:

terminal 
node --version
npm --version

You'll also need the native SDKs for the platforms you want to target:

  • Android — Android Studio (provides the Android SDK and a device emulator).
  • iOS — Xcode, available on macOS only.
💡 You can start building on Android from Windows, macOS or Linux. Building for iOS requires a Mac with Xcode installed.
2

Install Cordova

Install the Cordova command-line tool globally with npm:

terminal 
npm install -g cordova

Verify the installation:

terminal 
cordova --version
3

Create a project

Scaffold a new app. The three arguments are the project folder, a reverse-domain app ID, and a display name:

terminal 
cordova create myApp com.dedris.myapp MyApp
cd myApp

Even faster: scaffold the project with the DedrisFramework starter already inside — dedris.css, a few example screens and the component library are wired up for you out of the box:

terminal · recommended 
# Creates the app with the DedrisFramework template pre-installed
cordova create myApp com.dedris.myapp MyApp --template cordova-template-dedris
cd myApp
🧩 The --template flag tells Cordova to base your new project on a starter package instead of the blank default. cordova-template-dedris is the official DedrisFramework starter — you can also point --template at a git URL or a local folder if you maintain your own.

Your app's web content lives in the www/ folder — that's where your HTML, CSS and JavaScript go, and where DedrisFramework widgets are dropped in.

4

Install DedrisFramework

Now bring DedrisFramework into your project. If you scaffolded with --template cordova-template-dedris in the previous step, it's already included — skip ahead to platforms. Otherwise, add it to a blank project in two steps.

1. Add the framework files to your www/ folder:

terminal 
# From your project root
mkdir -p www/css www/js
curl -o www/css/dedris.css https://dedrisframework.com/css/dedris.css
curl -o www/js/dedris.js  https://dedrisframework.com/js/dedris.js

2. Reference them from www/index.html:

www/index.html 
<link rel="stylesheet" href="css/dedris.css">
<!-- …your app markup… -->
<script src="js/dedris.js"></script>
🧩 That's the whole framework — plain CSS and JavaScript, no build step and no dependencies. You're ready to drop in components.
5

Add platforms

Tell Cordova which platforms you want to build for:

Android Apple iOS
terminal 
cordova platform add android
cordova platform add ios

Check that your environment is ready for each platform:

terminal 
cordova requirements
6

Run your app

Build and launch your app on a connected device or emulator:

terminal 
cordova run android

# or, to build without launching
cordova build ios
🎉 That's it — you now have a native app running from web code. Next, let's make it look great with a DedrisFramework widget.
7

Add a DedrisFramework widget

Open www/index.html and drop in a starter widget. Here's a simple button — copy it straight from the Components gallery:

www/index.html 
<link rel="stylesheet" href="css/dedris.css">

<button class="dx-btn dx-btn--primary">
  Tap me
</button>

Reload the app and your styled button is ready. Browse the full library to find more.

Browse components →