Setting up Ionic 4 on MAC

Introduction

Ionic 4 is finally here! So in this post we will discuss what is the best way to install, run, and emulate Ionic 4 app. We will also see how to test our app while building. Now this post is for Mac users only.

Prerequisites

Make sure you have an up-to-date version of Node.js installed on your system. If you don’t have Node.js installed, you can install it from here

Also we need Ionic and Cordova, So open a terminal window (Mac) and install Cordova and Ionic:

sudo npm install -g cordova ionic

If you already have Cordova and Ionic installed on your computer, make sure you update to the latest version:

sudo npm update -g cordova ionic

We also need an IDE or Text Editor. Personally I use Visual Studio Code. But you can use any.

We also need Xcode to simulate devices.

Example Configuration

For demonstration purposes, we’re going to create a simple app

Step One — Create a new Ionic Application

First of all open Terminal and go to a directory where you want to create app. You can use following command to go to different directory.

cd Desktop/

To create a new Ionic 4 application, paste this command in your terminal. There are 3 basic layouts we can use when we are creating a new Ionic 4 app.

Blank
Sidemenu
Tabs

In this tutorial we will be using Tabs.

ionic start appName tabs --type=angular

After installing `NPM` modules and dependencies, you will see this question, just type `N` because we are not using it yet.

Install the free Ionic Appflow SDK and connect your app? (Y/n) : N

Next, go to the newly created app folder.

cd appName/

Step Two — Running App

Now we can use following command to run the app in browser.

ionic serve -l

You will see this question, just type `Y` and press enter.

Install @ionic/lab? (Y/n) : Y

After that, a new window will open in your default browser, which looks like this

Now we have successfully created an Ionic 4 app and we even tested it by running it on web browser. Perfect!!!

Is that it?

May be there is one more thing we need to do, Now if you open Inspect Element of this page, by right clicking on app, and then click on Inspect

After clicking on Inspect, you will see a new window, Now I want you to click on Console.

You will see something like following image. Now what the Heck are these errors?

So basically StatusBar is a Native Cordova plugin and as we are running our app on web browser, so Native Cordova plugins won’t work like Camera, Push Notifications etc.

Now you can use Ionic DevApp. You can just install it on your iOS or Android device and run app there. The native Cordova plugins will work just fine there.

But while building the app. we will need see console to see all errors. But if we are using Ionic DevApp, we can’t see console.

So what’s the solution?

So we need to run this app in actual iPhone and use Safari Web Inspector to see console. So what if we don’t have physical device? That’s ok as well. We can run a simulator for iPhone, which will work just like as physical device.

Step Three — Enable Cordova

Run following command to get all Cordova files.

ionic integrations enable cordova

This command is going to create some new files. After that we need to change package id in config.xml file. You have to change the id attribute of widget tag to change your app id.

For Example:

So for my project I am going to change io.ionic.starter to net.flicher

<widget id=”io.ionic.starter” version=”0.0.1″ xmlns=”http://www.w3.org/ns/widgets” xmlns:cdv=”http://cordova.apache.org/ns/1.0″>

<widget id=”net.flicher” version=”0.0.1″ xmlns=”http://www.w3.org/ns/widgets” xmlns:cdv=”http://cordova.apache.org/ns/1.0″>

Step Four — Running app on Simulator

To run Simulator run following command, as mentioned in Ionic documentation.

Xcode 10 support in Cordova is still a work-in-progress. So they recommend using XCode 9. So either you can install XCode 9 or use following command to get it working with XCode 10. See this issue for details.

ionic cordova emulate ios -lc -- --buildFlag="-UseModernBuildSystem=0"

Lets understand flags used in this command

-l: Live Reload
-c: Console Errors in terminal
-- --buildFlag=”-UseModernBuildSystem=0″: Use XCode old build system

After running this command, Simulator will open and app will be installed on it. It will look like this.

Step Five — Opening Safari Web Inspector

Safari has Web Inspector support for iOS simulators and devices. Open the Develop menu and select the simulator or device, then select the Ionic App to open Web Inspector.

If the Develop menu is hidden, enable it in Safari » Preferences » Advanced » Show Develop menu in menu bar.

After you click on Simulator, a new windows will open which will look like this.

You can refresh the app once by pressing Command (⌘)-R on Web Inspector to see console logs. As Live reload is enabled, so if you make modification to your project. The Ionic App will reload it self, when you save the file and you will see the change you made in Simulator.