Tagged: Ionic 4

If you’re like me you created this super cool angular web application https://kiwibudget.com/ (shameless promotion) and you users keep asking for a mobile app!

Since your (super cool) frontend is in angular the logical solution is to use Ionic to build the app since you got all this pre-written ng code that you wanna use.

I wont go too deep into the details but after trying to set things up with vanilla Angular workspaces (and failing spectacularly), then trying Angular + nrwl/nx (works but so much hackery to get ionic to work, maintenance would raise technical debt to infinity), I found the gold that is xplat.

This very quickly written post is to document my setup with future blogs as app development progresses.

Disclaimer. This post mostly serves as a note to me of how to set things up, so it’s pretty rough.

Lines that begin with ‘?’ should not be typed and are cli options.

Lets setup our nx workspace

npm init nx-workspace myworkspace
? What to create in the new workspace      empty
? CLI to power the Nx workspace            Angular CLI

npm install -g @nrwl/cli
npm install --save-dev @nstudio/xplat
ng add @nstudio/xplat

Lets make the web app (we call it ‘app’, xplat will prepend ‘web’, change this is you have other requirements)
(You can also configure the prefix but you can look into that yourself)

ng g app
? What name would you like for this app?  app
? What type of app would like to create?  web
? Which frontend framework should it use? angular
? Use xplat supporting architecture?      Yes

? In which directory should the app be generated? 
? Which stylesheet format would you like to use? SASS(.scss)  [ http://sass-lang.com   ]

Lets make the mobile app (we call it ‘app’, xplat will prepend ‘ionic’, change this is you have other requirements)

ng g app
? What name would you like for this app?    app
? What type of app would like to create?    ionic
? Which frontend framework should it use?   angular
? Use xplat supporting architecture?        Yes

We want to use the ionic command to manage our app so lets hook that up.

Create a file ionic.config.json with the following

{
  "name": "ionic-app",
  "integrations": {},
  "type": "angular",
  "root": "apps/ionic-app"
}

We can now run our ionic app with ionic serve --project ionic-app

But wait it still fails…

For some reason capacitor is not installed automatically so since we have setup the ‘ionic’ command we can fix that with

ionic integrations enable capacitor --project ionic-app

Right now you can start apps with

ng serve web-app
ionic serve --project ionic-app

Done!

PS. If you are a lazy dev like me and want to use the Ionic devapp you will also need to install the cordova integration.

It’s not technically a smart idea but… thug life

ionic integrations enable cordova --project ionic-app