{"id":3496,"date":"2017-07-16T17:25:00","date_gmt":"2017-07-16T17:25:00","guid":{"rendered":"http:\/\/www.nikola-breznjak.com\/blog\/?p=3496"},"modified":"2017-09-12T10:44:49","modified_gmt":"2017-09-12T10:44:49","slug":"get-started-ionic-framework-3-mac-windows","status":"publish","type":"post","link":"https:\/\/nikola-breznjak.com\/blog\/javascript\/ionic3\/get-started-ionic-framework-3-mac-windows\/","title":{"rendered":"How to get started with Ionic framework 3 on Mac and Windows"},"content":{"rendered":"<p>This is the first post in a series of posts which will teach you how to take advantage of your web development knowledge in building hybrid applications for iOS and Android with Ionic framework 3 (<em>I&#8217;ll use <code>Ionic<\/code> in the rest of the post<\/em>).<\/p>\n<blockquote><p>\n  This is an update of the series of posts that I did for the original version of the Ionic framework, and you can read it <a href=\"http:\/\/www.nikola-breznjak.com\/blog\/javascript\/ionic\/ionic-framework-a-definitive-10000-word-guide\/\">here<\/a>.\n<\/p><\/blockquote>\n<p>This first post explains:<\/p>\n<ul>\n<li>How to make an app these days<\/li>\n<li>What actually is Ionic framework<\/li>\n<li>How is Ionic 3 different from Ionic 1 and 2<\/li>\n<li>How to install Ionic on both Mac and Windows<\/li>\n<li>How to use Ionic CLI to start an Ionic project<\/li>\n<li>How to run an Ionic application<\/li>\n<\/ul>\n<p>You can read the second post in the series here: <a href=\"http:\/\/www.nikola-breznjak.com\/blog\/javascript\/ionic3\/create-calculator-application-ionic-framework-3-using-ionic-creator-ui\/\">How to create a calculator application with Ionic framework 3 by using Ionic Creator for UI<\/a>.<\/p>\n<h2>Why should you listen to me?<\/h2>\n<blockquote><p>\n  This is in no way my attempt at feeding my ego, it&#8217;s just to give you soundness of mind that what I&#8217;m writing here may actually be useful to you.\n<\/p><\/blockquote>\n<ul>\n<li>Wrote a book about the original Ionic framework, and you can <a href=\"https:\/\/leanpub.com\/ionic-framework\">get it for free<\/a><\/li>\n<li>Wrote for Pluralsight on the topic of Ionic: <a href=\"https:\/\/www.pluralsight.com\/guides\/front-end-javascript\/ionic-framework-a-definitive-10-000-word-guide\">Ionic Framework: A definitive 10,000-word guide<\/a><\/li>\n<li>In the top #3 all time answerers for the <code>ionic<\/code> tag on <a href=\"https:\/\/stackoverflow.com\">StackOverflow<\/a>. If you want to see what those answers actually are, you can take a look at <a href=\"http:\/\/stackoverflow.com\/users\/534755\/nikola?tab=answers\">my StackOverflow profile<\/a>.<\/li>\n<li>Was a technical reviewer for the book <a href=\"http:\/\/amzn.to\/2u4G3yF\">Getting started with Ionic<\/a><\/li>\n<\/ul>\n<h2>Introduction<\/h2>\n<blockquote><p>\n  &#8230;up to 90% of mobile time is spent in apps\n<\/p><\/blockquote>\n<p>You&#8217;re bombarded with reports <a href=\"http:\/\/techcrunch.com\/2015\/06\/22\/consumers-spend-85-of-time-on-smartphones-in-apps-but-only-5-apps-see-heavy-use\/\">like this<\/a> and <a href=\"http:\/\/www.smartinsights.com\/mobile-marketing\/mobile-marketing-analytics\/mobile-marketing-statistics\/attachment\/percent-time-spent-on-mobile-apps-2016\/\">this<\/a> that users tend to spend way more time on their phones and especially in apps (rather than surfing the web using their phones) and you decided that <strong>it&#8217;s time to learn how to make an app<\/strong>.<\/p>\n<p>If you&#8217;re a web developer, you have a decent knowledge of HTML, CSS, and JavaScript; also, you&#8217;re most likely using one of the ever so slightly popular frameworks these days like Angular, React or Ember, to name a few. If you&#8217;re even proficient enough with the MEAN stack, you are a well-rounded full stack developer, and you basically have it all. Well, except the apps part, right?<\/p>\n<blockquote><p>\n  If you want to see what&#8217;s all that fuss about the MEAN stack, you can check out the free four-part tutorial series that I wrote for HackHands, starting with the first post on <a href=\"https:\/\/hackhands.com\/how-to-get-started-on-the-mean-stack\/\">How to get started on the MEAN stack<\/a>.\n<\/p><\/blockquote>\n<p>But, where to start with making an app? <strong>Could you use some of your existing skills?<\/strong> Up until fairly recently, if you wanted to make an app for (currently) two most popular mobile operating systems (iOS and Android &#8211; sorry Windows Phone ?) your only bet was to make the so-called, <strong>native application<\/strong> by using the SDKs of the intended platforms.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/fx677DH.jpg\" alt=\"\" \/><\/p>\n<p>This, of course, meant that you needed to make two versions of your application; one for iOS and one for Android. If you are a solo developer, chances that you&#8217;re proficient in both are not so great. <em>Even if you are; I bet you&#8217;re favoring one platform over the other, right?<\/em><\/p>\n<p>Therefore, for some time, developers were opting for either iOS or Android, whereas big firms had two developing departments, one for each platform.<\/p>\n<p>Nowadays, luckily, with the help of <a href=\"https:\/\/ionicframework.com\/\">Ionic Framework<\/a>, and few others like <a href=\"https:\/\/facebook.github.io\/react-native\/\">React Native<\/a>, <a href=\"https:\/\/www.nativescript.org\/nativescript-is-how-you-build-native-mobile-apps-with-angular\">NativeScript<\/a>, <a href=\"https:\/\/www.fusetools.com\/\">Fuse<\/a>, you can create an application by using the skills you, as a web developer, already have. <em>If you&#8217;re not a web developer, don&#8217;t fret &#8211; this isn&#8217;t rocket science or machine learning&#8230;<\/em> ?<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/G09oGwh.jpg\" alt=\"\" \/><\/p>\n<h2>How can you make an app these days?<\/h2>\n<p>We&#8217;ve kind of touched all three in the <strong>Introduction<\/strong> section, but let&#8217;s keep it nice and concise and list them here as well. So, there are actually few ways that you can make an application for mobile devices these days:<\/p>\n<ul>\n<li>Native app<\/li>\n<li>Mobile website (PWA)<\/li>\n<li>Hybrid app<\/li>\n<li>Xamarin, ReactNative, NativeScript!?<\/li>\n<\/ul>\n<p>Now, let&#8217;s talk a bit more about the pros and cons of each of them.<\/p>\n<h3>Native app<\/h3>\n<p>As mentioned previously, you can make an app specifically for iOS and Android by using their specific SDKs. If you want to build a native application for <strong>iOS<\/strong> you have to:<\/p>\n<ul>\n<li>have a Mac computer. <em>Sure, there are ways around it, but I honestly don&#8217;t recommend them; for starters, a cheap Mac Mini will do just fine<\/em><\/li>\n<li>download <a href=\"https:\/\/developer.apple.com\/xcode\/\">Xcode<\/a> from the App Store (it&#8217;s actually free)<\/li>\n<li>buy the <a href=\"https:\/\/developer.apple.com\/programs\/\">Apple Developer license<\/a> that costs <strong>99$ per year<\/strong>. <em>Even if you don&#8217;t make any new apps after publishing your one app to the App Store, you&#8217;ll still have to renew your subscription <strong>every year<\/strong> to keep your app in the App Store<\/em> ??<\/li>\n<\/ul>\n<p>You can write the apps by using the <a href=\"https:\/\/developer.apple.com\/swift\/\">Swift<\/a> language, or it&#8217;s predecessor <a href=\"https:\/\/developer.apple.com\/library\/mac\/documentation\/Cocoa\/Conceptual\/ProgrammingWithObjectiveC\/Introduction\/Introduction.html\">ObjectiveC<\/a>.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/sqjUwGg.jpg\" alt=\"\" \/><\/p>\n<p>If we&#8217;re honest here, I think that Swift is a great step up from the clunky ObjectiveC, but that&#8217;s just my own opinion (some people, of course, <a href=\"http:\/\/www.infoworld.com\/article\/2968287\/application-development\/stop-the-funeral-apple-swift-versus-objective-c-alive-and-kicking.html\">disagree<\/a>). Anyways, if you ever decide to go native just make sure you go with Swift as you&#8217;ll get to know your way around it way sooner than with ObjectiveC, especially if you have a background in web development.<\/p>\n<p>If you want to build a native application for <strong>Android<\/strong> you have to:<\/p>\n<ul>\n<li>have <em>any<\/em> computer<\/li>\n<li>download the appropriate SDKs (we&#8217;ll cover this in the next section)<\/li>\n<li>buy the <a href=\"https:\/\/play.google.com\/apps\/publish\/signup\/\">Google Developer license<\/a> which is a <strong>one time 25$ purchase<\/strong><\/li>\n<\/ul>\n<p>One of the pros of a native applications would be it&#8217;s <strong>speed<\/strong> and direct access to a <strong>native API<\/strong> (you don&#8217;t have to use any middleman wrappers, like in hybrid apps). A definite con of a native applications is that you need to build two (or more) applications, one for each desired platform.<\/p>\n<h3>Mobile website (PWA)<\/h3>\n<p>A mobile website is actually a <em>&#8220;normal&#8221;<\/em> website (<em>yeah, don&#8217;t go jumping because of the terminology; you&#8217;re smart, you get the point<\/em>) that you visit with your browser on your phone, designed specifically to adapt to your phone&#8217;s screen. As we&#8217;ve noted in the Introduction section, researches show that in today&#8217;s world mobile websites tend to have a way lower engagement than they used to.<\/p>\n<p>Developers used to make specific sites just for mobile browsers (on it&#8217;s own domain; usually <code>m.domain.com<\/code>) but this proved to be hard to maintain. A practice called <strong><a href=\"https:\/\/developers.google.com\/web\/fundamentals\/layouts\/rwd-fundamentals\/\">responsive website design<\/a><\/strong> is used these days, where you basically have one HTML codebase, and you determine the look for specific devices (based on resolutions) by using the so-called <strong><a href=\"https:\/\/developer.mozilla.org\/en-US\/docs\/Web\/Guide\/CSS\/Media_queries\">media queries<\/a><\/strong>.<\/p>\n<p>A great example of a mobile framework is <a href=\"https:\/\/jquerymobile.com\/\">jQuery mobile<\/a> that is soon coming out with its new 1.5 version (here&#8217;s their <a href=\"https:\/\/jquerymobile.com\/changelog\/1.5.0-alpha1\/\">alpha changelog<\/a>), so we&#8217;ll see if they bring something new to the table. From my personal experience with the framework from four years ago, I have all but good words for it; so, definitely use it if you&#8217;re &#8220;only&#8221; making a mobile version of your web application.<\/p>\n<p>A definite advantage of the mobile websites is that you can update them as you see fit, without waiting for the approval from Apple or Google. One of the disadvantages is definitely the fact that the mobile websites these days have way lower engagement than they used to, and that you can&#8217;t basically use any of the additional phone features like for example camera or GPS.<\/p>\n<p>Since this is an update of the post, few things have changed and if you only want to make a &#8216;mobile website&#8217;. I&#8217;d suggest looking into <a href=\"https:\/\/developers.google.com\/web\/progressive-web-apps\/\">PWA<\/a> (Progressive Web Apps) as they are <em>the new cool<\/em> nowadays, and some go even as far as saying that <a href=\"https:\/\/medium.com\/javascript-scene\/why-native-apps-really-are-doomed-native-apps-are-doomed-pt-2-e035b43170e9\">native apps are doomed due to PWAs<\/a>, but we won&#8217;t be focusing on that here.<\/p>\n<p>Good news for those of you who also want to create PWAs of your apps &#8211; with Ionic you can! Ionic enables you to get the best of both worlds: cross-platform app store deployment on iOS, Android, and Windows, along with deployment to the mobile web as a Progressive Web App with the same code. But, let&#8217;s not be hasty, we&#8217;ll cover that in the next section.<\/p>\n<h3>Hybrid app<\/h3>\n<p>A hybrid app is a basically a mobile application, written with the same set of languages that you use when building websites, with the addition that it contains an isolated browser instance, called <strong>WebView<\/strong>, which runs this web application inside of a native app. Hybrid apps can access the mobile device and use the additional phone features like for example camera or GPS.<\/p>\n<p>A definite advantage of the hybrid apps is the fact that you can access the additional phone features via plugins and that you can do all the development with the same set of skills as you use when developing <em>&#8220;normal&#8221;<\/em> web applications.<\/p>\n<p>One of the disadvantages is the fact that, even though it&#8217;s improving, the so-called <em>Web View<\/em> has its limitations in terms of speed. Also, it might not be best suited to choose hybrid if you&#8217;re using a lot of additional phone features, as you would have to use a lot of plugins which would slow the app down. But, from my personal experience, we have 30+ plugins (yeah, don&#8217;t ask) that we use in our app and we&#8217;re getting away with it ?.<\/p>\n<p>Finally, you would definitely not use it if you&#8217;re on a quest to make the next best game with full-blown 3D graphics.<\/p>\n<h3>Xamarin, ReactNative, NativeScript!?<\/h3>\n<p>We have to be fair here and mention the new players who promise the fact of having a full API access without any additional plugins and produce &#8216;actual&#8217; native apps with very high percentage of shared code. So, the app is not run in the Web View like in Ionic&#8217;s case which is a boost to the app speed.<\/p>\n<p>If you&#8217;re coming from .NET background and you want to create an app; then you can stop reading here, as from what I&#8217;ve seen <a href=\"http:\/\/www.nikola-breznjak.com\/blog\/meetups\/64th-sqldev-user-group-meeting-xamarin\/\">Xamarin<\/a> is a sure bet for you and you&#8217;ll instantly feel at home.<\/p>\n<p>If you&#8217;re a React guy, then <a href=\"https:\/\/facebook.github.io\/react-native\/\">ReactNative<\/a> may just be up your alley. As they say on their website:<\/p>\n<blockquote><p>\n  With React Native, you don&#8217;t build a \u201cmobile web app\u201d, an \u201cHTML5 app\u201d, or a \u201chybrid app\u201d. You build a real mobile app that&#8217;s indistinguishable from an app built using Objective-C or Java. React Native uses the same fundamental UI building blocks as regular iOS and Android apps. You just put those building blocks together using JavaScript and React.\n<\/p><\/blockquote>\n<p>As for <a href=\"https:\/\/www.nativescript.org\/\">NativeScript<\/a>; to be honest, I don&#8217;t have experience with it, but it seems they&#8217;re in a similar boat as ReactNative as they also give you the NativeUI without web views.<\/p>\n<p>You can check out a good blog post on the topic of Ionic vs. NativeScript vs. ReactNative <a href=\"http:\/\/www.discoversdk.com\/blog\/ionic-2-vs-reactnative-vs-nativescript\">here<\/a>.<\/p>\n<h2>What is Ionic and why it&#8217;s so good<\/h2>\n<p>As I gave an <a href=\"http:\/\/stackoverflow.com\/questions\/31179211\/use-ionic-or-cordova\/31180666\">answer on StackOverflow<\/a>:<\/p>\n<blockquote><p>\n  Disclaimer: This will sound like an advertisement, so I have to say I&#8217;m in no way affiliated with Ionic, I just happen to like it so much that I&#8217;m sharing the love for it.<\/p>\n<p>  Ionic is so much more than \u201cjust\u201d a UI framework. Ionic allows you to:<\/p>\n<ul>\n<li>have truly <strong>only one single codebase<\/strong> and deploy to iOS, Android, and Windows, along with the mobile web as a Progressive Web App<\/li>\n<li>generate icons and splash screens for all devices and device sizes with a single command: <code>ionic cordova resources<\/code>. This alone saves you at least a day of image preparing for various sizes.<\/li>\n<li>instantly update your apps with code changes, even when running directly on your device with <code>ionic cordova run --livereload<\/code><\/li>\n<li>build and test iOS and Android versions side-by-side and see changes instantly with <code>ionic lab<\/code><\/li>\n<li>share your Ionic apps with clients, customers, and testers all around the world without ever going through the App Store with <code>ionic upload<\/code><\/li>\n<li>easily access the full native functionality of the device using <a href=\"https:\/\/ionicframework.com\/docs\/native\/\">Ionic Native<\/a><\/li>\n<li>Also, <a href=\"http:\/\/drifty.com\/\">Drifty<\/a> (the team behind the Ionic framework) is building a full-stack backend services and tools for your Ionic app like <a href=\"https:\/\/ionicframework.com\/products\/#updates\">Live updating<\/a> (for deploying a new version without going through Apple review process! &#8211; <strong>this is huge!<\/strong>), <a href=\"https:\/\/docs.ionic.io\/services\/push\/\">Push notifications<\/a>, <a href=\"https:\/\/ionicframework.com\/products\/#packaging\">Cloud packaging<\/a>, <a href=\"https:\/\/creator.ionic.io\">Ionic Creator<\/a> etc.<\/li>\n<li>Ionic CLI (command line interface) uses Cordova in the backend and allows you to build (directly using Ionic CLI) apps for iOS and Android (just by doing <code>ionic cordova build ios<\/code> or <code>ionic cordova build android<\/code>).<\/li>\n<li>Ionic uses Angular as a frontend framework so if you\u2019re familiar with it, it will come as a bonus. Yes, the newest version of Ionic (currently 3) uses the newest and coolest Angular (currently 4) (<em>which was a total rewrite from the Angular 1 version<\/em>)<\/li>\n<li>All in all, I personally think Ionic framework has a bright future, so if nothing else \u2013 give it a try I bet you\u2019ll like the ease of making an app with it.<\/li>\n<\/ul>\n<\/blockquote>\n<p>Do I have your attention now? Great, let&#8217;s install all the needed prerequisites in the next section and start using Ionic!<\/p>\n<h2>How is Ionic 3 different from Ionic 1 and 2<\/h2>\n<p><a href=\"https:\/\/www.joshmorony.com\">Josh Morony<\/a> wrote about <a href=\"https:\/\/www.joshmorony.com\/7-reasons-why-ionic-2-is-better-than-ionic-1\/\">7 Reasons Why Ionic 2 Is Better Than Ionic 1<\/a> and made a video about <a href=\"https:\/\/www.youtube.com\/watch?v=-HHEC_yQKcM\">What Ionic 3 means to Ionic 2<\/a>, and I encourage you to check them out to learn more about:<\/p>\n<ul>\n<li>why Ionic 2 is totally different (and better) from Ionic 1 and<\/li>\n<li>why Ionic 3 is not that much different from Ionic 2<\/li>\n<\/ul>\n<p>The biggest change comes down to the fact that Ionic 2 and 3 use the <strong>new<\/strong> Angular (now at version 4), whereas Ionic 1 uses the <em>old<\/em> Angular 1.<\/p>\n<p>Now, don&#8217;t get me wrong &#8211; we all seem to love the &#8216;new shiny things&#8217;, but I can tell you from my experience that even with Ionic 1 you can still make great apps! So, even if you&#8217;re awesome at Angular 1 I&#8217;d suggest you go for Ionic 3, as the benefits are truly amazing. Plus, you don&#8217;t want to be working in a 5 years &#8216;old&#8217; technology, now do you? ?<\/p>\n<h2>Installing prerequisites for both Mac and Windows<\/h2>\n<p>We need to have <strong>Node.js<\/strong> and <strong>Git<\/strong> installed in order to install both Ionic and Cordova. If you already have (and if you&#8217;re a web developer chances are that you do) these tools installed, you can skip this section, and go straight to installing Ionic.<\/p>\n<h3>Installing Node.js<\/h3>\n<p>In order to download Node.js, visit <a href=\"https:\/\/nodejs.org\/en\/download\/\">https:\/\/nodejs.org\/en\/download\/<\/a>, where you&#8217;ll see the following options:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/Ja6VwgB.png\" alt=\"\" \/><\/p>\n<p>Installation on Windows and Mac OS is simple as you just have to download and run the appropriate installer and follow the familiar instructions (<code>next, next, next, sure I accept, next, finish<\/code> ).<\/p>\n<p>If you have <code>brew<\/code> on your Mac then you can also install Node.js with:<\/p>\n<p><code>brew install node<\/code><\/p>\n<p>In both cases, <code>npm<\/code> (Node Package Manager &#8211; used to install other packages) will be installed along with Node.js.<\/p>\n<p>To verify that you installed Node.js correctly on a <strong>Windows<\/strong> machine, run the following command in your Command prompt (or, even better, use <a href=\"http:\/\/www.nikola-breznjak.com\/blog\/quick-tips\/customize-console-2-on-windows-machine\/\">Console 2<\/a>):<\/p>\n<p><code>node -v<\/code><\/p>\n<p>You should get an output similar to: <code>v8.0.0<\/code>.<\/p>\n<p>To verify that you installed Node.js correctly on your <strong>Mac<\/strong>, run the same command as above in your Terminal (or, even better, use <a href=\"https:\/\/www.iterm2.com\/\">iTerm<\/a>), and you should get the same similar output as above.<\/p>\n<p>To verify that you have <code>npm<\/code> install, just run: <code>npm -v<\/code> and you should get an output similar to: <code>5.0.1<\/code><\/p>\n<h3>Installing Git<\/h3>\n<p>In order to install Git, visit <a href=\"http:\/\/git-scm.com\/download\">http:\/\/git-scm.com\/download<\/a>, where you&#8217;ll see the following options:<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/5g5re2P.png\" alt=\"\" \/><\/p>\n<p>Installation on Windows and Mac OS is as simple as for Node.js as you just have to download and run the appropriate installer and follow the, yet again, familiar instructions.<\/p>\n<p>To verify that you installed Git correctly on your Windows\/Mac machine, run the following command in your Command prompt\/Terminal:<\/p>\n<p><code>git<\/code><\/p>\n<p>You should get an output similar to:<\/p>\n<pre><code>usage: git [--version] [--help] [-C ] [-c name=value]\n[--exec-path[=]] [--html-path] [--man-path] [--info-path]\n[-p | --paginate | --no-pager] [--no-replace-objects] [--bare]\n[--git-dir=] [--work-tree=] [--namespace=]\n&lt;command&gt;&lt;\/command&gt; []\n\nThese are common Git commands used in various situations:\n\nstart a working area (see also: git help tutorial)\nclone Clone a repository into a new directory\ninit Create an empty Git repository or reinitialize an existing one\n\nwork on the current change (see also: git help everyday)\nadd Add file contents to the index\nmv Move or rename a file, a directory, or a symlink\nreset Reset current HEAD to the specified state\nrm Remove files from the working tree and from the index\n\nexamine the history and state (see also: git help revisions)\nbisect Use binary search to find the commit that introduced a bug\ngrep Print lines matching a pattern\nlog Show commit logs\nshow Show various types of objects\nstatus Show the working tree status\n\ngrow, mark and tweak your common history\nbranch List, create, or delete branches\ncheckout Switch branches or restore working tree files\ncommit Record changes to the repository\ndiff Show changes between commits, commit and working tree, etc\nmerge Join two or more development histories together\nrebase Reapply commits on top of another base tip\ntag Create, list, delete or verify a tag object signed with GPG\n\ncollaborate (see also: git help workflows)\nfetch Download objects and refs from another repository\npull Fetch from and integrate with another repository or a local branch\npush Update remote refs along with associated objects\n\n'git help -a' and 'git help -g' list available subcommands and some\nconcept guides. See 'git help &lt;command&gt;&lt;\/command&gt;' or 'git help '\n&lt;command&gt;&lt;\/command&gt; to read about a specific subcommand or concept.\n&lt;command&gt;&lt;\/command&gt; ```\n\nYou don't have to worry if you don't know how to use Git since you won't be needing it directly (npm uses it to download packages). However, if you would like to learn (and there's no reason why you shouldn't expand your knowledge), you can check out this [good interactive tutorial](https:\/\/try.github.io\/levels\/1\/challenges\/1) made by CodeSchool.\n\n## Installing Ionic\nIf you've installed the needed prerequisites from the previous section, then in order to install Ionic (both on Mac and Windows) you just have to run the following command:\n\n`npm install ionic cordova -g`\n\nIonic uses [Cordova](https:\/\/cordova.apache.org\/) in the background for packaging up the native app, thus the need for it. We're using the **-g** flag here, in order to install the packages **ionic** and **cordova** [globally](https:\/\/docs.npmjs.com\/getting-started\/installing-npm-packages-globally).\n\nTo verify that you've installed Ionic correctly on your Windows\/Mac machine, run the following command in your Command prompt\/Terminal:\n\n`ionic -v`\n\nYou should get an output similar to:\n\n`3.4.0`\n\nTo verify that you've installed Cordova correctly on your Windows\/Mac machine, run the following command in your Command prompt\/Terminal:\n\n`cordova -v`\n\nYou should get an output similar to:\n\n`7.0.1`\n\nIf you had Node.js installed before (and haven't used it much since), you may get a notification like this:\n\n<\/code><\/pre>\n<hr \/>\n<p>Upgrade warning &#8211; for the CLI to run correctly,<br \/>\nit is highly suggested to upgrade the following:<\/p>\n<p>Please update your Node runtime to version >=0.12.x<\/p>\n<hr \/>\n<pre><code><br \/>To resolve this issue, just update Node.js; either by re-downloading it (on Windows) or by executing the following command in the Terminal (on a Mac):\n\n`brew update; brew upgrade node`\n\n&gt; I would like to take a moment here and encourage you to post a comment about any problems you may come across (and from my experience from StackOverflow there tends to be quite a lot of them ?) with these (seemingly simple) installation tasks. There always tends to be some older version of Node.js installed, or problems with cache and npm, blah blah blah... I will do my best to try to resolve your issue.\n\n## Using Ionic CLI\nIf you run `ionic` in your Terminal\/Command prompt you will get an output similar to the one below:\n\n<\/code><\/pre>\n<p>CLI 3.4.0<br \/>\nUsage:<\/p>\n<p>$ ionic <command><\/command> [&#8211;help] [&#8211;verbose] [&#8211;quiet] [] [options]<br \/>\n<command><\/command> $ ionic [&#8211;confirm] [&#8211;no-interactive] [&#8211;yarn] [&#8211;no-timeout]<\/p>\n<p>Global Commands:<\/p>\n<p>docs &#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230; Open the Ionic documentation website<br \/>\ninfo &#8230;&#8230;&#8230;&#8230;&#8230;&#8230;&#8230; Print system\/environment info<br \/>\nlogin &#8230;&#8230;&#8230;&#8230;&#8230;&#8230;.. Login with your Ionic ID<br \/>\nsignup &#8230;&#8230;&#8230;&#8230;&#8230;&#8230;. Create an Ionic account<br \/>\nstart &#8230;&#8230;&#8230;&#8230;&#8230;&#8230;.. Create a new project<br \/>\ntelemetry &#8230;&#8230;&#8230;&#8230;&#8230;. Opt in and out of telemetry<\/p>\n<p>Project Commands:<\/p>\n<p>You are not in a project directory.<\/p>\n<pre><code><br \/>What you got is actually a nice summary of the global commands that you can run using the ionic CLI, along with their short descriptions. _Btw, if you're wondering what this CLI thing is (and you haven't [Googled it yet](https:\/\/en.wikipedia.org\/wiki\/Command-line_interface)); it's actually an acronym for Command Line Interface, and in Ionic terms it's actually a tool that makes it easier to [start, build, run, and emulate, (and a lot more), Ionic apps](http:\/\/ionicframework.com\/docs\/cli\/)._\n\nIn the following chapters we will cover most of these commands, but for now, let's not burden you too much, and let's do a quick skin deep dive by making a simple project using `ionic start` command.\n\n## Starting a project with Ionic CLI by using the existing templates\nCool, you've made it so far - I promise, you're going to see some code now!\n\n![](http:\/\/i.imgur.com\/Y8FXaWm.jpg)\n\nIonic CLI allows you to start and initialize your project by using the aforementioned `ionic start` command. If you take a look at [the official documentation for the start command](http:\/\/ionicframework.com\/docs\/cli\/start\/) you will see something like the following definition:\n\n`ionic start [&amp;lt;name&amp;gt;] [&amp;lt;template&amp;gt;]`\n\n&gt;\u2757If you're familiar with Ionic 1, then you'll notice that they've changed it a bit.\n\nIf you still want to run Ionic 1 apps with an Ionic CLI version 3 or above, you need to pass in the `--type` flag like this:\n\n`ionic start myApp --type ionic1`\n\nIf you just run `ionic start appname` the Ionic CLI will make a bootstrap application with all the needed parts in the **appname** folder, with the so-called **blank** template.\n\nIn case you want to see the list of all the starter projects, you can run `ionic start --list`:\n\n<\/code><\/pre>\n<p>ionic start &#8211;list<br \/>\ntabs &#8230;&#8230;&#8230;&#8230;&#8230; ionic-angular A starting project with a simple tabbed interface<br \/>\nblank &#8230;&#8230;&#8230;&#8230;.. ionic-angular A blank starter project<br \/>\nsidemenu &#8230;&#8230;&#8230;.. ionic-angular A starting project with a side menu with navigation in the content area<br \/>\nsuper &#8230;&#8230;&#8230;&#8230;.. ionic-angular A starting project complete with pre-built pages, providers and best practices for Ionic development.<br \/>\nconference &#8230;&#8230;&#8230; ionic-angular A project that demonstrates a realworld application<br \/>\ntutorial &#8230;&#8230;&#8230;.. ionic-angular A tutorial based project that goes along with the Ionic documentation<br \/>\naws &#8230;&#8230;&#8230;&#8230;&#8230;. ionic-angular AWS Mobile Hub Starter<br \/>\ntabs &#8230;&#8230;&#8230;&#8230;&#8230; ionic1 A starting project for Ionic using a simple tabbed interface<br \/>\nblank &#8230;&#8230;&#8230;&#8230;.. ionic1 A blank starter project for Ionic<br \/>\nsidemenu &#8230;&#8230;&#8230;.. ionic1 A starting project for Ionic using a side menu with navigation in the content area<br \/>\nmaps &#8230;&#8230;&#8230;&#8230;&#8230; ionic1 An Ionic starter project using Google Maps and a side menu<\/p>\n<pre><code><br \/>Additionally, you can use Github repo starters and Codepen URL starters.\n\nIn our example, we will use the **sidemenu** template, so execute the following command from your Terminal\/Command prompt:\n\n`ionic start Ionic3_1stTutorial sidemenu`\n\nYou should see something similar to the following output:\n\n<\/code><\/pre>\n<p>\u2714 Creating directory .\/Ionic3_1stTutorial &#8211; done!<br \/>\n[INFO] Fetching app base (https:\/\/github.com\/ionic-team\/ionic2-app-base\/archive\/master.tar.gz)<br \/>\n\u2714 Downloading &#8211; done!<br \/>\n[INFO] Fetching starter template sidemenu (https:\/\/github.com\/ionic-team\/ionic2-starter-sidemenu\/archive\/master.tar.gz)<br \/>\n\u2714 Downloading &#8211; done!<br \/>\n\u2714 Updating package.json with app details &#8211; done!<br \/>\n\u2714 Creating configuration file ionic.config.json &#8211; done!<br \/>\n[INFO] Installing dependencies may take several minutes!<\/p>\n<blockquote><p>\n  npm install<br \/>\n  \u2714 Running command &#8211; done!<br \/>\n  npm install &#8211;save-dev &#8211;save-exact @ionic\/cli-plugin-ionic-angular@latest<br \/>\n  \u2714 Running command &#8211; done!<br \/>\n  git init<br \/>\n  \u2714 Running command &#8211; done!<br \/>\n  git add -A<br \/>\n  \u2714 Running command &#8211; done!<br \/>\n  git commit -m &#8220;Initial commit&#8221; &#8211;no-gpg-sign<br \/>\n  \u2714 Running command &#8211; done!\n<\/p><\/blockquote>\n<p>\u266c \u266b \u266c \u266b Your Ionic app is ready to go! \u266c \u266b \u266c \u266b<\/p>\n<p>Run your app in the browser (great for initial development):<br \/>\nionic serve<\/p>\n<p>Run on a device or simulator:<br \/>\nionic cordova run ios<\/p>\n<p>Test and share your app on a device with the Ionic View app:<br \/>\nhttp:\/\/view.ionic.io<\/p>\n<p>? Link this app to your Ionic Dashboard to use tools like Ionic View? No<\/p>\n<p>Go to your newly created project: cd .\/Ionic3_1stTutorial<\/p>\n<pre><code><br \/>## Running the Ionic application\nNow that we've initialized our Ionic application based on the **sidemenu** template, we have to run it in order to see what Ionic CLI generated for us.\n\nFirst, change the directory to the name of the application you gave in the `ionic start` command. In our case, that's: `cd Ionic3_1stTutorial`.\n\nIf you open up the project in your editor (I use [Visual Studio Code](https:\/\/code.visualstudio.com\/) with Solarized Dark theme nowadays, after being loyal, and paying ?, customer of [Sublime Text 3](http:\/\/www.sublimetext.com\/3)) you will see the following folder structure:\n\n![](http:\/\/i.imgur.com\/cecGiB3.png)\n\nIn the following chapters, we will spend most of the time in the **app** folder.\n\n&gt; \u2757 Those of you coming from Ionic 1 background be wary of the `www` folder - don't touch it at all, as this is where all the transpiled\/compressed code is saved. `src\/app` is your new `www` folder.\n\n&gt; Since Ionic 3 is based on [Angular](https:\/\/angular.io\/) framework, you will need at least a basic understanding of it, and you can start exploring it with a [free interactive tutorial](https:\/\/www.codeschool.com\/courses\/accelerating-through-angular) by CodeSchool, or you can check out my post for Pluralsight: [Getting started with Angular 2 by building a Giphy search application](https:\/\/www.pluralsight.com\/guides\/front-end-javascript\/getting-started-with-angular-2-by-building-a-giphy-search-application). Please note that this is very different from Angular 1 that you (and me ?) was accustomed to.\n\nThere are few ways in which you can get your Ionic application running:\n\n+ `ionic serve` - starts the app in a local web browser\n+ `ionic cordova emulate android` - starts the app in an emulator (in this example Android is used; you can also use **ios** if you're on a Mac and have all the prerequisites installed)\n+ `ionic cordova run android` - starts the app on the actual device that's plugged into your computer\n+ `ionic cordova build android` - creates an **.apk** file which you can physically copy to your Android device and run it (this scenario doesn't work for iOS devices in normal circumstances; you have to go through Xcode, as we'll describe in detail in the next chapter)\n\nSo, now run the following command in your Terminal\/Command prompt:\n\n`ionic serve`\n\nYou should see the following similar output:\n\n<\/code><\/pre>\n<p>[INFO] Starting app-scripts server: &#8211;port 8100 &#8211;p 8100 &#8211;livereload-port 35729 &#8211;r 35729 &#8211;address 0.0.0.0 &#8211; Ctrl+C to<br \/>\ncancel<br \/>\n[13:56:20] watch started &#8230;<br \/>\n[13:56:20] build dev started &#8230;<br \/>\n[13:56:20] clean started &#8230;<br \/>\n[13:56:20] clean finished in 1 ms<br \/>\n[13:56:20] copy started &#8230;<br \/>\n[13:56:20] transpile started &#8230;<br \/>\n[13:56:22] transpile finished in 2.03 s<br \/>\n[13:56:22] preprocess started &#8230;<br \/>\n[13:56:22] deeplinks started &#8230;<br \/>\n[13:56:22] deeplinks finished in 11 ms<br \/>\n[13:56:22] preprocess finished in 13 ms<br \/>\n[13:56:22] webpack started &#8230;<br \/>\n[13:56:22] copy finished in 2.20 s<br \/>\n[13:56:29] webpack finished in 6.91 s<br \/>\n[13:56:29] sass started &#8230;<br \/>\n[13:56:30] sass finished in 953 ms<br \/>\n[13:56:30] postprocess started &#8230;<br \/>\n[13:56:30] postprocess finished in 10 ms<br \/>\n[13:56:30] lint started &#8230;<br \/>\n[13:56:30] build dev finished in 9.95 s<br \/>\n[13:56:30] watch ready in 10.03 s<br \/>\n[13:56:30] dev server running: http:\/\/localhost:8103\/<\/p>\n<p>[INFO] Development server running<br \/>\nLocal: http:\/\/localhost:8103<\/p>\n<p>[13:56:35] lint finished in 5.13 s<br \/>\n&#8220;`<\/p>\n<p>Also, you should get your local browser started up automatically, pointing to the address <strong>http:\/\/localhost:8100\/<\/strong>, with an output similar to the one on the image below (I resized the window for clarity &#8211; <em>if you&#8217;re using <a href=\"https:\/\/www.google.com\/chrome\/\">Chrome<\/a>, you can get the <a href=\"https:\/\/chrome.google.com\/webstore\/detail\/window-resizer\/kkelicaakdanhinjdeammmilcgefonfh\">Window Resizer plugin<\/a>, or use the <a href=\"https:\/\/developer.chrome.com\/devtools\/docs\/device-mode\">Chrome Dev Tools Emulate feature<\/a><\/em>):<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/Z2CI0zF.png\" alt=\"\" \/><\/p>\n<p>Awesome thing about this is that you have automatically set up <strong>live reload<\/strong> feature, which means that as soon as you change the code in your <strong>app<\/strong> folder, the application will reload automatically so that you don&#8217;t have to keep pressing the F5 (&amp;#8984;+R) key on your Windows (Mac) machine.<\/p>\n<blockquote><p>\n  If you like, you can get this project on <a href=\"https:\/\/github.com\/Hitman666\/Ionic3_1stTutorial\">Github<\/a>.\n<\/p><\/blockquote>\n<h2>Conclusion<\/h2>\n<p>In this chapter we&#8217;ve gone through the options that you have in making an app these days. Then we explained what actually is Ionic framework and how to install it on both Mac and Windows. With the use of the Ionic CLI we started a project based on the <em>sidemenu<\/em> template, and finally, we ran it locally in the browser with the use of <code>ionic serve<\/code> command. In the next chapter, I&#8217;ll show you how to create your own calculator application by making use of Ionic Creator.<\/p>\n<p><img decoding=\"async\" src=\"http:\/\/i.imgur.com\/pkjp2eR.jpg\" alt=\"\" \/><\/p>\n<blockquote class=\"twitter-tweet\" data-width=\"550\">\n<p lang=\"en\" dir=\"ltr\">How to get started with <a href=\"https:\/\/twitter.com\/Ionicframework\">@Ionicframework<\/a> 3 on <a href=\"https:\/\/twitter.com\/hashtag\/Mac?src=hash\">#Mac<\/a> and <a href=\"https:\/\/twitter.com\/hashtag\/Windows?src=hash\">#Windows<\/a> <a href=\"https:\/\/t.co\/DZrp4q5ott\">https:\/\/t.co\/DZrp4q5ott<\/a> <a href=\"https:\/\/t.co\/SbGfTbXzh0\">pic.twitter.com\/SbGfTbXzh0<\/a><\/p>\n<p>&mdash; Nikola Bre\u017enjak (@HitmanHR) <a href=\"https:\/\/twitter.com\/HitmanHR\/status\/886638690293997569\">July 16, 2017<\/a><\/p><\/blockquote>\n<p><script async src=\"\/\/platform.twitter.com\/widgets.js\" charset=\"utf-8\"><\/script><\/p>\n","protected":false},"excerpt":{"rendered":"<p>This is the first post in a series of posts which will teach you how to take advantage of your web development knowledge in building hybrid applications for&hellip;<\/p>\n","protected":false},"author":1,"featured_media":3497,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[56],"tags":[],"class_list":["post-3496","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-ionic3"],"_links":{"self":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/3496","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/comments?post=3496"}],"version-history":[{"count":8,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/3496\/revisions"}],"predecessor-version":[{"id":3684,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/posts\/3496\/revisions\/3684"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media\/3497"}],"wp:attachment":[{"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/media?parent=3496"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/categories?post=3496"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/nikola-breznjak.com\/blog\/wp-json\/wp\/v2\/tags?post=3496"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}