Name: Ionic Capacitor App Running Preact w/Ionic Framework Web Components
Rating: 1.3 (3065 reviews)
Author: aaronksaunders

Ionic Capacitor App Running Preact w/Ionic Framework Web Components

Aaron K Saunders - Mar 30 '20 -

- Dev Community

Whats This Is...

This was just a basic test to see if I could get Ionic Framework Web Components working with Preact, its working. Then I needed to see if Ionic Capacitor could really wrap pretty much anything javascript into a mobile app...

And It Worked

I am certain there are some optimizations... currently I am loading the ionic libraries in the index html, and having issues with packaging for production builds.

Have done much to test the routing, but the controller access is demonstrated with the actionsheet and the Ionic Styles are comming through which can be seen based on the screenshots

This is really just a test to show that the ionic web-components can work with javascript based frameworks, for the most part, I am certain there will be some potential gotchas, but hey it is a great set of components and they are just getting started

Whats Working So Far

running in web browser using default commands
running from local host for live-reload, see capacitor.config.json
cannot make a production build because of some error with Uglify, removed it from the build process
have to turn off pre-rendering in the build, see package.json script modification

Changes

Added the required ionic packages in the index.html but since preact doesnt have one by default, we needed to use the template.html file

<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="viewport-fit=cover, width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title><% preact.title %></title>
    <script
      type="module"
      src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.esm.js"
    ></script>
    <script
      nomodule
      src="https://cdn.jsdelivr.net/npm/@ionic/core@next/dist/ionic/ionic.js"
    ></script>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@ionic/core@next/css/ionic.bundle.css"
    />
    <style></style>
    <% preact.headEnd %>
  </head>
  <body>
    <% preact.bodyEnd %>
  </body>
</html>

In the package.json added some new run scripts

"scripts": {
  "start": "per-env",
  "start:production": "npm run -s serve",
  "start:development": "npm run -s dev",
  "build": "preact build --no-production --no-prerender",
  "serve": "preact build --no-prerender && sirv build --cors --single",
  "cap:ios": "preact build --no-prerender && cap sync ios",
  "cap:android": "preact build --no-prerender && cap sync android",
  "dev": "preact watch",
  "lint": "eslint src",
  "test": "jest"
},

Added preact.config.js to properly remove uglify plugin in production builds until I can find out what the problem is

export default (config, env, helpers) => {
  if (env.production) {
    let result = helpers.getPluginsByName(config, "UglifyJsPlugin")[0];
    if (result) {
      let { index } = result;
      config.plugins.splice(index, 1);
    }
  }
};

That's All...

Check out the project below and let me know your thoughts in the comments below. Also if you find some solutions to the challanges, please feel free to leave a comment or open an issue in the github repo.

aaronksaunders / ionic-preact-capacitor-app

Capacitor Application Running Preact with Ionic Framework Web Components

Whats This Is...

This was just a basic test to get it working, I am certain there are some optimizations... currently I am loading the ionic libraries in the index html, and having issues with packaging for production builds.

Have done much to test the routing, but the controller access is demonstrated with the actionsheet and the Ionic Styles are comming through which can be seen based on the screenshots