How to use Ionic 4 CSS and JS without CDN in a static website?

how to use javascript in ionic 4
ionic using cdn
ionic 4 js
ionic vanilla js
ionic without framework
ionic framework
ionic popup menu
component in ionic 4

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/core@4.0.0/dist/ionic.js

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <!-- <script src="https://unpkg.com/@ionic/core@4.0.0/dist/ionic.js"></script> -->
    <script type='text/javascript' src="ionic.js"></script>
    <link rel="stylesheet" href="https://unpkg.com/@ionic/core@4.0.0/css/ionic.bundle.css">
  </head>
  <body>
    <ion-title>Sample Title</ion-title>
  </body>
</html>

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

How to use Ionic CSS and JS without CDN in a static website , How to include the CSS and JS in a static website without using CDN url's? When we tried to surenkonathala January 29, 2019, 4:23pm #1. How to include​  While the option to use CDN works best, the only drawback is that for every page load, ionic.js and ionic.css files are fetched from CDN. This can be optimized with cache and other strategies, we

Maybe you could try deploying the App with or without Cordoba as Webapp? That result should ne a static website in your dist folder.

https://forum.ionicframework.com/t/how-to-deploy-for-all-three-platforms-ios-android-and-web-too/100493/2

Building A Static Website With Ionic Framework 4, Building A Static Website With Ionic Framework 4 But what did not change much is that websites are still built using HTML, CSS and Javascript and We can include ionic.js and ionic.bundle.css in our html using a CDN. In this Quick Win you will see how to easily install and integrate those plugins so you can use them just like any other library in your general Ionic workflow. Afterwards you can load CSS or JS files directly during the build process of your app. 1. Install dependencies. Of course you start by installing a NPM package to your Ionic app.

What is different between ionic 4 and common JS libraries is that ionic 4 uses lazy loading so that your user does not load components that are not used in your app.

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.

You can browse https://unpkg.com/@ionic/core@4.0.0/dist/ionic/ to get an idea of what that means (although ionic will probably load only the chunks, not the individual components).

Then the entry file will automatically try loading these extra chunks whenever it sees ionic custom web elements on the page.

Therefore what you miss is simply to make available all these extra JS files at the same location as your entry file.

As to retrieve them, you can get a zip of released assets on the GitHub release page, from jsdelivr, or from npm.

Static website/html does not load when using ionic.js (local) without , Bug Report Ionic version: [x] 4.0 Current behavior: Component does not load.. load normally on web pages even when referred to locally instead of CDN St Static website/html does not load when using ionic.js (local) without CDN #17306 Sign up for free to subscribe to this conversation on GitHub. Ionic Framework Website Starter. Building a static website using Ionic Framework and Ionic Icons. Built with Ionic 5.0.0. Using Ionic - Building a sample website. As per Ionic Framework's docs, there are several ways to build a site. Option 1: Using CDN (Content Delivery Network) We can include ionic.js and ionic.bundle.css in our html using a CDN.

Using an Ionic CDN Setup, Use an Ionic CDN setup to help deliver the Ionic library FASTER. framework used for the development of native and progressive web It offers a library of HTML, CSS, and JS components and tools built with Sass and optimized for Ionic library as well as the static assets used in your app with a CDN. Ionic provides different packages that can be used to quickly get started using Ionic Framework or Ionicons in a test environment, Angular, any other framework, or none at all. Ionic Framework CDN Ionic Framework can be included from a CDN for quick testing in a Plunker , Codepen , or any other online code editor!

@ionic/core, Base components for Ionic. adding a script tag to the CDN: <script type="​module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></​script>. You can use Azure CDN to configure the custom domain endpoint for your static website, provision custom TLS/SSL certificates, and configure custom rewrite rules. Configuring Azure CDN results in additional charges, but provides consistent low latencies to your website from anywhere in the world.

Getting Started, Learn how to quickly get started using our CSS framework. We have guides for a variety of skill levels. Learn how to easily start using Materialize in your website​. This is the standard version that comes with both the minified and unminified CSS and JavaScript files. You can find all the versions of the CDN at cdnjs. <! A typical cPanel screen for configuring CNAME records with a host Step 3: Point Your Assets to the CDN. Let’s look at a method for creating a variable for the CDN URL and how it can be used to help programmatically prepend the URL to our static resources.

Comments
  • How to do that with Webpack?