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
So first and foremost thing is you need to install node.js and if you don’t have it on your system please follow below link:
https://nodejs.org/en/
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 Folders | Description |
|---|---|
| ./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.html | A 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.html | Here’s the main template for the app. |
| src/app /app.component.ts | The 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.ts | Every Angular app has at least one NgModule class, the root module, conventionally named AppModule. |
| config.xml | This configuration file is used by Cordova and includes settings which are relevant for building your application for the iOS and Android platform. |
| package.json | This 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. |
| pages | This folder will include all the pages of your application. |
| providers | The 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. |
| assets | The 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
Now we are ready to deploy our application on android and iOS devices.
I hope that you have a working android and iOS development environment but if not, I got you covered my friend!
I have already explained how to set up an android environment in this blog.
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
- https://ionicframework.com/docs/v1/guide/preface.html
- ERROR in Cannot find module ‘node-sass’
- Error: Cannot find module ‘@ionic/app-scripts’
- Android Development – Ionic Documentation
Useful Content!!
Thank you 🙂
Wonderful Article !! Keep writing.
Thank you…yes sure will keep writing 😄
wow i love it…. thanks guys and more over see below ionic development company