Ionic stupid simple.
Tags: ionic, stackblitz
Published: 2019-06-18 20:23:01

---
title: Ionic stupid simple.
published: true
description: A simple tutorial on getting started with writing an ionic hybrid application.
tags: ionic, stackblitz
---
# Before Getting Started
This is a quick and simple way I've found to get up and running with a hybrid application that you can build natively on your device. It's in no way the 'best' way, but damn is it simple and fast to get started. I think the future for application development is looking very exciting with all the tools that have come out recently. Also! If you've got any other really nice cross-platform setups you like that I should check out leave a comment below so I can check em out!

# Prerequisites + Disclaimer
**Disclaimer**
I will be building this on a mac and for ios I am not familiar with windows and android so not sure how well this tutorial ports over to them. If differences occur when you're trying it out I'd love hear about it and learn more about systems I'm not as familiar with!

**Things you need**
This tutorial requires [node](nodejs.org) and [xcode](https://developer.apple.com/xcode/) installed locally on your machine.

# Getting Started!!

## Stackblitz
One of my favorite new tech tools right now is [stackblitz](https://stackblitz.com) it's a great tool for throwing together a quick poc or sharing bugs with others. It's highly configurable and comes with the most common development environments already setup. For this tutorial I searched on stackblitz for an already made [ionic](https://ionicframework.com/) project that we can play with and use for this tutorial. Click this [link](https://stackblitz.com/edit/ionic-4-shadow-dom-clarification) to open the project.

It should look a bit like this:
![stack blitz project default setup](https://thepracticaldev.s3.amazonaws.com/i/oknhcp5gvoesz6kp7bbk.png)

## Make some edits
There wasn't any actual functionality on this project, so I wanted to add come click listeners.<br>
Open the `src/app/home/home.page.html` file and replace the `<ion-content>` tag to look like this:
```html
<ion-content padding>
  <ion-button class="host-element" (click)="logClick('big span')">
    <span class="host-child-element">span</span>
  </ion-button>

  <button type="button" (click)="logClick('button')">BUTTON</button>
  <span (click)="logClick('litte span')">span</span>
</ion-content>
```

and then in the `src/app/home/home.page.ts` file add this log method inside the `HomePage` class:
```ts
  logClick = (msg) => console.log(msg, 'clicked!')
```

Stackblitz should hot reload for you so you can just go click the buttons and see the log messages like so:
![stackblitz project with console open showing log messages](https://thepracticaldev.s3.amazonaws.com/i/gbotx0gdyqgwf12mqqbe.png)

# Getting it on a device
Okay so we're able to edit some code in a browser and see live results in the same page, dev life is pretty sweet! But how about getting it from the browser onto an actual phone? Well that's actually fairly easy as well.

## Download the code.
First things first download the code by clicking the download button in the top left of the stackblitz menu.
![stackblitz project highlighting download button](https://thepracticaldev.s3.amazonaws.com/i/x96wer3ixdsuh4a40nop.png)

<br>
Once downloaded, navigate to newly downloaded project and run:

`npm i` to install all the dependencies
`npm i -D cordova @ionic/ng-toolkit` to install cordova and ionic's tools to the project for building.

Now just run:
`npx ionic cordova build ios` to build to project for ios.

If You get an error that looks like this:
```bash
chunk {cordova} cordova.js, cordova.js.map (cordova) 76.3 kB  [rendered]
chunk {main} main.js, main.js.map (main) 653 bytes [initial] [rendered]
chunk {polyfills} polyfills.js, polyfills.js.map (polyfills) 92.4 kB [initial] [rendered]
chunk {runtime} runtime.js, runtime.js.map (runtime) 6.08 kB [entry] [rendered]
chunk {styles} styles.js, styles.js.map (styles) 67.2 kB [initial] [rendered]

ERROR in node_modules/@ionic/core/dist/types/components.d.ts(5565,13): error TS2320: Interface 'HTMLIonInputElement' cannot simultaneously extend types 'IonInput' and 'HTMLStencilElement'.
  Named property 'focus' of types 'IonInput' and 'HTMLStencilElement' are not identical.
node_modules/@ionic/core/dist/types/components.d.ts(5811,13): error TS2320: Interface 'HTMLIonSearchbarElement' cannot simultaneously extend types 'IonSearchbar' and 'HTMLStencilElement'.
  Named property 'focus' of types 'IonSearchbar' and 'HTMLStencilElement' are not identical.
node_modules/@ionic/core/dist/types/components.d.ts(5907,13): error TS2320: Interface 'HTMLIonTextareaElement' cannot simultaneously extend types 'IonTextarea' and 'HTMLStencilElement'.
  Named property 'focus' of types 'IonTextarea' and 'HTMLStencilElement' are not identical.
node_modules/@ionic/core/dist/types/utils/overlays-interface.d.ts(37,52): error TS2344: Type 'HTMLIonModalElement' does not satisfy the constraint 'Required<ModalOptions<ComponentRef>>'.
  Types of property 'componentProps' are incompatible.
    Type 'unknown' is not assignable to type '{ [key: string]: any; }'.
node_modules/@ionic/core/dist/types/utils/overlays-interface.d.ts(37,248): error TS2344: Type 'HTMLIonPopoverElement' does not satisfy the constraint 'Required<PopoverOptions<ComponentRef>>'.
  Types of property 'componentProps' are incompatible.
    Type 'unknown' is not assignable to type '{ [key: string]: any; }'.

[ERROR] An error occurred while running subprocess ng.

        ng run app:ionic-cordova-build --platform=ios exited with exit code 1.

        Re-running this command with the --verbose flag may provide more information.
Computers-MacBook-Pro:ionic-4-shadow-dom-clarification (2) computer$
```
Continue directly below, other wise skip ahead to [here](#running-it).

Add `// @ts-ignode` above each of these lines:
`node_modules/@ionic/core/dist/types/component.d.ts:5565`<br>
`node_modules/@ionic/core/dist/types/component.d.ts:5811`<br>
`node_modules/@ionic/core/dist/types/component.d.ts:5907`<br>
`node_modules/@ionic/core/dist/types/utils/overlays-interface.d.ts:37`<br>

**Note that when you add each `// @ts-ignore` it will add to the line count for each error below it**

To look something like this:
`component.d.ts`
```ts
...
 // @ts-ignore
  interface HTMLIonInputElement extends Components.IonInput, HTMLStencilElement {}
...
  // @ts-ignore
  interface HTMLIonSearchbarElement extends Components.IonSearchbar, HTMLStencilElement {}
...
...
  // @ts-ignore
  interface HTMLIonTextareaElement extends Components.IonTextarea, HTMLStencilElement {}
...
```

`overlays-interface.d.ts`
```ts
...
// @ts-ignore
export declare type HTMLOverlaysElement = Conforms<HTMLIonModalElement, ModalOptions> | Conforms<HTMLIonToastElement, ToastOptions> | Conforms<HTMLIonActionSheetElement, ActionSheetOptions> | Conforms<HTMLIonAlertElement, AlertOptions> | Conforms<HTMLIonPopoverElement, PopoverOptions> | Conforms<HTMLIonPickerElement, PickerOptions> | Conforms<HTMLIonLoadingElement, LoadingOptions>;
...
```

With those type errors out of the way, run the build again:
`npx ionic cordova build ios`
And you should be good to go.

## Running it!
Sweet! So the project has been installed and built now let's run it on the simulator. Open the project in xcode:
```bash
open platforms/ios/MyApp.xcodeproj/
```
Click the play button once the project is ready and you should see the app build and run on the ios simulator.

![xcode project with arrow pointing to run button](https://thepracticaldev.s3.amazonaws.com/i/jd07wdtmfcqq2srz7hxa.png)

If you tap the buttons you should see the logs in the debug console inside xcode.

![simulator and logs](https://thepracticaldev.s3.amazonaws.com/i/tgt5g1o5293qej59vg35.png)

# Done!!
Well sort of. That wasn't very difficult or requirement-heavy application, but the idea behind developing an app with hot-reloading online and then building it natively on a device so easily gets me hyped! The feedback-time during development feels so much faster to me. I hope you enjoyed and learned something from this and if you have any questions or better yet suggestions on things I could learn or improve on leave it in the comments below. Happy coding!