DEV Community

gpynes
gpynes

Posted on • Updated on

Ionic stupid simple.

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 and xcode installed locally on your machine.

Getting Started!!

Stackblitz

One of my favorite new tech tools right now is stackblitz 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 project that we can play with and use for this tutorial. Click this link to open the project.

It should look a bit like this:
stack blitz project default setup

Make some edits

There wasn't any actual functionality on this project, so I wanted to add come click listeners.

Open the src/app/home/home.page.html file and replace the <ion-content> tag to look like this:

<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>
Enter fullscreen mode Exit fullscreen mode

and then in the src/app/home/home.page.ts file add this log method inside the HomePage class:

  logClick = (msg) => console.log(msg, 'clicked!')
Enter fullscreen mode Exit fullscreen mode

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

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



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:

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$
Enter fullscreen mode Exit fullscreen mode

Continue directly below, other wise skip ahead to here.

Add // @ts-ignode above each of these lines:
node_modules/@ionic/core/dist/types/component.d.ts:5565

node_modules/@ionic/core/dist/types/component.d.ts:5811

node_modules/@ionic/core/dist/types/component.d.ts:5907

node_modules/@ionic/core/dist/types/utils/overlays-interface.d.ts:37

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-ignore
  interface HTMLIonInputElement extends Components.IonInput, HTMLStencilElement {}
...
  // @ts-ignore
  interface HTMLIonSearchbarElement extends Components.IonSearchbar, HTMLStencilElement {}
...
...
  // @ts-ignore
  interface HTMLIonTextareaElement extends Components.IonTextarea, HTMLStencilElement {}
...
Enter fullscreen mode Exit fullscreen mode

overlays-interface.d.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>;
...
Enter fullscreen mode Exit fullscreen mode

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:

open platforms/ios/MyApp.xcodeproj/
Enter fullscreen mode Exit fullscreen mode

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

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

simulator and logs

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!

Top comments (1)

Collapse
 
fdel15 profile image
Frank DelPidio

First!

I love learning about tools that make life easier