How to make Ionic apps in React Using Capacitor
Tags: react, ionic, capacitor, app
Published: 2019-09-20 11:54:36

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors is-withLeadingImage" lang="en" ><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="8a3f" class="section section--body section--first section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="a868" class="graf graf--p graf-after--figure">If you are here, that means you were searching for how to create Ionic apps in react using capacitor. If that’s true, then you are at the right place. Here I would be creating an Ionic app in React Using Capacitor. Need not worry, I would be taking you step by step how to make Ionic apps in React Using Capacitor. I would be cooking a simple application. 🥘</p><blockquote name="cd95" class="graf graf--blockquote graf-after--p">You can also check out my<strong class="markup--strong markup--blockquote-strong"> </strong><a href="https://store.enappd.com/product/ionic-react-full-app-capacitor/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Ionic 4 React Full App</strong></a><strong class="markup--strong markup--blockquote-strong">. </strong><em class="markup--em markup--blockquote-em">It is loaded with a good number of options, layouts, and functionalities. This is a complete starter app to get started with Ionic 4 and React JS with capacitor.</em></blockquote><p name="c93f" class="graf graf--p graf-after--blockquote"><a href="https://ionicframework.com"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">Ionic</strong></a> has been gaining popularity in the last few years, and rightfully so. Making apps in Ionic is a breeze compared to Native languages (Java / Swift). Ionic framework’s domain encompasses a huge variety of mobile app features which can create almost 90% of the apps today.</p><p name="262d" class="graf graf--p graf-after--p"><a href="https://reactjs.org/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">React JS</strong></a> has come at a good time helping the developers to build highly engaging web apps and user interfaces quickly and efficiently. It allows you to break down the components and create a single page application with less coding. It is mostly popular for its shadow DOM, which it uses for limited scope DOM manipulation, which makes React apps faster. It is due to these major <strong class="markup--strong markup--p-strong">advantages</strong> that <strong class="markup--strong markup--p-strong">React JS</strong> has gained much spotlight.</p><p name="9ad2" class="graf graf--p graf-after--p is-selected">For many years Ionic has stuck with Angular framework. But with Ionic 4, it has broken free of the framework restriction. Now Ionic 4 supports Angular, React and Vue JS frameworks.</p><p name="6172" class="graf graf--p graf-after--p">In February 2018 the Ionic team announced <a href="https://capacitor.ionicframework.com/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Capacitor</a>. Capacitor allows you to make your frontend builds run everywhere, for example, iOS, Android, Electron and in the browser as a progressive web application (PWA) using any underlying framework.</p><figure tabindex="0" contenteditable="false" name="591e" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 220px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 31.4%;"></div><img class="graf-image" data-image-id="1*yi8_7cQVy8QqSDhw3PQCig.jpeg" data-width="1400" data-height="440" src="https://cdn-images-1.medium.com/max/800/1*yi8_7cQVy8QqSDhw3PQCig.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic introduced Capacitor for cross platform and cross framework development</figcaption></figure><p name="8438" class="graf graf--p graf-after--figure"><a href="https://capacitor.ionicframework.com/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--p-strong">Ionic Capacitor</strong></a> is an open source <strong class="markup--strong markup--p-strong">framework </strong>innovation to help you build Progressive Native Web, Mobile and Desktop <strong class="markup--strong markup--p-strong">apps</strong>. Alternatively, Apache <strong class="markup--strong markup--p-strong">Cordova</strong> (also known as PhoneGap) does the same for accessing native features of the device from the mobile WebView.</p><h3 name="db4d" class="graf graf--h3 graf-after--p">Benefits of using Capacitor in IONIC&nbsp;App</h3><ol class="postList"><li name="17c9" class="graf graf--li graf-after--h3">As you know, starting from <a href="https://ionicframework.com"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener"    target="_blank"><strong class="markup--strong markup--li-strong"><em class="markup--em markup--li-em">Ionic Framework</em></strong></a> v4, you can use any UI framework of your choice&#8202;—&#8202;<a href="https://angular.io"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener"    target="_blank"><strong class="markup--strong markup--li-strong"><em class="markup--em markup--li-em">Angular</em></strong></a><strong class="markup--strong markup--li-strong"><em class="markup--em markup--li-em"> (Default)</em></strong>, <a href="https://reactjs.org"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener"    target="_blank"><strong class="markup--strong markup--li-strong"><em class="markup--em markup--li-em">ReactJS</em></strong></a> and <a href="https://vuejs.org"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener"    target="_blank"><strong class="markup--strong markup--li-strong"><em class="markup--em markup--li-em">Vue</em></strong></a> as of now. This would majority help the software development industry, making it easier for them, to find any web developer, to hop-on and start coding with minimal or zero learning curve to <strong class="markup--strong markup--li-strong"><em class="markup--em markup--li-em">build</em></strong> and <strong class="markup--strong markup--li-strong"><em class="markup--em markup--li-em">publish hybrid native apps</em></strong>.</li><li name="62cc" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Ease of integrating native controls</strong>. Capacitor is aiming to make it easier to include native user interface controls wherever desired. For example, if you wanted to use a native menu rather than using the browser to create that interface.</li><li name="9147" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">Native functionality is available immediately</strong>. When using Cordova, you need to wait until the device is ready before making calls to native functionality (e.g. by using <code class="markup--code markup--li-code">platform.ready()</code>). Capacitor will export JavaScript on app boot so that this is no longer required.</li><li name="236e" class="graf graf--li graf-after--li"><strong class="markup--strong markup--li-strong">PWA Compatibility</strong>. There has been a huge movement for Progressive Web Applications recently. They are starting to receive more support from browsers, and more tools are starting to pop up to help people build PWAs. One cool thing about a PWA is that it can also easily be bundled as a native application and access native functionality (using Cordova/Capacitor). Native code will not work when running as a PWA through the browser, though. This can make maintaining a single codebase for a project that will be distributed as a native application and as a PWA (and perhaps even as a desktop application as well) difficult. With Capacitor as the runtime layer, it will be able to gracefully handle any error that arises from attempting to access native functionality in an environment that does not have it.</li></ol><h3 name="14de" class="graf graf--h3 graf-after--li">Capacitor Requires Dependencies</h3><h4 name="0faa" class="graf graf--h4 graf-after--h3">The base requirements</h4><p name="8332" class="graf graf--p graf-after--h4">are <a href="https://nodejs.org/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Node v8.6.0</a> or later, and NPM version 5.6.0 or later (which is usually automatically installed with the required version of Node).</p><p name="c07d" class="graf graf--p graf-after--p">Capacitor relies on using the <code class="markup--code markup--p-code">npx</code> command, which is only available in version <code class="markup--code markup--p-code">8.3.0</code> or higher of Node. You likely already have Node installed, so the easiest way to switch between Node versions is to install <code class="markup--code markup--p-code">n</code>:</p><pre name="b0b2" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">npm install -g n</code></pre><h4 name="7fe9" class="graf graf--h4 graf-after--pre">iOS Development</h4><p name="c6d3" class="graf graf--p graf-after--h4">For building iOS apps, Capacitor requires a Mac with Xcode 10 or above.<em class="markup--em markup--p-em"> Soon, you’ll be able to use </em><a href="http://ionicframework.com/appflow"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank"><em class="markup--em markup--p-em">Ionic Appflow</em></a><em class="markup--em markup--p-em"> to build for iOS even if you’re on Windows.</em></p><p name="7369" class="graf graf--p graf-after--p">Additionally, you’ll need to install <a href="https://cocoapods.org/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">CocoaPods</a> (<code class="markup--code markup--p-code">sudo gem install cocoapods</code>), and install the Xcode Command Line tools (either from Xcode, or running <code class="markup--code markup--p-code">xcode-select --install</code>).</p><p name="4fd4" class="graf graf--p graf-after--p">Once you have CocoaPods installed, update your local repo by running <code class="markup--code markup--p-code">pod repo update</code>. You should run this command periodically to ensure you have the latest versions of CocoaPods dependencies.</p><p name="1162" class="graf graf--p graf-after--p">As a rule, the latest version of Capacitor always supports the last two iOS versions. For example, iOS 12 and iOS 11. For support for older versions of iOS, use an older version of Capacitor (if available).</p><h4 name="8faa" class="graf graf--h4 graf-after--p">Android Development</h4><p name="9f45" class="graf graf--p graf-after--h4">First, the Java 8 JDK must be installed and <a href="https://stackoverflow.com/a/24657630/32140"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">set to the default</a> if you have other versions of the JDK installed. Java 9 does <em class="markup--em markup--p-em">not</em> work at the moment.</p><p name="edcf" class="graf graf--p graf-after--p">Android development requires the Android SDK installed with <a href="https://developer.android.com/studio/index.html"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Android Studio</a>. Technically, Android Studio isn’t required as you can build and run apps using only the Android CLI tools, but it will make building and running your app much easier so I strongly recommend using it.</p><p name="bc7b" class="graf graf--p graf-after--p">Android version support for Capacitor is more complex than iOS. Currently, it is targeting API level 21 or greater, meaning Android 5.0 (Lollipop) or above.<br>As of January 2018, 5.0 or greater represented over 75% of the Android market, and this percentage is growing quickly. By the time Capacitor is production ready, this percentage should be much higher.</p><p name="fd51" class="graf graf--p graf-after--p">Also, Capacitor requires an Android WebView with Chrome version 50 or later.</p><h3 name="16db" class="graf graf--h3 graf-after--p">Simple Recipe For build App with IONIC and&nbsp;React</h3><h4 name="6608" class="graf graf--h4 graf-after--h3">1. Create a new react&nbsp;Project</h4><p name="5084" class="graf graf--p graf-after--h4">To create a new React project with <code class="markup--code markup--p-code">create-react-app</code>, you can either use <a href="https://alligator.io/workflow/npx/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">npx</a> or install <code class="markup--code markup--p-code">create-react-app</code> globally:</p><pre name="6964" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">npx create-react-app react-ionic --typescript</code></pre><p name="8253" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong">OR</strong></p><pre name="1956" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">$ npm install create-react-app -g<br>$ create-react-app react-ionic --typescript</code></pre><figure tabindex="0" contenteditable="false" name="a464" class="graf graf--figure graf-after--pre"><div class="aspectRatioPlaceholder is-locked" style="max-width: 585px; max-height: 365px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 62.4%;"></div><img class="graf-image" data-image-id="1*LIoKATKY6H7TfyENpCz6DQ.png" data-width="585" data-height="365" src="https://cdn-images-1.medium.com/max/800/1*LIoKATKY6H7TfyENpCz6DQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Successfully created Ionic React&nbsp;app</figcaption></figure><h4 name="d71b" class="graf graf--h4 graf-after--figure">2. Open the Project in code editor of your&nbsp;choice</h4><pre name="e048" class="graf graf--pre graf-after--h4"><code class="markup--code markup--pre-code">$ cd react-ionic<br>$ code .</code></pre><h4 name="831a" class="graf graf--h4 graf-after--pre">3. Run the project in&nbsp;browser</h4><pre name="e1d4" class="graf graf--pre graf-after--h4"><code class="markup--code markup--pre-code">npm run start</code></pre><p name="db6c" class="graf graf--p graf-after--pre">This command will search start script in your <code class="markup--code markup--p-code">package.json</code> file and run the command you mentioned in your start script&nbsp;. E.g.</p><pre name="d0c5" class="graf graf--pre graf--startsWithDoubleQuote graf-after--p">“start”: “react-scripts start”</pre><p name="758d" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong"><em class="markup--em markup--p-em">react-scripts start</em></strong> will build your code in development mode and run it on your browser</p><figure tabindex="0" contenteditable="false" name="095d" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 337px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 48.1%;"></div><img class="graf-image" data-image-id="1*yFu7n7_JHQQuljd2EjK8oA.png" data-width="1920" data-height="924" src="https://cdn-images-1.medium.com/max/800/1*yFu7n7_JHQQuljd2EjK8oA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Default React App opened in&nbsp;browser</figcaption></figure><p name="b2b2" class="graf graf--p graf-after--figure">so now you can able to see this screen on your browser</p><h4 name="4311" class="graf graf--h4 graf-after--p">4. Installing Ionic in our React&nbsp;app</h4><p name="1e94" class="graf graf--p graf-after--h4">Till now we have not included Ionic anywhere. This step included Ionic in the project.</p><pre name="7e83" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">npm install @ionic/core @ionic/react</code></pre><h4 name="ae1d" class="graf graf--h4 graf-after--pre">5. Install React dependency of React Router with&nbsp;types</h4><p name="68d9" class="graf graf--p graf-after--h4">React router is required for navigation purpose</p><pre name="4ee5" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">npm install react-router react-router-dom @types/react-router @types/react-router-dom</code></pre><h4 name="e40d" class="graf graf--h4 graf-after--pre">6. Using Ionic with&nbsp;React</h4><p name="1bd6" class="graf graf--p graf-after--h4">In this step, we will start coding and after this blog we will able to make Ionic&#8202;—&#8202;react app with basic React Library ( React Router )</p><blockquote name="ff94" class="graf graf--blockquote graf-after--p">At this stage, we can use Ionic like any other dependency in our project. Each <a href="https://ionicframework.com/docs/components/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank">component</a> has been individually exported and can be imported as such.</blockquote><ol class="postList"><li name="45a1" class="graf graf--li graf-after--blockquote">Firstly, head over to <code class="markup--code markup--li-code">index.tsx</code> and add the appropriate styles within <code class="markup--code markup--li-code">@ionic/core</code>:</li></ol><figure tabindex="0" contenteditable="false" name="7d65" class="graf graf--figure graf--iframe graf-after--li"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/bunyy/321d9c821a4a3bd0d3ada4965376afdd.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Adding Ionic CSS files in index.tsx</figcaption></figure><p name="974e" class="graf graf--p graf-after--figure">2. Then, inside of <code class="markup--code markup--p-code">App.tsx</code>, we can import the Ionic components and use them as we wish!</p><figure tabindex="0" contenteditable="false" name="8bbf" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/bunyy/8df33a19c504c0f77370c9084cd15316.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Importing Ionic components in App.tsx</figcaption></figure><p name="40ae" class="graf graf--p graf-after--figure">3. Now time for importing Route in app&nbsp;! So inside our <code class="markup--code markup--p-code">App.tsx</code>, we can import React Router Dependency and add Routes</p><figure tabindex="0" contenteditable="false" name="46b2" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/bunyy/ad63efa10f2f22f71731ab6fc1768ef4.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Importing Routes in App.tsx</figcaption></figure><p name="96b9" class="graf graf--p graf-after--figure">4. Now we will use Ionic UI components in our app. So just make one folder called <strong class="markup--strong markup--p-strong">Signin</strong> in your Signin folder Create two files named <strong class="markup--strong markup--p-strong">Sign.tsx</strong> and <strong class="markup--strong markup--p-strong">Sign.css.</strong></p><figure tabindex="0" contenteditable="false" name="fb4f" class="graf graf--figure graf--iframe graf-after--p"><div class="aspectRatioPlaceholder is-locked"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 35.699999999999996%;"></div><div class="iframeContainer">{% gist https://gist.github.com/bunyy/fe1a04d8effe0764f10fc6b1fa7354b1.js %}</div></div><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for embed (optional)">Signin folder contents</figcaption></figure><p name="f7a1" class="graf graf--p graf-after--figure">6. Here’s the results of our hard work:</p><figure tabindex="0" contenteditable="false" name="a950" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 365px; max-height: 645px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 176.7%;"></div><img class="graf-image" data-image-id="1*wOroJ76XkS49PL7yJ9EO5A.png" data-width="365" data-height="645" src="https://cdn-images-1.medium.com/max/800/1*wOroJ76XkS49PL7yJ9EO5A.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Signin page created in Ionic&nbsp;React</figcaption></figure><p name="dec2" class="graf graf--p graf-after--figure">We are almost ready with our first page in Ionic 👨&zwj;🍳&nbsp;. The Ionic React app is cooked and ready 🥘 🥘 🥘 🥘</p><figure tabindex="0" contenteditable="false" name="8f4a" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 500px; max-height: 370px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 74%;"></div><img class="graf-image" data-image-id="1*0FRAA2BuPdcjytSIaLPnQQ.png" data-width="500" data-height="370" src="https://cdn-images-1.medium.com/max/800/1*0FRAA2BuPdcjytSIaLPnQQ.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic React is ready to be served&nbsp;!</figcaption></figure><p name="2dba" class="graf graf--p graf-after--figure">Cats&nbsp;! 🙄</p><p name="7d24" class="graf graf--p graf-after--p">Now we will learn how to make build for IOS and android.</p><h3 name="812c" class="graf graf--h3 graf-after--p">Building your App for&nbsp;PWA</h3><h4 name="88b7" class="graf graf--h4 graf-after--h3">Building web&nbsp;code</h4><p name="1c07" class="graf graf--p graf-after--h4">Capacitor does not have any built-in feature to build web code. Instead, you will use your framework’s build process of choice.</p><p name="178b" class="graf graf--p graf-after--p">Regardless of your build process, I recommend adding a <code class="markup--code markup--p-code">build</code> script to your <code class="markup--code markup--p-code">package.json</code> to enable the standard frontend build command:</p><pre name="b59a" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">{<br>  "scripts": {<br>    "build": "command-to-build (ex: webpack, tsc, babel, etc.)"<br>  }<br>}</code></pre><pre name="ffe6" class="graf graf--pre graf-after--pre"><code class="markup--code markup--pre-code">npm run build</code></pre><p name="f507" class="graf graf--p graf-after--pre">This builds your Progressive Web App if you’ve configured <a href="https://capacitor.ionicframework.com/docs/basics/progressive-web-app"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Progressive Web App</a> support already.</p><h4 name="7b2c" class="graf graf--h4 graf-after--p">Building android&nbsp;app</h4><p name="f9f7" class="graf graf--p graf-after--h4"><strong class="markup--strong markup--p-strong">Copying Web Code&#8202;—&#8202;</strong>Once your web code is built, it needs to be copied to each native project:</p><pre name="e865" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">npx cap copy</code></pre><p name="7c1d" class="graf graf--p graf-after--pre">This should be run each time you perform a build. Feel free to add this command to the end of your build script in <code class="markup--code markup--p-code">package.json</code> like this</p><pre name="8b30" class="graf graf--pre graf-after--p">"build”: “react-scripts build &amp;&amp; npx cap copy”</pre><p name="4120" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong">Creating Android Platform for Capacitor</strong></p><p name="dc2c" class="graf graf--p graf-after--p">By default, an Android project is created for every Capacitor project. If you are adding Capacitor to an existing project, you can manually add the Android project using</p><pre name="6fbd" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">npx cap add android<br>npx cap sync</code></pre><p name="a915" class="graf graf--p graf-after--pre">The <code class="markup--code markup--p-code">sync</code> command updates dependencies, and copies any web assets to your project. You can also run</p><pre name="4471" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">npx cap copy</code></pre><p name="868f" class="graf graf--p graf-after--pre">To copy web assets only, which is faster if you know you don’t need to update native dependencies.</p><p name="c710" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Building Native Project</strong></p><p name="5d26" class="graf graf--p graf-after--p">Currently, Android relies on Android Studio (or, optionally, the Android CLI tools) to build the app:</p><pre name="e256" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">npx cap open android</code></pre><p name="088c" class="graf graf--p graf-after--pre">Once Android Studio launches, you can build your app through the <a href="https://developer.android.com/studio/run"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">standard Android Studio workflow.</a></p><figure tabindex="0" contenteditable="false" name="82e1" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 404px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 57.599999999999994%;"></div><img class="graf-image" data-image-id="1*buMzzQbuxCK5TVtS-MrNeg.png" data-width="1582" data-height="912" src="https://cdn-images-1.medium.com/max/800/1*buMzzQbuxCK5TVtS-MrNeg.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Build your Ionic React app with Android&nbsp;Studio</figcaption></figure><p name="6a68" class="graf graf--p graf-after--figure">To run the app on your device, click on build icon in Header, connect your app to system and enable USB debugging on your device. This will run app on your device.</p><h3 name="6c70" class="graf graf--h3 graf-after--p">Building IOS&nbsp;app</h3><p name="3de3" class="graf graf--p graf-after--h3"><strong class="markup--strong markup--p-strong">Copying Web Code</strong></p><p name="06eb" class="graf graf--p graf-after--p">Once your web code is built, it needs to be copied to each native project:</p><pre name="34e9" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">npx cap copy</code></pre><p name="d8a6" class="graf graf--p graf-after--pre">This should be run each time you perform a build. Feel free to add this command to the end of your build script in <code class="markup--code markup--p-code">package.json like this.</code></p><pre name="3eab" class="graf graf--pre graf--startsWithDoubleQuote graf-after--p">“build”: “react-scripts build &amp;&amp; npx cap copy”</pre><p name="46a1" class="graf graf--p graf-after--pre"><strong class="markup--strong markup--p-strong">Creating iOS Platform for Capacitor</strong></p><p name="1da6" class="graf graf--p graf-after--p">By default, an iOS project is created for every Capacitor project. If you are adding Capacitor to an existing project, you can manually add the iOS project using</p><pre name="3ad6" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">npx cap add ios<br>npx cap sync</code></pre><p name="50f6" class="graf graf--p graf-after--pre">The <code class="markup--code markup--p-code">sync</code> command updates dependencies, and copies any web assets to your project. You can also run</p><pre name="3aa6" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">npx cap copy</code></pre><p name="6ebd" class="graf graf--p graf-after--pre">To copy web assets only, which is faster if you know you don’t need to update native dependencies.</p><p name="a781" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Building Native Project</strong></p><p name="011f" class="graf graf--p graf-after--p">iOS relies on Xcode to do the final app compile</p><pre name="a860" class="graf graf--pre graf-after--p"><code class="markup--code markup--pre-code">npx cap open ios</code></pre><p name="e142" class="graf graf--p graf-after--pre">Once Xcode launches, you can build your finally app binary through the <a href="https://developer.apple.com/library/archive/documentation/ToolsLanguages/Conceptual/Xcode_Overview/CreatingProjects.html"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">standard Xcode workflow.</a></p><h3 name="fce5" class="graf graf--h3 graf-after--p">Conclusion</h3><p name="0aa2" class="graf graf--p graf-after--h3">In this post, we learnt how to integrate Ionic in a React app, as well as in a React progressive web app. We also learnt how to make Android and IOS build using capacitor.</p><figure tabindex="0" contenteditable="false" name="c10f" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 480px; max-height: 348px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 72.5%;"></div><img class="graf-image" data-image-id="1*ceLX14cSsAZ-M7c2GHdlSA.gif" data-width="480" data-height="348" src="https://cdn-images-1.medium.com/max/800/1*ceLX14cSsAZ-M7c2GHdlSA.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Now, chill</figcaption></figure><p name="8331" class="graf graf--p graf-after--figure">Stay tuned for more Ionic 4 blogs&nbsp;!</p><p name="7a72" class="graf graf--p graf-after--p">Happy Coding.🤓👍🏼</p><p name="2565" class="graf graf--p graf-after--p">This blog was originally posted on <a href="http://enappd.com"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">enappd.com</a></p><h3 name="1681" class="graf graf--h3 graf-after--p">Next Steps</h3><p name="8964" class="graf graf--p graf-after--h3">Now that you have learnt how to implement Twitter login in Ionic 4 apps, there are several things you can do next</p><ul class="postList"><li name="dcb9" class="graf graf--li graf-after--p">How to implement <a href="http://Facebook%20login%20in%20Ionic%204"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener"    target="_blank">Twitter login in Ionic 4</a></li><li name="0e72" class="graf graf--li graf-after--li">How to implement <a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener"    target="_blank">Facebook login in Ionic 4</a></li><li name="e62a" class="graf graf--li graf-after--li">How to implement <a href="https://enappd.com/blog/how-to-create-mobile-games-pwa-with-ionic-4-and-phaser/19"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener"    target="_blank">Phaser game framework in Ionic 4</a></li><li name="21d0" class="graf graf--li graf-after--li">How to i<a href="https://enappd.com/blog/how-to-translate-in-ionic-4-globalization-internationalization-and-localization/11"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener"    target="_blank">mplement multi-language text in Ionic 4</a></li><li name="d038" class="graf graf--li graf-after--li">How to i<a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener"    target="_blank">mplement Stripe payment in Ionic 4</a></li><li name="3f89" class="graf graf--li graf-after--li">How to i<a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener"    target="_blank">mplement PayPal payment in Ionic 4</a></li><li name="ede6" class="graf graf--li graf-after--li">How to <a href="https://enappd.com/blog/best-fitness-plugins-for-ionic-4-how-to-use-pedometer/15"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener"    target="_blank">implement Pedometer in Ionic 4</a></li><li name="80f9" class="graf graf--li graf-after--li">Integrate <a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener"    target="_blank">Apple Pay in Ionic 4</a></li><li name="de81" class="graf graf--li graf-after--li">Integrate <a href="https://enappd.com/blog/how-to-integrate-razorpay-in-ionic-4-apps-and-pwa/20"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener"    target="_blank">Razorpay in Ionic 4</a></li></ul><h3 name="362a" class="graf graf--h3 graf-after--li">Need FREE Ionic 4 Starters?</h3><p name="eff2" class="graf graf--p graf-after--h3">You can also find free Ionic 4 starters on our website <a href="http://enappd.com"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener noopener"    target="_blank">enappd.com</a></p><ul class="postList"><li name="2b12" class="graf graf--li graf-after--p"><a href="https://store.enappd.com/product/free-chat-themes-ionic4/"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener noopener"    target="_blank">Free Chat Themes Starter for Ionic 4</a></li><li name="a4be" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/how-to-create-mobile-games-pwa-with-ionic4-and-phaser-7fb1e917678e"  class="markup--anchor markup--li-anchor"    target="_blank">Free Ionic 4&#8202;—&#8202;Phaser game framework integration</a></li><li name="0630" class="graf graf--li graf-after--li"><a href="https://store.enappd.com/product/ionic-4-paypal-payment-starter/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Ionic 4 PayPal integration</a></li><li name="5fd6" class="graf graf--li graf-after--li"><a href="https://store.enappd.com/product/ionic-4-stripe-payment-starter/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Ionic 4 Stripe integration</a></li><li name="3b0c" class="graf graf--li graf-after--li"><a href="https://store.enappd.com/product/ionic-4-razorpay-payment-starter/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Ionic 4 Razorpay integration</a></li><li name="efc6" class="graf graf--li graf-after--li"><a href="https://store.enappd.com/product/ionic-4-apple-pay-starter/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Ionic 4 Apple Pay integration</a></li><li name="4d9e" class="graf graf--li graf-after--li"><a href="https://store.enappd.com/product/ionic-4-twitter-login-with-firebase/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Ionic 4 Twitter Login</a></li><li name="6dc8" class="graf graf--li graf-after--li"><a href="https://store.enappd.com/product/ionic-4-facebook-login-with-firebase/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Ionic 4 Facebook Login</a></li></ul><p name="2930" class="graf graf--p graf-after--li">You can also make your next awesome app using <a href="https://store.enappd.com/product/ionic-react-full-app-capacitor/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic 4 React Full App</a></p><figure tabindex="0" contenteditable="false" name="eab6" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 441px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63%;"></div><img class="graf-image" data-image-id="1*btdN7irJWxY1NtbYqbUyiw.jpeg" data-width="760" data-height="479" src="https://cdn-images-1.medium.com/max/800/1*btdN7irJWxY1NtbYqbUyiw.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Use Ionic React Full App to make your next awesome&nbsp;app</figcaption></figure><h3 name="1b1c" class="graf graf--h3 graf-after--figure">References</h3><ul class="postList"><li name="bb4a" class="graf graf--li graf-after--h3"><a href="https://ionicframework.com/docs"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener noopener"    target="_blank">Ionic documentation</a></li><li name="568f" class="graf graf--li graf-after--li graf--trailing"><a href="https://capacitor.ionicframework.com"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Capacitor documentation</a></li></ul></div></div></section></div></article></main>