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

Ionic Framework
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

51%20AM
Screen Shot 2019-01-29 at 10.10.51 AM.png1489×339 48.1 KB 

<!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.

4 Likes
11

Very nice! But, why dont use direct inside the node_modules cause npm handles it ? And how do you get code completion, I am using Visual Studio Code and when I install all packages I get code completion but this time not

12

I also have trouble removing

  <script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.esm.js"></script>
  <script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core/dist/ionic/ionic.js"></script>

from the index.html of my app, which should run on a local network with no access to internet .

I tried putting

import "@ionic/core";

at the begining of my app.ts and everything is functionally fine, with no access to dependencies on internet, but the appearance of some of my components is mangled, while it is ok when using the cdn.

What am I missing ? Thanks !

13

do the npm i @ionic/core in a folder and then copy the full content of node_modules/@ionic/core/dist into a local folder and then refer to this using the script tags.

1 Like
14

Thanks ! Now I get

Uncaught TypeError: Failed to resolve module specifier “tslib”

in the browser, and the components are still mangled. Will include this library too…
BTW I use Stencil.js on top of ionic, so I thought it would be automagically linked …

15

I think you may want to create a new topic and outline your situation. If you are using stencil, then you are not into a static website situation which this topic is mostly about and also got me triggered to answer the way I did

If you are in a stencil project and working with CDN to have Ionic included, you are either doing something very special or something out of the ordinary. Without me being expert on Stencil btw.

Next, a new topic with a new tag will get the proper expertise in the community eyeballing the issue