Also we have built a webapp/spa using jquery mobile. How can we embed that webapp into ionic without using ionic components. We just want to embed our top level DIV and integrate it? Yes i understand that is not right thing to do for bringing native look. But we have built huge app to convert to ionic components will take a quite a bit of time. So we want to do it in phased manner. Initially top level webapp div should be integrated and later other screens will be ported.
When we port top level DIV ionic is changing tags at runtime and we are missing several script imports and css being removed. Appreciate if you guys can give some direction. thanks
To use Ionic without any form of framework, you can just load the Ionic web components. You can do this through a simple script tag:
Now you will have access to the Ionic web components. It isn’t common to do this though since most people will be using some kind of modern framework to help build the application. StencilJS is another option for “not using a framework” - technically, StencilJS is just a web component compiler, but using StencilJS to build an Ionic application gives you a bit of the structure and tools of a typical framework which makes things a lot easier than starting from scratch and architecting everything yourself.
Your question of “How can we embed our web app into Ionic” probably isn’t the approach you would want. Ionic is a bunch of UI components. I assume you are more interested in the tooling around Ionic, e.g. building the application as a native app with Capacitor/Cordova. In that case, you can just use Capacitor/Cordova to build your application directly, you don’t need Ionic here.
Why would you do that? What is your reason for using Ionic?
thanks for your reply.
How to build our spa webapp with capacitor and build android, ios builds with out using ionic components? is there a CLI command to do that? We are facing issue with firebaseauth integration in android and ios with redirect issue. We resolved it with ionic components. but successful login we want to load in webview our template. How can we achieve that.?
Reason why we want to use ionic is to build android and ios builds using our webapp as content (that is what we want to achieve) and access cordova native services such as access to camera, gps, fcm notifications etc. we will still use ionic components and start porting at later stages. Currently we use webrtc to make calls. Native experience of mobile permissions, notifications and running app in background are few things we miss when we build SPA mobile webapp. We are trying to bridge that gap by using ionic framework. Our current webapp does 90% of things what native android app is able to achieve it. We are trying to eliminate android and ios apps development to save costs by moving to ionic but don’t have time to port current webapp to ionic so trying to bridge the solution. Appreciate if you can suggest us correct approach that can be taken. thanks
Hmm, OK, I think that is beyond my skill set!
If you are not interested in angular, react nor the ionic ui library then there is no use for you using ionic cli. Best is to
npm uninstall ionic then
As to native container already mentioned is cordova or capacitor. I think if you move to Capacitor you have the best of both worlds at your hand: building in web technology and doing some native stuff.
You do need to bundle everything into a www/public folder for the capacitor commands
npx cap copy etc to work. What do you use for that?