We’d be taking off from where we stopped the last time. If you were able to start a new App like I explained in the previous article, congratulations!
Now I’d go ahead to explain the file/folder structure of the project you created, and then explain how to build the APK and IPA on your Android and Apple Devices (Tablets, Phones) respectively.
If you were able to start a new project in the last lesson and you successfully served your project with “ionic serve”, you should see the below App in your default web browser.
Also, your Ionic project folder should look like this;
Explanation of The Project Structure
- bower.json: It is used for managing your app’s dependencies via the bower package management tool. By default, the Ionic Framework is the only dependency that is added in a fresh App.
- config.xml: This is the configuration file for Cordova, it contains information about the App such as Name, Description, Author, Contact Information and Preferences.
- gulpfile.js: This file is used for compiling SASS and other Ionic Framework specific tasks via the gulp task runner.
- ionic.config.json: This is used for the configuration of the ionic CLI tool.
- node_modules: This contains all NPM packages installed locally into your project. The
package.jsonfile in the app root defines what libraries will be installed into
node_moduleswhen you run
- pacakge.json: Contains file used by NPM where we define packages and dependencies to install and can specify scripts to run.
- platforms: Contains the files for the various native platforms that the App would be installed upon.
- plugins: It contains all the Cordova plugins installed in the App.
- resources: Contains the splash screen images and App icons.
- scss: Stores Ionic’s SCSS file, but you can (optionally) add your own SCSS files too.
- www: This is is the heart of your project, the files and folders in it are discussed below.
The Heart of The Project
- css: This is where you store all your css (stylesheet) files.
- fonts: This contains the fonts used in your project.
- img: Contains all your image assets.
app.jsfile, and sometimes will have a
controllersfolder for your app’s controllers and a
servicesfolder for any services you have.
- lib: Any external libraries will be placed in here. To start, only Ionic shows up in this folder. You can go ahead to customize your App.
You can go ahead to customize your App. Visit the Ionic Framework for a complete documentation.
Building For Android
Now to generate an APK that can be installed on your android device. Once inside your project directory, in your command prompt or Code Editor integrated terminal, run the following commands;
ionic cordova platform add android
ionic cordova prepare android
ionic cordova build android
The generated APK to be installed on an Android device would be found in this directory;
Building For iOS
To generate an IPA that can be installed on an iPhone. Once inside your project directory, in your command prompt or Code Editor integrated terminal, run the below commands;
ionic cordova platform add ios
ionic cordova prepare ios
ionic cordova build ios
You can get then go ahead to navigate to the below directory;
Here you would find an XCode file usually of extension,
projectname.xcodeproj this file should be opened with Xcode where you can then archive an IPA to be installed on an iPhone.
By now, you should have a functioning App both on your Android and Apple phones.
Hint: To avoid having to generate an APK or IPA to be installed on your phone every time before testing, you can install the Ionic DevApp on your mobile device. This allows your App to run on a device at real time as it is running on your local machine. Even changes you make in real time to your source code reflects automatically on the App running on you phone.
I hope the two articles have been helpful and would kickstart someone to begin the process of mobile development. Please drop your comments and suggestions in the comments section, if you have any.
Till Next Time! ✌