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.
Need help installing OnsenUi locally...
-
I’ve struggled for several hours trying to set up an HTML template using OnsenUi. I can’t seem to get the css file to work. The javascript file works, but none of the styling shows up. The npm help has been pretty much removed. When I tried OnsenUi some months ago, there was an easy description “How to” with Cordova that explained each detail. I found the reference to Cordova and npm, but it doesn’t help me to get all of the files needed to run OnsenUi locally on my computer. I DO NOT want to use CDN files in my <head>. Can someone please point me to a good description of how to do the setup locally or where to get these files for downloading or what files need to be included. I’m tired of head banging. I don’t want to use Monaca either. TIA - Rachel
-
@curiosity, if you have a Pro subscription, you can download the Localkit and start you project.
According to https://monaca.io/pricing.html Localkit is included only with Pro subscription and above, not the free version.
-
@Curiosity If you want to use OnsenUI with npm, you need to use a bundler such as webpack or rollup.
I’d recommend webpack as it has good documentation and is pretty easy to get working with Cordova.
Have a look at the webpack guide here https://webpack.js.org/guides/ to learn the basics.
Ok, now here’s one way of using webpack to load OnsenUI in a Cordova app.
First install the packages you’ll need:
npm install onsenui webpack webpack-cli css-loader file-loader style-loader html-webpack-plugin --save-dev
Then rename the
www
directory tosrc
. Then make a new empty directory calledwww
. Instead of usingwww
as a source directory like you would when not using weback, we’ll usesrc
as the source directory andwww
as the build output directory of webpack.Now make
webpack.config.js
and put this in it:const path = require('path'); const HtmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { entry: './src/js/index.js', output: { path: path.resolve(__dirname, 'www'), filename: 'bundle.js' }, plugins: [ new HtmlWebpackPlugin({ template: './src/index.html', inject: 'head' }) ], module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] }, { test: /\.(png|svg|jpg|gif)$/, use: [ 'file-loader' ] }, { test: /\.(woff|woff2|eot|ttf|otf)$/, use: [ 'file-loader' ] } ] } };
With this webpack config file, when you run webpack,
src/index.html
will be copied towww/index.html
andsrc/index.js
will be injected into it.Put this in
src/index.html
:<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <!-- the bundled javascript will get automatically injected in here by webpack --> </head> <body> <ons-page> <!-- whatever onsen stuff you want in here --> </ons-page> </body> </html>
Put this in
src/js/index.js
:import 'onsenui/css/onsenui.css'; import 'onsenui/css/onsen-css-components.css'; import 'onsenui';
That should be all the setup done. Now run
npx webpack
and webpack will bundle your application intowww
. If you then runcordova run
you should see your application with Onsen working properly.I think that’s all the steps, but there’s quite a lot of config here so I might have missed something. Let us know if you are having trouble.