Aug 12, 2018

Getting Started With Ionic 4

In this article I will be covering a series of articles for you to develop an Ionic Application and Publish it Google Play Store. The current version of Ionic is 4. Lets get started with Hybrid Mobile Application using Ionic. Hope you know what is Ionic and how it works. First of all you need to setup the environment for IONIC development.

Step 1 : Install latest version of Node if you have not installed. You can check your node version using below command in CMD.

1
node -v

Step 2 : Download a code editor for development. I use VS Code. Which is an open source code editor.

Step 3 : Install Ionic CLI globally using below command.


1
npm install -g ionic@latest

Step 4 : Lets create an Ionic App now. There are 3 main options while creating an Ionic Application.
You can create either Blank Application or Tabs Application or Side Menu Application. First Lets create Side Menu Application using below command.


1
ionic start SideMenuApp sidemenu

When you execute this command you will get something like this.



Its basically asking you if you want to create a mobile application (android and/or iOS). If that's your intention, then hit the y key, followed by enter. It will then ask you which platforms you want to install, type a platform name from the options and hit the enter key again.

If your intent is not to create a mobile app, then hit the n key, followed by enter and you'll be on your way to developing a single page, mobile first application.

So lets Enter "N" and Proceed.

Step 5 : Go to your newly created folder and run the Application using below commands.


1
2
cd SideMenuApp
ionic serve

You will see get the following output in the Command Prompt.


Then application will open in the browser.



Hope you follow it up. Lets see how we can run this on a device in my next article.

No comments:

JWT Token Decode Using Jquery

When it come to authentication we use many mechanism. Ones the user authenticated we must keep these details somewhere safe. So we can share...