Deploying Onsen UI to android through Cordova

nightrobin

I followed this instruction from OnsenUI’s website regarding how to deploy the app to android. https://onsen.io/v2/guide/hybrid/cordova.html#adding-onsen-ui

“Now that you have a basic Cordova app set up, getting Onsen UI working is simple. Remove all of the files inside Cordova’s www folder to get rid of all the sample code. If you have an existing Onsen UI website, all you need to do is put all the code inside www, and re-run the app as before.”

I literally deleted the contents of my www folder in my cordova project, then copy-pasted all of the contents of my OnsenUI project inside that www folder as is, but I encountered this error.

err file not found

I already set these two permissions on android too: INTERNET & ACCESS_NETWORK_STATE

What should I do?

rcpinheiro

@nightrobin Index.html is your entry point, where all the action is :)
You’ll have to include Onsen Javascript, CSS, etc.
Cordova apps are almost the same as a regular website, you just have to include cordova.js and only use local relative paths. The rest is the same.

Here’s an example of a valid Cordova index.html using Onsen:

<!DOCTYPE html>
<html>
<head>
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsenui.css">
  <link rel="stylesheet" href="https://unpkg.com/onsenui/css/onsen-css-components.min.css">
  <script src="https://unpkg.com/onsenui/js/onsenui.min.js"></script>
  <script src="cordova.js"></script>
</head>
<body>
  <ons-button onclick="alert('Hello World!')">Click Me</ons-button>
</body>
</html>

If you’re lost, give Monaca.io a spin, it does all the nitty-gritty work for you.

nightrobin

@rcpinheiro Thanks I tried this and it works.
My mistake is that I copied the whole project to www, I should have copied only the files under the dist folder (after running ‘npm run build’ in onsen)

Notice: The Monaca & Onsen UI Community Forum is shutting down.

For Onsen UI bug reports, feature requests and questions, please use the Onsen UI GitHub issues page. For help with Monaca, please contact Monaca Support Team.

Thank you to all our community for your contributions to the forum. We look forward to hearing from you in the new communication channels.

Deploying Onsen UI to android through Cordova