You've successfully subscribed to Smartcodehub ™ Blog
Great! Next, complete checkout for full access to Smartcodehub ™ Blog
Welcome back! You've successfully signed in.
Success! Your account is fully activated, you now have access to all content.
Ionic 5 Tutorials Series | Part-2

Ionic 5 Tutorials Series | Part-2

we are going to learn about how we can create ionic project, learn about the structure of project , how we can run it on our device and understand the difference between cordova and capacitor.

Abhishek Dana
Abhishek Dana

Hello everyone, today in this blog we are going to learn about how we can create ionic project, learn about the structure of project , how we can run it on our device and understand the difference between cordova and capacitor.

So without wasting time let's us first see how we can create project of ionic using cmd.So basically ionic have provided a good documentation of how we can create a project in ionic.So to create a project there are somethings which we need to keep in mind like

1) Ionic Framework

As already discuss ionic provide multiple platform like angular, react , vue we need to choose which platform we are going to take for now we are going to work on angular and if you are not familiar with what is angular please take a look over the blog here and if you want to know this in video then head over to this there is a best tutorial on angular.

2) Ionic Template

Ionic by default provide multiple different template to make it easier for user to work the templates are: Sidemenu , Tabs , Blank , Conference App. So for making you to understand it better we are going to work on blank template in which we will be integrate multiple funcationalites and more fun.

3) Ionic Style

Now here is very good thing which i like about ionic is that ionic has provided us a facility to choose ionic styling language like css , scss , and sass. Most of the time we don't like to work with css rather we would like to work with scss which is much more comfortable so here is the plus point to ionic team.

4) Cordova / Capacitor

Now here comes the main point recently ionic have came up with capacitor which is actully a big change for ionic developers but don't worry we are going to learn both of this but more over we care looking towards Capacitor.

So this are the few thing we need to take care about because most of the time we select different styling guide but due to lack of knowledge we may face many problems even we have to start again.

Generate Ionic Project

So now let's make our first project using the below command.

ionic start firstApp blank --type=ionic-angular --capacitor 

To know more head over to the documentation of ionic over here.

So over here we have just given --type=ionic-angular so by default angular project comes with scss you can change your project to sass by

you can use Sass by changing which CSS file www/index.html uses (css/style.css is the default, css/ionic.app.css is generated and includes both Ionic styles and your app’s styles).

The main Sass source file is located at scss/ionic.app.scss.

If your gulpfile.js contains the sass task, the CLI will run it automatically during the ionic build and ionic serve commands.

Ionic Folder Structure

So after running the start cmd we need to open the folder to code editor i am using visual studio code so to open vs code directly we need to just type

code . && exit

this command will open your folder into vs code.

So before starting the intro about folder structure let's download some vs code extension to download extension you just need to follow the above steps.

1) Click on extension tab in vs code.

Click on red mark

Now you will find some interface like this..

Now you have to search for ionic snippet in search box and download the first one

That's enough for ionic project it will help you to get ionic code faster and we dont have to write much.

Now let's discuss about the folder structure

Folder structure of ionic project

Here you can see the project contains lot of file so our main part is just on src and ionic / capacitor config json that's it. The src folder Files at the top level of src/ support testing and running your application. Subfolders contain the application source and application-specific configuration.

To learn more about the detail of file structure head over to this.

Running Application

There are multiple different ways to run ionic application, there are multiple options to run like you can run your application on browser, android , ios devices.

Run ionic application on browser

To run your application on browser we need to run command in terminal to open terminal in vs code use the following key combination.

ctrl + ~

this shortcut will open the terminal for you now run the command

npm start -o

this command will run you project in browser at port 4200 as angular project works on this port. we have use -o in cmd to basically open the project in browser by default npm start command just make the project and run but it doesn't open it in browser.

Output of npm start

Run Ionic Application on Android

Now we have use capacitor so will tell you what is the basic use of capacitor it says that you make your application in any code editor but to run or build your application we will use all native application and for android native application is android studio so when you will build ionic application for android device it will open you application in android studio and from there you can test and build your application.

To run your application in android we need to run the following commands that is

ionic capacitor sync (run this command whenever you do any change in project)

ionic capacitor run android

when you run first command it will make a www folder which is basically for a pwa application if you need to make web app then you can use this www folder.

There might be question arising in mind that for android build why are we running this command so lemme tell you that ionic is a native application builder which do not generate any java code or swift code for android / ios devices it make a www folder and use its as a url or we can say that website in android device with android funcationality which web browser don't give.

Next command is basically to run your project in android studio now there might be error when you run the second command saying this..

Probably this error come in mac and linux so user don't need to be worry here we just need to specify the path of android studio shell file so that our project and open android studio of android application development.

To configure this path we need to open the file name capacitor.config.json and add the following line before the last closing curly bracket }.

and after this you can run the second command again and it works.

Run Ionic Application on iOS

To run your application in android we need to run the following commands that is

ionic capacitor run ios 

if you have run ionic capacitor sync then you dont need to run it again if no changes are made in project.

That's it,

we are done with our second part, Now in third part we are going to see some of the basic components of ionic and angular.

Stay tuned 😊