Menu
How to include Ionic 4's CSS and JS in a static website without using CDN url’s?
When we tried to download the JS file to local and refer it as <script type='text/javascript' src="ionic.js"></script> , the page loads “Empty” with an error in Chrome dev console. The same works if we refer it from CDN.
Downloaded the js file from https://unpkg.com/@ionic/[email protected]/dist/ionic.js
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<!-- <script src="https://unpkg.com/@ionic/[email protected]/dist/ionic.js"></script> -->
<script type='text/javascript' src="ionic.js"></script>
<link rel="stylesheet" href="https://unpkg.com/@ionic/[email protected]/css/ionic.bundle.css">
</head>
<body>
<ion-title>Sample Title</ion-title>
</body>
</html>
308
It's recommended to use jsdelivr to access the Framework from a CDN. To get the latest version, add the following inside the <head> element in an HTML file, or where external assets are included in the online code editor: With this it's possible to use all of the Ionic Framework core components without having to install a framework.
As a consequence, ionic 4 is split in many different JS files. While it is true you only need to reference a single entry file in your HTML, ionic 4 expects the rest of the files to be available alongside this entry file. That is why you see in your dev console an extra network request to an ionic JS asset with hash file name.
So much so that most ionic examples we find on the internet are either mobile apps or web apps for mobile. But this was changed with the release of the new version 4, the team had ambitious goals.
This can be optimized with cache and other strategies, we cannot avoid calls to an external url and load the files in the browser for the webpage to load. Ionic 4 uses lazy loading so that user does not load components that are not used in your app or website.
Thanks ghybs
ionic.js depends on about another 135 js files under @ionic/core/dist/ionc. After including the entire @ionic/core folder in my static website project folder, the pages with ion components loaded properly.
Here's the solution to build static websites using Ionic Framework:
Folder structure should be:
projectFolder
|_core
| |_css
| | |_ionic.bundle.css
| |_dist
| |_ionic (contains all dependent js files)
| |_ionic.js
|_index.html
How to get ionic core?
Run the below command.
$ npm install @ionic/core
This will generate node_modules folder. Copy the folder from node_modules/@ionic/core to your project.
index.html
<html lang="en">
<head>
<script type='text/javascript' src="core/dist/ionic.js"></script>
<link rel="stylesheet" href="core/css/ionic.bundle.css">
</head>
<body>
<ion-title>Sample</ion-title>
</body>
GitHub repo of the above example
173
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With