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
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
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…
Top comments (0)