Cover for Ionic Blog

How to build an Ionic Mobile App – For Beginners

Jump to a specific topic

New to Ionic App?

Wondering what ionic is? Let me help you out…

Ionic is a great platform that uses standard web-based technologies to make your cross-platform app development fast and easy.

The best thing about Ionic is that it is open-source SDK and only targeted at building hybrid mobile applications. Ionic will provide you the flexibility of building cross-platform applications and make just one application and use for all including web, desktop, android, iOS hence saving your time and effort.

Prerequisites

Before starting, let’s make sure we have everything we need set up on our computer.

Node.js

Mac users: For OS X, download the .pkg file and take note of the last screen of the installer.

Windows users: Download either the MSI or the exe, whichever you prefer.

After you install Node.js, you can utilize the npm commands to get the packages.

Mac users: You should be able to use npm right from the terminal, assuming your PATH is configured correctly.

Windows users: You can use the built-in command prompt or Node.js command prompt.

sudo nom install -g
// -g is used to install node.js globally which makes it accessible through terminal.

After installing node.js and npm check if it has been installed properly, using following commands:

node –v
//Output - v12.16.2
npm -v
//Output - 6.14.5

Ionic and Cordova

As we have installed node and npm successfully we are ready to install ionic and cordova in one go using the below command:

npm install -g cordova ionic

You can check the version by running:

sudo ionic –v
//Output - 6.9.2
sudo cordova –v
//Output - 9.0.0

Creating the Project

Now let’s create a project either you can use ready-made templates provided by ionic or a blank one to start fresh.

ionic start <project name> <template>

The templates you can use are:

  • tabs: A three-tab layout starter app
  • sidemenu: A side menu layout starter app
  • blank: A starter app with a single blank page
  • super: A starter app with over 14 ready-made page designs
  • tutorial: A guided starter app

I am going to give the project name as myfirstapp and the template I am going to use is tabs. So the command we need to run is:

ionic start myfirstapp tabs

An option will pop up on your terminal to choose either an angular framework or a react framework, go ahead with angular ( as demonstrated in the video).
Yayy!!! As the project is set up, let’s navigate into the directory. Run cd myfirstapp

When you inspect the directory, you’ll notice a few files and directories which we will need to work with initially:

  • cordova.xml: Here you can find the configuration for Cordova
  • ionic.project: In this file, you will get to know about the configuration for Ionic.
  • /plugins: This is the directory where you can find all your installed plugins and initially it will be loaded with default plugins that Ionic will preinstall for your convenience.
  • /platforms: When you install any platform you will be able to find the installed platform under this directory.
  • /scss: This directory contains the source files for the SASS styles for the application.
  • /www: This directory holds the web application files that are loaded by Cordova. All of your JavaScript, HTML, and CSS files should be in this directory.

Project Structure

This starter project includes the folders that were created and inside that, we have a typical Cordova project structure.
Let’s dive in!!!

Below is the table containing the description of each file in details, please go through the table for an in-depth understanding.

Files and FoldersDescription
./src/The directory where you will spend most of your time as inside this we find our code.
Please note that src/app/app.module.ts is the entry point for our app.
./src/index.htmlA simple HTML file which will be the entry point for your application.
You won’t spend much of our time in this file. 
      
src/app/app.htmlHere’s the main template for the app.
src/app /app.component.tsThe very first component which will get loaded in your app and basically it will be an empty shell for other components to get loaded in this.
src/app /app.module.tsEvery Angular app has at least one NgModule class, the root module, conventionally named AppModule.  
config.xmlThis configuration file is used by Cordova and includes settings which are relevant for building your application for the iOS and Android platform.
package.jsonThis file contains all dependencies (NPM packages) of our application. By executing the command npm install in the project directory the dependencies listed in package.json are downloaded and added to the project automatically.
pagesThis folder will include all the pages of your application.
providersThe role of a provider is to include things like fetching data from a server, performing operations on data, sharing data, providing a set of complicated mathematical operations, and so on.
assetsThe assets folder can be used to store any static files you want to include in your project like images, or JSON data files.

Preview the app

And finally now is the time to preview the app in the browser, for that run the command:

sudo ionic serve

Use Chrome as your browser because it has the fantastic ability to emulate device dimensions so that you can have a view that how your app will look on a real device.

Deployment

Configuring platforms

Let’s inform ionic to enable and configure the desired platforms. To add a platform, run

Replace iOS with android to add android instead.

Unless you are on macOS leave the iOS platform.

ionic cordova platform add ios. 

Once added, you’ll see a new folder in the platforms directory of your project. This folder contains platform-specific files. In general, you need to avoid making too many changes to the files in this directory. If you have any issues, you can remove the platform and add it again. To remove a platform, run

sudo ionic cordova platform remove ios.

Emulate the App

Once you have done that, to emulate the app run

ionic cordova emulate ios -c -l

As mentioned before, replace ios with android if you are targeting iOS. This build installs and launches the app in the simulator. This can take a few moments, so you may want to use some of the helpful live reload features as you did earlier in the browser.
You can use the optional -l flag to have the app live to reload in the simulator (without the need to rebuild and reinstall). This is great as long as you aren’t changing anything related to how the app is built (such as Cordova settings).
You can also use the optional -c flag to have any console messages forwarded to the terminal log. I use them almost every time.

Run application

Once you have a connected device, it is quite simple to run the app on it from the command line. Follow the below command.

ionic cordova run ios -c -l 

Just like the emulate command, you can use the optional -l and -c flags to enable live reloading and console logging to the terminal.
Once the app is on your device, you can disconnect it and the app will remain installed on the device. This is helpful if you want to use the app over a period of time to test or get it reviewed from others.

At any point, if you want to check the versions you are using run following command ionic info

sudo ionic info

Adding a page

Yaay!!! You created an ionic application, in case you want to add your own pages and stuff refer below.

ionic g page <page-name>
// Example:  ionic g page newpage

If you take a look at your src/pages/ folder, you’ll see that a new folder name “newpage” has been created. Every time you created a new page, you need to tell the application about it by importing it in app.module.ts. Open it and add the following line at the top of it:

import { NewPage} from '../pages/newpage/newpage;

You can further use this page in tabs.ts file or wherever you want to use this page.

Some common issues faced

Cannot find module ‘@ionic/app-scripts’:

Thank me later and run this command…

npm install @ionic/[email protected] --save-dev

@ionic/app-scripts isn’t installed in this project, but it is already installed

Your saviour!!! Use this command…

rm -rf node_modules package-lock.jsonnpm install

Cannot find module ‘node-sass’

👉🏻👉🏻👉🏻

sudo npm install --save-dev --unsafe-perm node-sass

Conclusion

So, using the ionic framework was not a hassle as long as you follow the steps and get the right things installed and now you are a hybrid app developer…Congratulations, long way to go!!!

References

How to build an Ionic Mobile App – For Beginners
Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp
Anshul Chhabra

Anshul Chhabra

I'm a full-stack software engineer with over 2.7 years of experience. I like to write blogs covering various topics varying from mobile app development to python basics or learning i have gathered by building products, to make life easier for every other aspiring developer like me.
If my content adds value to your life, do consider supporting me!

Anshul Chhabra

Anshul Chhabra

I'm a full-stack software engineer with over 2.7 years of experience. I like to write blogs covering various topics varying from mobile app development to python basics or learning i have gathered by building products, to make life easier for every other aspiring developer like me.
If my content adds value to your life, do consider supporting me!

Subscribe
Notify of
guest
4 Comments
Oldest
Newest Most Voted
Inline Feedbacks
View all comments
neelam

Useful Content!!

Sunny

Wonderful Article !! Keep writing.

Share on facebook
Share on twitter
Share on linkedin
Share on whatsapp

Join the Club!

Get all the latest blog updates directly in your mailbox and stay ahead of the curve.

Yes, I'm IN!

Join and Stay ahead of the curve.