Strategy , Insights, tips on AI first development, App development, Online Marketing

Main Menu

  • Mobile App Development
    • App Tutorials
    • App Reviews
  • Website Guides
  • SMBs & Startups
  • News
  • Guest Posts
  • About
    • Mobile App Development Company Delhi, India
    • Mobile App Development Company Gurgaon
    • Mobile App Development Company Dallas, Florida
    • Website Design Company Delhi
    • WordPress Website Development Company

Strategy , Insights, tips on AI first development, App development, Online Marketing

Header Banner

Strategy , Insights, tips on AI first development, App development, Online Marketing

  • Mobile App Development
    • App Tutorials
    • App Reviews
  • Website Guides
  • SMBs & Startups
  • News
  • Guest Posts
  • About
    • Mobile App Development Company Delhi, India
    • Mobile App Development Company Gurgaon
    • Mobile App Development Company Dallas, Florida
    • Website Design Company Delhi
    • WordPress Website Development Company
  • How to modernize your Legacy Software & Systems using AI & without disrupting business ?

  • How to Select a Mobile App Development Company: 12 Questions Every Client Should Ask

  • How to find a Top Dot net software development company in India

  • 12 proven Checkout Optimization Strategies for Online Retailers in 2026 & beyond

  • 8 Tips & Techniques for Product Discovery Interviews for Product Managers

Mobile App DevelopmentMobile App Tools
Home›Mobile App Development›Phonegap Tutorial 2: Building , Running & Managing your First Phonegap Application

Phonegap Tutorial 2: Building , Running & Managing your First Phonegap Application

By Umesh Sethi
March 13, 2018
5627
0

Assumptions: Phone Gap has been installed, development environment is ready. First basic Phonegap project has been created. Basics of CLI are clear.

So assuming the basic project has been created lets see how to manage, compile and run it.

Serving the Application on Browser

PhoneGap has a really useful command that you will be using the most while developing the application. It basically creates a local Node.js web server with the live reload functionality that serves the application’s content similar to a regular web page. The application works the same way as it does on the mobile device but in this case we are running it in the testing environment.

It was intended to be used with the PhoneGap Developer app but as it is a regular web server and web browser, you can open it on a specific port. I would recommend that you use the Google Chrome web browser as it has great development tools for debugging the pages.

Running a local web server with the content of the application is simple by running the following command:
phonegap serve

The app will run by default on port 3000. It will auto-reload the current page if it detects changes in any of the JavaScript, CSS, or HTML files. To run it inside the web browser, just open the http://localhost:3000 page.

There are a few options that can be used with the command; however, only one is worth mentioning: assigning a different port number. For example, if we want to run on 4000, we will run the following command:

phonegap serve -p 4000

The command will run until it is interrupted by the keyboard shortcut Ctrl + Z.

Note: Though it is quite useful, it is worth knowing that it is not meant to be used for testing everything in a computer’s web browser. The features that require a native API are not reachable, so this mode is useful for building and testing the user interface. Below we’ll have a look at actually making the app run on native devices and the steps involved.

Even Designers can become developers with Phonegap

Even Designers can become developers with Phonegap

Preparing a Phonegap application

Before building an application, all the required source code and assets need to be copied to a specific platform in order to have the latest source code.

To be able to prepare the web assets from the www/ directory, we need to run the following command:

phonegap prepare

You are going to use this frequently, but there are times when you want to prepare a specific platform. You can optionally list them as shown in the following command, where we will prepare the assets only from the android platform:

phonegap prepare android

Once this process has been done, the project is ready to be compiled in a binary application by running the compile command or manually building it in the IDE.

Compiling a PhoneGap Application

After finishing the process of preparing the web assets in specific directories for every platform, we will want to compile the actual code. The project is ready for us to compile a binary application that can be run on the devices.
Here is the simple command to compile your app.

phonegap compile android

As both of the commands are related, we might want to run both of them one after another and so it is better to run both of them in a single line, as shown in the following command:

phonegap prepare android && phonegap compile android

As the previous command is quite common, we have unified it in a single command that prepares the web assets and then compiles it in a binary application. The simplest method is to run the following command:

phonegap build
But beware, this is not the most appropriate way as it builds a binary for every platform and you would ideally want to build and test for a single platform first.

So for that we have:
phonegap build android

I would recommend that you run it with a single platform of developing the application. When the features are done and the application moves to the intensive testing phase, you should build all the platforms at the same time

Another time when you need to run the build command is when you make a release version of the binary application that is ready for deployment to the application store. You can prepare a release version by running the command with the -release option. This command prepares the unsigned release APK file as follows:

phonegap build android —release

Default settings will create an APK file in the debug mode, whereas adding the release option flag will create the APK file in the release mode.

Let’s finally look at running the application now on the device.

Running a PhoneGap Application on device

Building an application and manually installing it on the device can be timeconsuming, so there is another command that does all the work for you. The run command is an all-in-one command that prepares all the web assets for the selected platforms. It compiles the assets in an installable application. After compilation, you can install it in the actual device or an emulator. To run the default application, run the following command:
phonegap run android

Well, it can work without specifying the platform, but that is not really practical as you will not be emulating it on all the device types together not to mention that this command is pretty resource intensive as it is.

Here are some options to be used with the run command:
-emulator: This command is used if you want to build and run the application in the emulator in your computer and since emulator is memory- and processor-intensive, it might affect your computer’s performance and it is recommended that you do not use emulators with a high-screen resolution as the performance might be affected a lot. Run the following command:

phonegap run android —emulator

-nobuild: The nobuild option is useful if you have already built the application before and just want to run it in the device. Building the application is the most time-consuming part so if there were no changes in the code, then you can run the application faster. It is also great for testing on multiple devices sequentially. After you are done testing with one platform, you can run it on another one. An example for running nobuild on an Android is as follows:

phonegap run android —nobuild

Using PhoneGap Build Service

We’ve talked about building the app locally, but you can also use the PhoneGap build service to build your apps.
This is available here, available by Adobe. This is a pretty helpful service with some advantages like:

  • if you use local PhoneGap, Windows applications can be built only on the Windows computer, iOS applications can be built on Mac OS computers only, and Android can be built on any operating system. While using PhoneGap Build, you can build for all three platforms, no matter which OS you are using.
  • They do the work for you in the cloud and your app will always be built with the most up-to-date SDK for the platform you are targeting.
  • Add team members and create roles within your PhoneGap Build projects. Speed up collaboration.

And Yes, they do have a free plan, although somewhat limited to get you started.

Well, that’s it folks for our second tutorial in the PhoneGap Series. Our first tutorial on how to create your first Phonegap app is also there by the way.

If you are looking for an Cross platform App development company in India or a PhoneGap, Cordova app Development Company in India, do contact us on our website.

We also provide Magento Store setup and Installation services from India and can create Magento Powered mobile apps.

Previous Article

Creating your First Phonegap application

Next Article

Why and When to use Ionic for ...

Umesh Sethi

Our company helps convert ideas into mobile apps. We work with international clients and clients in Delhi NCR. As the Project Manager i like sharing tips, tricks and suggestions with clients and partners

Related articles More from author

  • Creating a Requirements Document for Mobile App Development
    Mobile App DevelopmentSmall Businesses & Startups

    What should a Requirements Document (or a RFP) for your Mobile App Contain ?

    October 17, 2017
    By Umesh Sethi
  • Android Tutorials & TipsMobile App Development

    10 Best Practices for Mobile App Development in 2018 (updated for 2019)

    April 18, 2018
    By Umesh Sethi
  • mobile app development, mobiile app programming, Java vs. Kotlin
    Mobile App Development

    Kotlin vs. Java for Android App Development – And the winner is….

    September 9, 2017
    By Umesh Sethi
  • What features should your On-Demand App have ?
    Mobile App DevelopmentSmall Businesses & Startups

    What Features to add in your On Demand App Like Swiggy, Food Delivery etc., Uber of X etc.

    February 27, 2019
    By Abhay Anand
  • Top 10 Bitcoin Apps for 2018
    Mobile App DevelopmentNew App ReviewsNews

    The Best Bitcoin mobile apps to watch out for in 2018

    December 23, 2017
    By Saurabh Kumar
  • Mobile App Development

    How to Install , Manage, Remove Plugins in Phonegap using CLI, Plugman

    March 26, 2018
    By Abhay Anand

Recommended Articles

  • How to select the right design theme for your website
    Web

    Tutorial 4: How to choose the best theme for your business website ?

  • Optimising your Play Store Listing, ASO
    Android Tutorials & TipsMobile App DevelopmentMobile App ToolsSmall Businesses & Startups

    How to Optimise your App on Google Play Store, ASO for Play Store Listing ?

  • 5 tips to launch your ecommerce store successfully
    Web

    5 practical tips to make your Ecommerce Store a Success

  • Choosing a great domain name for your website
    Small Businesses & StartupsWeb

    How to Choose the Best Domain name for your website (20 tips , steps & tools)

Check our Earlier Posts

  • April 2026
  • March 2026
  • November 2020
  • October 2020
  • September 2020
  • August 2020
  • July 2020
  • June 2020
  • May 2020
  • April 2020
  • March 2020
  • February 2020
  • September 2019
  • March 2019
  • February 2019
  • January 2019
  • December 2018
  • November 2018
  • April 2018
  • March 2018
  • February 2018
  • January 2018
  • December 2017
  • November 2017
  • October 2017
  • September 2017

Our Terms of Use | Partners

Visit blogadda.com to discover Indian blogs
Featured on Blog Directory
Creative Spark Solutions is a web & app development company based in Delhi, India. With this blog we continue to connect with developers, clients and anyone interested in mobile & tech news, happenings & articles.
2017, Creative Spark Solutions helping clients in Web, Mobile & Software