Ionic Capacitor App Running Preact w/Ionic Framework Web Components
Tags: react, javascript, ionic, webdev
Published: 2020-03-30 14:34:18


<img src="https://dev-to-uploads.s3.amazonaws.com/i/4u3t0nxfqumy0r0cw3f4.png" width=45%/>

<!--
<img src="https://dev-to-uploads.s3.amazonaws.com/i/6lrs93oe7q629nd6rx6v.png" width=45%/>
-->


## Whats This Is...
This was just a basic test to see if I could get [Ionic Framework Web Components](https://ionicframework.com/docs) working with [Preact](https://preactjs.com/), its working. Then I needed to see if [Ionic Capacitor](https://capacitor.ionicframework.com/) 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
<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
```json
"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
```javascript
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.


{% github aaronksaunders/ionic-preact-capacitor-app %}