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

#1

How to include the 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 <script type='text/javascript' src="ionic.js"></script> the page loads “Empty” with an error in Chrome dev console. The same works when referred 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>
#2

What is stopping you from downloading that file from the CDN as well and place it locally?

#3

I have done that…

My folder structure:
iontest/
…22.html
…ionis.js

if i add the line in the html as <script type='text/javascript' src="ionic.js"></script> referring to the local js file, the page loads empty.

If i refer to the cdn url ‘’, the page loads okay.

#4

The network panel shows this file missing:
image

#5

Exactly… what should I do? Where is that file coming from? The docs does not say anything about using ionic.js locally.

#6

Is the same file not loaded when you include the .js from the CDN? I would have assumed it to come from https://unpkg.com/@ionic/core@4.0.0/dist/ionic.ofkibcsd.js, but this doesn’t seem to be the case :confused:

You can probably run npm install @ionic/core and then include the files from node_modules directly.

#7

Thanks for suggestion, will try that. Does this mean we cannot use Ionic for static (non npm / non angular) websites ?

#8

I am just trying to give you a way to make this work. No idea what the best way to achieve this is.

You can probably copy the @ionic/core folder from node_modules then to whatever location you want and include it from there. npm is just a nice way to get the whole package downloaded and installed to a known location.

#9

@surenkonathala It works from the CDN because not only that js file is in the CDN, but the dependent files (and the subdependencies too) are in the CDN.

You could try to download all the files from the CDN to be sure:

https://unpkg.com/@ionic/core@4.0.0/dist/

(this is the dist directory, so probably all static files are here).

Or you could see in the Network tab of the Developer Tools all files that are downloaded (when you use the CDN), then you go and download them manually (when you click in the file in the Network tab, it should show the complete path in the Request URL field).

For example, https://unpkg.com/@ionic/core@4.0.0/dist/ionic/ionic.ofkibcsd.js

Just have in mind that this could end up being a trial and error.

1 Like
#10

Thanks @Sujan12 and @lucasbasquerotto

After including the entire @ionic/core folder in my static website folder, the pages with ion components load properly. So lesson learnt is that “ionic.js” depends on about another 135 js files under @ionic/core/dist/ionc .

For anyone trying to build static website:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <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>
</html>

How to get core?

$ npm install @ionic/core

Will generate node_modules folder. Copy the folder from node_modules/@ionic/core to your project.

Folder structure should be:

projectFolder
..core
....css
......ionic.bundle.css
....dist
......ionic (contains all dependent js files) 
......ionic.js
..index.html

Here’s the GitHub repo of above example.

1 Like