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.