Menu
I'm a tech teacher and I'm designing a coding course for high school students. I want to teach them Ionic without also having to teach them React, Angular, or Vue. They already know basic web development, so I want them to be able to create iOS, Android, and web apps using only vanilla Javascript + Ionic.
When I run "ionic init" to get started, I'm forced to select from Angluar, React, Vue, or Custom. So, of course, I select Custom.
Then I start building a "Hello World" app. When it comes time to view the simple app in Android Studio, I run "ionic capacitor add android" and then "npx cap open android." All good.
The problem arises when I start adding more to my simple app, and then try to view those changes in Android Studio. Normally, this would be done by running "ionic capacitor copy android". But that doesn't work in my custom app. I get this error message:
[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.
How do I solve this problem? How I provide a build script for my custom app?
Thank you for your help!
476
asked Oct 23 '25 04:10
Since you are using vanilaJS you shouldn't need any build step at all. Just put your index.html to www folder, with some content. You can start off with something like
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Ionic without any framework</title>
<script type="module" src="https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/ionic/ionic.esm.js"></script>
<script nomodule src="https://cdn.jsdelivr.net/npm/@ionic/core@latest/dist/ionic/ionic.js"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@ionic/core@latest/css/ionic.bundle.css"/>
</head>
<body>
<!-- We create a vanilla Javascript function to call the alert -->
<script>
hello = async function () {
alert('Hello World!');
};
</script>
<!-- We declare an Ionic app using the <ion-app/> element -->
<ion-app>
<!-- Cool thing, the Ionic CSS utilities could be used too -->
<ion-content text-center>
<h1>Basic usage</h1>
<!-- We add an ion-button with an onclick event -->
<ion-button onclick="hello()">Click me</ion-button>
</ion-content>
</ion-app>
</body>
</html>
and then ionic capacitor copy android should work. (I assume following initialization steps ionic init, npm init, ionic capacitor add android)
72
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
