Going mobile with AnalogJS + Ionic Framework + Capacitor
You already have heard about AnalogJS, the fullstack Angular meta-framework, and if not then I recommend taking a look at it, it’s an amazing project from Brandon Roberts that brings Vite, Vitest, SSR, SSG, file-based routing and API routes to our Angular projects.
You might also have heard about Ionic Framework, the mobile SDK for the web, which allows you to build modern, high quality, cross-platform mobile apps from a single codebase in Angular/React/Vue.
In this post I’m going to describe the steps required to integrate Ionic Framework into your AnalogJS applications and get the benefits of both!
Installation
First we need to install the packages required by Ionic to our applications:
- @ionic/angular has all components and services from Ionic Framework
- ionicons is the amazing and free icons library from Ionic
- @ionic/angular-toolkit adds Ionic schematics to our project
You can install all three running the following commands:
npm install @ionic/angular@latest ionicons
npm install -D @ionic/angular-toolkitConfiguring our AnalogJS app for Ionic
Now that we have Ionic installed into our project, we need to configure it so it works.
Go to your project vite.config.ts file and exclude the Ionic libraries from the SSR process, adding them to the noExternal property.
It should look like this:
ssr: {
noExternal: [
'@ionic/**',
'@stencil/**',
'ionicons',
],
},Now in your app.config.ts file, add the provideIonicAngular method and the IonicRouteStrategy provider. The first one brings all the functionality of Ionic into our app, and the latter allows the same component to be re-rendered on route changes.
Update your app.component.ts file to include the required structure for Ionic apps.
import { Component } from '@angular/core';
import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
@Component({
selector: 'demo-root',
standalone: true,
imports: [IonApp, IonRouterOutlet],
template: `<ion-app><ion-router-outlet></ion-router-outlet></ion-app>`,
})
export class AppComponent {}Angular doesn’t yet support SSR with Web Components, until then we have to disable client hydration, there are a few options, but here we’re going to use the ngSkipHydration attribute for our ion-app component.
Simply add the ngSkipHydration attribute to the ion-app tag, your code should look like this:
import { Component } from '@angular/core';
import { IonApp, IonRouterOutlet } from '@ionic/angular/standalone';
@Component({
selector: 'demo-root',
standalone: true,
imports: [IonApp, IonRouterOutlet],
template: `<ion-app ngSkipHydration><ion-router-outlet></ion-router-outlet></ion-app>`,
})
export class AppComponent {}The only thing left is to add Ionic styles to our app, for this we rename the styles.css file to styles.scss and we update our vite.config.ts file to support SCSS:
export default defineConfig(({ mode }) => {
return {
plugins: [
analog({
vite: {
inlineStylesExtension: 'scss',
},
}),
],
};
});Then we update our index.html file to match the styles file with the change:
<head>
<!-- other headers -->
<link rel="stylesheet" href="/src/styles.scss" />
</head>
<body>
<!-- content -->
</body>And finally we add Ionic styles to our styles.scss file:
/* Core CSS required for Ionic components to work properly */
@import '@ionic/angular/css/core.css';
/* Basic CSS for apps built with Ionic */
@import '@ionic/angular/css/normalize.css';
@import '@ionic/angular/css/structure.css';
@import '@ionic/angular/css/typography.css';
@import '@ionic/angular/css/display.css';
/* Optional CSS utils that can be commented out */
@import '@ionic/angular/css/padding.css';
@import '@ionic/angular/css/float-elements.css';
@import '@ionic/angular/css/text-alignment.css';
@import '@ionic/angular/css/text-transformation.css';
@import '@ionic/angular/css/flex-utils.css';
/**
* Ionic Dark Mode
* -----------------------------------------------------
* For more info, please see:
* https://ionicframework.com/docs/theming/dark-mode
*/
/* @import "@ionic/angular/css/palettes/dark.always.css"; */
/* @import "@ionic/angular/css/palettes/dark.class.css"; */
@import '@ionic/angular/css/palettes/dark.system.css';And that’s it! We have our AnalogJS application using Ionic. We can now install Capacitor if needed so we can build for iOS and Android.
If you want to quickly start your way using AnalogJS with Ionic and Capacitor, you can create a new project using my AnalogJS + Ionic + Capacitor template! Which already comes pre-configured with everything you need so you don’t worry about setting thing up and go directly into building your amazing application!
Eduardo is a Senior Software Engineer working at HeroDevs and living in Monterrey, Mexico. Husband, father of three beautiful daughters, loves everything Angular, Ionic and Web related. He contributes frequently to the OSS community, and is also co-organizer of the Spanish chapter of the Angular Community Meetup, co-organizer of the Google Developer Group Monterrey, organizer of the Ionic Monterey Meetup, an Ionic Developer Expert, an ngChampion, and in the road to become an Angular GDE.
