Setting up Ionic 4 on MAC
Tags: ionic, ionic4, ionicframework, tutorial
Published: 2019-01-31 11:02:43

---
title: Setting up Ionic 4 on MAC
published: true
description: The best way to install, run, and emulate Ionic 4 app. We will also see how to test our app while building.
tags: ionic, ionic4, ionicframework, tutorial
---

<img src="https://blog.flicher.net/wp-content/uploads/2019/01/ionic-setup-1280x640.png" alt="Setting up Ionic 4 on MAC">

<h3>Introduction</h3>



<p>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.</p>



<h3>Prerequisites</h3>



<p>Make sure you have an up-to-date version of Node.js installed on your system. If you don&#8217;t have Node.js installed, you can install it from&nbsp;<a href="http://nodejs.org/" target="_blank" rel="noreferrer noopener" aria-label=" (opens in a new tab)">here</a></p>



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



<pre>sudo npm install -g cordova ionic</pre>



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



<pre>sudo npm update -g cordova ionic</pre>



<p>We also need an IDE or Text Editor. Personally I use <a rel="noreferrer noopener" aria-label="Visual Studio Code (opens in a new tab)" href="https://code.visualstudio.com/" target="_blank">Visual Studio Code</a>. But you can use any.</p>



<p>We also need <a rel="noreferrer noopener" href="http://xcode/" target="_blank">Xcode</a> to simulate devices.</p>



<h3 id="example-configuration">Example Configuration</h3>



<p>For demonstration purposes, we&#8217;re going to create a simple app</p>



<h3 id="mce_28">Step One &#8212; Create a new Ionic Application</h3>



<p>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.</p>



<pre>cd Desktop/</pre>



<p>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. </p>



<ul><li>Blank</li><li>Sidemenu</li><li>Tabs</li></ul>



<p>In this tutorial we will be using Tabs.</p>



<pre class="wp-block-preformatted pre-code">ionic start appName tabs --type=angular</pre>



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



<pre>Install the free Ionic Appflow SDK and connect your app? (Y/n)&nbsp;: N</pre>



<p>Next, go to the newly created app folder.</p>



<pre>cd appName/</pre>



<h3>Step Two &#8212; Running App</h3>



<p>Now we can use following command to run the app in browser.</p>



<pre>ionic serve -l</pre>



<p>You will see this question, just type `Y` and press enter.</p>



<pre>Install @ionic/lab? (Y/n)&nbsp;: Y</pre>



<figure class="wp-block-image"><img src="https://blog.flicher.net/wp-content/uploads/2019/01/ionic-serve-1024x514.png" alt="" class="wp-image-210" srcset="https://blog.flicher.net/wp-content/uploads/2019/01/ionic-serve-1024x514.png 1024w, https://blog.flicher.net/wp-content/uploads/2019/01/ionic-serve-300x151.png 300w, https://blog.flicher.net/wp-content/uploads/2019/01/ionic-serve-768x386.png 768w, https://blog.flicher.net/wp-content/uploads/2019/01/ionic-serve-1080x542.png 1080w" sizes="(max-width: 1024px) 100vw, 1024px" /><figcaption>After that, a new window will open in your default browser, which looks like this<br></figcaption></figure>



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



<p>Is that it?</p>



<p>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</p>



<figure class="wp-block-image"><img src="https://blog.flicher.net/wp-content/uploads/2019/01/inspect-element-1-1024x564.png" alt="" class="wp-image-290" srcset="https://blog.flicher.net/wp-content/uploads/2019/01/inspect-element-1-1024x564.png 1024w, https://blog.flicher.net/wp-content/uploads/2019/01/inspect-element-1-300x165.png 300w, https://blog.flicher.net/wp-content/uploads/2019/01/inspect-element-1-768x423.png 768w, https://blog.flicher.net/wp-content/uploads/2019/01/inspect-element-1-1080x595.png 1080w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



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



<figure class="wp-block-image"><img src="https://blog.flicher.net/wp-content/uploads/2019/01/inspect-1024x564.png" alt="" class="wp-image-220" srcset="https://blog.flicher.net/wp-content/uploads/2019/01/inspect-1024x564.png 1024w, https://blog.flicher.net/wp-content/uploads/2019/01/inspect-300x165.png 300w, https://blog.flicher.net/wp-content/uploads/2019/01/inspect-768x423.png 768w, https://blog.flicher.net/wp-content/uploads/2019/01/inspect-1080x595.png 1080w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



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



<figure class="wp-block-image"><img src="https://blog.flicher.net/wp-content/uploads/2019/01/console-1024x564.png" alt="" class="wp-image-224" srcset="https://blog.flicher.net/wp-content/uploads/2019/01/console-1024x564.png 1024w, https://blog.flicher.net/wp-content/uploads/2019/01/console-300x165.png 300w, https://blog.flicher.net/wp-content/uploads/2019/01/console-768x423.png 768w, https://blog.flicher.net/wp-content/uploads/2019/01/console-1080x595.png 1080w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>So basically StatusBar is a Native Cordova plugin and as we are running our app on web browser, so Native Cordova plugins won&#8217;t work like Camera, Push Notifications etc.</p>



<p>Now you can use <a rel="noreferrer noopener" aria-label="Ionic DevApp (opens in a new tab)" href="https://ionicframework.com/docs/appflow/devapp/" target="_blank">Ionic DevApp</a>. You can just install it on your iOS or Android device and run app there. The native Cordova plugins will work just fine there.</p>



<p>But while building the app. we will need see console to see all errors. But if we are using <a rel="noreferrer noopener" href="https://ionicframework.com/docs/appflow/devapp/" target="_blank">Ionic DevApp</a>, we can&#8217;t see console.</p>



<p>So what&#8217;s the solution?</p>



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



<h3>Step Three &#8212; Enable Cordova</h3>



<p>Run following command to get all Cordova files.</p>



<pre>ionic integrations enable cordova</pre>



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



<p>For Example:</p>



<p>So for my project I am going to change <strong>io.ionic.starter</strong> to <strong>net.flicher</strong></p>



<pre>&lt;widget id=&#8221;<strong>io.ionic.starter</strong>&#8221; version=&#8221;0.0.1&#8243; xmlns=&#8221;http://www.w3.org/ns/widgets&#8221; xmlns:cdv=&#8221;http://cordova.apache.org/ns/1.0&#8243;&gt;</pre>



<pre>&lt;widget id=&#8221;<strong>net.flicher</strong>&#8221; version=&#8221;0.0.1&#8243; xmlns=&#8221;http://www.w3.org/ns/widgets&#8221; xmlns:cdv=&#8221;http://cordova.apache.org/ns/1.0&#8243;&gt;</pre>



<h3 id="mce_17">Step Four &#8212; Running app on Simulator</h3>



<p>To run Simulator run following command, as mentioned in <a href="https://ionicframework.com/docs/installation/ios" target="_blank" rel="noreferrer noopener" aria-label="Ionic documentation (opens in a new tab)">Ionic documentation</a>.</p>



<p>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&nbsp;<a rel="noreferrer noopener" href="https://github.com/apache/cordova-ios/issues/407" target="_blank">this issue</a>&nbsp;for details.</p>



<pre class="wp-block-preformatted pre-code">ionic cordova emulate ios -lc -- --buildFlag="-UseModernBuildSystem=0"<br></pre>



<p>Lets understand flags used in this command</p>



<blockquote class="wp-block-quote"><p><strong>-l:</strong> Live Reload<br><strong>-c:</strong> Console Errors in terminal<br><code><strong>--</strong></code><strong> </strong><code><strong>--</strong></code><strong>buildFlag=&#8221;-UseModernBuildSystem=0&#8243;:</strong> Use XCode old build system</p></blockquote>



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



<figure class="wp-block-image"><img src="https://blog.flicher.net/wp-content/uploads/2019/01/simulator-1024x594.png" alt="" class="wp-image-277" srcset="https://blog.flicher.net/wp-content/uploads/2019/01/simulator-1024x594.png 1024w, https://blog.flicher.net/wp-content/uploads/2019/01/simulator-300x174.png 300w, https://blog.flicher.net/wp-content/uploads/2019/01/simulator-768x445.png 768w, https://blog.flicher.net/wp-content/uploads/2019/01/simulator-1080x626.png 1080w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<h3 id="mce_7">Step Five &#8212; Opening Safari Web Inspector</h3>



<p>Safari has Web Inspector support for iOS simulators and devices. Open the&nbsp;Develop menu and select the simulator or device, then select the Ionic App to open Web Inspector.</p>



<blockquote class="wp-block-quote"><p>If the&nbsp;<strong>Develop</strong>&nbsp;menu is hidden, enable it in&nbsp;<strong>Safari</strong>&nbsp;»&nbsp;<strong>Preferences</strong>&nbsp;»&nbsp;<strong>Advanced</strong>&nbsp;»&nbsp;<strong>Show Develop menu in menu bar</strong>.</p><p></p></blockquote>



<figure class="wp-block-image"><img src="https://blog.flicher.net/wp-content/uploads/2019/01/simulator-develop-1024x609.png" alt="" class="wp-image-281" srcset="https://blog.flicher.net/wp-content/uploads/2019/01/simulator-develop-1024x609.png 1024w, https://blog.flicher.net/wp-content/uploads/2019/01/simulator-develop-300x178.png 300w, https://blog.flicher.net/wp-content/uploads/2019/01/simulator-develop-768x457.png 768w, https://blog.flicher.net/wp-content/uploads/2019/01/simulator-develop-1080x642.png 1080w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



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



<figure class="wp-block-image"><img src="https://blog.flicher.net/wp-content/uploads/2019/01/simulator-open-develop-1024x609.png" alt="" class="wp-image-282" srcset="https://blog.flicher.net/wp-content/uploads/2019/01/simulator-open-develop-1024x609.png 1024w, https://blog.flicher.net/wp-content/uploads/2019/01/simulator-open-develop-300x178.png 300w, https://blog.flicher.net/wp-content/uploads/2019/01/simulator-open-develop-768x457.png 768w, https://blog.flicher.net/wp-content/uploads/2019/01/simulator-open-develop-1080x642.png 1080w" sizes="(max-width: 1024px) 100vw, 1024px" /></figure>



<p>You can refresh the app once by pressing Command (⌘)-R&nbsp;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.</p>



<h3 id="conclusion">Conclusion</h3>



<p>Congratulation, you have successfully created your first Ionic 4 app and ran it on Simulator as well. </p>



<p>What&#8217;s next?</p>



<p>Go to <a rel="noreferrer noopener" aria-label="Ionic Documentation (opens in a new tab)" href="https://ionicframework.com/docs/" target="_blank">Ionic Documentation</a> and add new features to your app.</p>



<p>Have fun!</p>

<p><a href="https://twitter.com/_varunverma">Follow me on Twitter</a></p>
<p><a href="https://www.instagram.com/_varunverma/">Follow me on Instagram</a></p>
<p><a href="https://blog.flicher.net/">My Blog Flicher</a></p>