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:
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>
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!')
Stackblitz should hot reload for you so you can just go click the buttons and see the log messages like so:
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.
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$
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 {}
...
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>;
...
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/
Click the play button once the project is ready and you should see the app build and run on the ios simulator.
If you tap the buttons you should see the logs in the debug console inside xcode.
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)
First!
I love learning about tools that make life easier