How to use Vanilla Javascript with ionic4/Cordova App

Ionic should not be saying they support vanilla JavaScript and there is no document on how to add use it and deloy it using capacitor or cordova

Kind of an old thread, so not sure where the confusion at this point, but we do provide examples/ docs on how to use the components with regular javascript.

In face, there’s a drop down menu item so default to regular javascript from the docs.

Screen Shot 2021-03-03 at 11.26.02 AM

And as cherry on the cake, the emulator demo found in the docs has a “view source link” which shows what you see in vanilla JS.

Who can resist vanilla with cherry on top!? I can’t!

Hi mhartington,

The documentation for the setup of a vanilla Javascript + Ionic app is not nearly as robust as the documentation for the setup of a React/Angular/Vue app.

For instance, I’m running into a setup problem right now. I’ve got my vanilla Javascript Ionic app running great in my web browser. And when I run “ionic capacitor add android” and then “ionic cap open android”, I can view it in Android Studio. However, when I make changes and then run “ionic capacitor copy android”, I get a message that says:

[ERROR] Cannot perform build.
Since you're using the custom project type, you must provide the ionic:build npm script so the Ionic CLI can build your project.

The only way I can rebuild the Android app is by deleting the entire Android folder and then rerunning the first two commands. There is no help anywhere in the Ionic documentation for this problem, since there is no discussion at all regarding vanilla Javascript work flows.

Do you know where I can get help for this problem? Thank you for your help!

Hi @ZakAttakk ,
did you find a solution?

I’m a teacher too, me and my students would like to bring the vanilla js ionic app in Android Studio, to build the apk.
Can you help us, and all the community too, explaining how to do?
Something like correct scafolding and the command sequence…

Thank you everybody

I know this is some necroposting but yes this is possible.

First download the @ionic package. Where? You could start in github. The folder you want is core, or can download from npm if you use npm i @ionic/core.

Create a public folder (like www or public or whatever)

Move the @ionic folder (or the core folder, this is what I did) to the folder you created before.

Inside that folder create an index.html page and add this code

</html>

<head>
<script type="module" src="path/to/core/dist/ionic/ionic.esm.js"></script>
<script nomodule src="path/to/core/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="path/to/core/css/ionic.bundle.css"/>
</head>


<body>


<ion-app>
<ion-content>
<ion-list>
  <ion-item>
    <ion-label>
      Item
    </ion-label>
  </ion-item>

  <ion-item lines="none">
    <ion-label>
      No Lines Item
    </ion-label>
  </ion-item>

  <ion-item>
    <ion-label class="ion-text-wrap">
    Multiline text that should wrap when it is too long
    to fit on one line in the item.
    </ion-label>
  </ion-item>

  <ion-item>
    <ion-label class="ion-text-wrap">
      <ion-text color="primary">
        <h3>H3 Primary Title</h3>
      </ion-text>
      <p>Paragraph line 1</p>
      <ion-text color="secondary">
        <p>Paragraph line 2 secondary</p>
      </ion-text>
    </ion-label>
  </ion-item>

  <ion-item lines="full">
    <ion-label>
      Item with Full Lines
    </ion-label>
  </ion-item>

</ion-list></ion-content>

</ion-app>


</body>

</html>

My Structure of the app

MyIonicSite

public

index.html
libs

core (you point to the files inside this folder. The one in the head of the inde.html)

Btw I couldn’t run it straight in the browser but you can via a local server.

By the way, this way works with capacitor cli. You don’t have to delete and add Android all the time.

1 Like