Need help installing OnsenUi locally...

Curiosity

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

jamal

@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.

emccorson

@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 to src. Then make a new empty directory called www. Instead of using www as a source directory like you would when not using weback, we’ll use src as the source directory and www 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 to www/index.html and src/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 into www. If you then run cordova 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.