How to create a build script

I am a novice at Ionic/Capacitor and wish to convert a large Cordova app to Ionic. I followed the migration advice here exactly. However when I tried the command at step 3, “ionic build”, I got 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.

I know where the build script is meant to be entered, but not what is meant to go there. I can find tons of online advice saying that a build script is required, but none at all on what specifically has to be entered. If I can’t get by this seemingly trivial step, Ionic/Capacitor does not appear to be a useful way forward, so I look forward to any advice. To be clear, all I am looking to do at this stage is build and run the project in the browser, prior to moving on to Android.

right you can use this

Hi nextoffice,

Did you mean to add something more?

That means Ionic CLI doesn’t know which app type your project is (it’s not vue, react or angular), so it considers it a custom project and ionic build doesn’t know how to build your app.

And it’s telling you to add a ionic:build npm script in your package.json that would run the script you use to build your web assets.

In example if you have a build npm script to build your web assets using vite, you have to add a new ionic:build script that runs the build script.

{
    "scripts": {
        "build": "vite",
        "ionic:build": "npm run build"
    }
}

Thank you julio, but my problem is that I am new to Ionic/Capacitor, and I have no idea what an ionic build script is. As you have helpfully pointed out, along with loads of other references on this subject that I have found, there has to be a build script. I get it, but what should it be? I have come from using Cordova. I want to build and run the app in the first instance in the browser, and only when that works will I move on to Android. So what should my build script be? It cannot be “npm run build” as in your example, because that fails with the error ’ npm ERR! Missing script: “build” '. So what should it be? Where can I look for information on how to solve this problem?

Yeah, I said " if you have a build npm script to build your web assets", if you don’t have a build script, then it won’t work.

So you don’t build your web assets? you just use javascript inside your www folder with no building/bundling?

If you are not building, then you can make it run a script that does “nothing”, in example "ionic:build": "echo hello", that will just write hello in your terminal/CMD window and will make Ionic stop complaining.

But if you plan to use Capacitor plugins you’ll have to use a bundler and then you’ll need a build script for bundling the plugins.

Hi julio, I currently use a build service called VoltBuilder to build my Cordova app. It does what the phonegap online builder used to do, but much quicker, much better and in a modern context. So, no, I don’t “build my web assets”. In fact, when the project is loaded in Visual Studio, all I need to do in order to run it is press F5 or click Run. The app then appears in the browser. That is all I want to do as a first proof of concept that working with Capacitor is a viable option for me. After that, I was intending to migrate my Cordova plugins to Ionic ones, but as you have just pointed out, I will then need a build script, but at the risk of sounding like a stuck vinyl record, what would that script be? Where can I find out what a build script is and how to write one? I have tried looking at Ionic documentation, but I cannot find any information on how to put together what must be one of the most basic steps towards getting an Ionic app working.

Please can somebody point me at a reference that explains these things, with actual examples?

VoltBuilder does a native build, not a build of your web assets.

As I said, for using Capacitor plugins you’ll need a bundler, there are several bundlers and each one of them uses a different build command.
In example if you use vite, the build command is vite, if you use webpack, the build command is webpack, so it will depend on which bundler you decide to use, you’ll have to read the bundler documentation.

Can anybody please advise of how to run an ionic capacitor app in the browser? When I try the Run > Web option in VS Code all that happens is an error saying:

[ERROR] Cannot perform serve.

Since you’re using the custom project type, you must provide the ionic:serve npm script so the Ionic CLI can serve your project.

Which is no help at all, because just like the missing build script, there is no way to find out what the script should be. Close to giving up with Ionic now.

Hi julio, thank you for being patient. I am afraid vite and webpack mean nothing to me at all. So let’s move on, assuming that my app does not need building for the browser. The next challenge is how do I run the app in a browser? I haven’t got a run script, either, so how do I get started? Again, I cannot find anything on the net that offers anything useful.