How to create Ionic2 custom build process?

As a school project I am making a multi-platform app. I decided to use JavaScript. I thought it would be great to have something like an MVVM pattern with Ionic2 where VM is the Angular2 part of Ionic and I would have two Views. One for mobile(the html/css parts of Ionic), and Electron for desktop. I have a problem though. In a basic Ionic project the View and the Angular part is tightly coupled, I mean they are in the same directory, cannot change the HTMLs easily.

What I thought would be great (although other solutions are welcome) is to have an “ionic” folder and a “desktop” folder, both the same structure same file names. When building the app for mobile with Ionic I want all the files in the src folder to be copied to a dist/ folder and html,css files from src/ionic copied to their place like in a normal ionic project(the only difference, that it would be under a dist/ folder not src/, so I have to make the www/index.html to include these too instead of src/ which it does normally in ). And when building for Desktop I just copy all the things the same way but from src/desktop instead of src/ionic.

That way I could have my business logic in “plain” Angular2 and could be reused creating the app both for desktop and mobile.

So my question is can I modify the Ionic build process somehow, to allow me to do this? Can I create my own gulp or grunt file? Or webpack? How to do that?

You can modify the Ionic CLI build process as explained in the Ionic App Scripts project.

Or you can set up your own project workflow, without using the Ionic CLI. See e.g. Using Ionic 2 with the Angular CLI.

1 Like