railsware / bozon

🛠 Command line tool for building, testing and publishing modern Electron applications
MIT License
758 stars 52 forks source link

Bozon upgrade from v0.8.12 to v1.0.5 - bug issue #71

Closed SunlSonipat closed 4 years ago

SunlSonipat commented 4 years ago

Hi,

I'm trying to upgrade my older application v0.8.12 to v1.0.5 (Electron 9.0.0). My project is completely depending on "gulpfile.js" to package all source files(app) to build folder with much customization. But in newer version on Bozon there are huge changes which stopped my application completely.

As described by "Alex Chaplinsky" on "Rewrite build system and update Electron to 5.0.0 higher". Gulp has been removed during v0.9.0.

So, I tried to create new fresh application ( Bozon v1.0.5) to migration my application with below steps:

  1. https://www.npmjs.com/package/bozon
  2. bozon new BozonNew
  3. cd BozonNew
  4. I created new dashboard.html page under folder "src\rendere\shared"
  5. I created new dashboard.js page under folder "src\renderer\javascripts"
  6. I called with A tag from "src\renderer\index.html" to new inner dashboard.html page.
  7. bozon start
  8. Second page not loading because all folders and files are not being copied to build folder from src .

I reviewed many blogs to copy all folders and files to destination using webpack.config.js file but nothing seems to be working with Bozon.

So, please provide some working files or code snippet to COPY all folders and files to destination.

Please see attached screen shot.

image

alchaplinsky commented 4 years ago

Hey @SunlSonipat, So as you've noticed, bozon have moved from gulp to building with webpack since v 0.8.0. Unlike gulp, webpack does not copy files over to build directory but bundles all the files imported into our javascript. So you have 3 entry points (main, renderer and preload) for webpack to import all files that need to be a part of a bundle. So for instance in your renderer/index.js you can just do:

require('dashboard')
require('application.css')

to include you js and css. And also you can require images in your js file (this way webapck will also bundle and put them into builds directory), however, you may need to add webpack loaders for images.

Hope this helps, cheers!

SunlSonipat commented 4 years ago

Hi Alex Chaplinsky,

Many thanks for your quick response. Your every work and sentence is valuable for us which save our many days exercise.

I applied below changes with copy-webpack-plugin plugin in 'webpack.config.js' file which is auto generated by great Bozon. It is working correctly now.

const path = require('path');
var target = path.resolve(__dirname, './/development/renderer');
var CopyPlugin = require('copy-webpack-plugin');
const JavaScriptObfuscator = require('javascript-obfuscator');

const PATHS = {
  app: path.join(__dirname, 'src', 'renderer'),
  build: path.join(__dirname, './builds')
};

module.exports = {
  renderer: {
    entry: './src/renderer/javascripts/index.js',
     plugins: [
      new CopyPlugin({
        patterns: [
          { from: './src/renderer/css', to: 'css' },
          { from: './src/renderer/fonts', to: 'fonts' },
          { from: './src/renderer/stylesheets', to: 'stylesheets' }
        ],
        options: {
          concurrency: 100,
        },
      }),
    ],
    resolve: {
      modules: [
        'node_modules',
        './src/renderer/javascripts',
        './src/renderer/stylesheets',
        './src/renderer/images'
      ]
    },
  },
  preload: {
    entry: './src/preload/index.js'
  },
  main: {
    entry: './src/main/main.js',
    resolve: {
      modules: [
        'node_modules',
        './src/renderer/javascripts',
        './src/renderer/stylesheets',
        './src/renderer/images'
      ]
    },
    plugins: [
      new CopyPlugin({
        patterns: [
          {from: './src/main', to: './'}
        ],
        options: {
          concurrency: 100,
        },
      }),
    ],
  }
}

However, I stuck in two points. Kindly suggest:

  1. "bozon package windows" not working properly with 'electron-builder-squirrel-windows'. It is giving below error:

Error: Module electron-builder-squirrel-windows must be installed in addition to build Squirrel.Windows: Error: Cannot find module 'electron-builder-squirrel-windows'

  1. The size on "main/index.js" becomes in many MB after run/build. It should less then 10 or 15 kb. Please see below:

image

image

Please suggest.

Thanks again for your support. Sunil

SunlSonipat commented 4 years ago

Please see my package.json file for your reference:

{
  "name": "Demo",
  "version": "0.1.0",
  "productName": "DemoApplication",
  "companyName": "Demo",
  "description": "Demo application build with Electron",
  "author": {
    "name": "Sunil",
    "email": ""
  },
  "settings": {
    "width": 1000,
    "height": 700
  },
  "repository": {},
  "scripts": {
    "postinstall": "install-app-deps",
    "start": "bozon clear && bozon start",
    "build": "npm run prepare && electron-builder",
    "pack": "electron-builder --dir",
    "dist": "electron-builder"
  },
  "dependencies": {
    "electron-builder": "^22.7.0",
    "javascript-obfuscator": "^0.28.4"
  },
  "license": "ISC",
  "devDependencies": {
    "bozon": "1.0.5",
    "copy-webpack-plugin": "^6.0.2",
    "electron-builder-squirrel-windows": "^20.44.0",
    "file-loader": "^6.0.0",
    "jest": "26.0.1",
    "spectron": "11.0.0",
    "electron-simple-updater": "2.0.9",
    "electron-store": "5.1.1",
    "flat-cache": "2.0.1",
    "winston": "3.2.1",
    "winston-daily-rotate-file": "4.4.2"
  },
  "build": {
    "copyright": "Copyright © 2020 ",
    "appId": "Demo",
    "win": {
      "target": "squirrel",
      "signingHashAlgorithms": [
        "sha1",
        "sha256"
      ],
      "certificateSha1": "xx",
      "certificateFile": "xx.pfx",
      "certificatePassword": "xx",
      "publish": [
        {
          "provider": "generic",
          "url": "http://localhost/"
        }
      ]
    },
    "nsis": {
      "oneClick": false,
      "perMachine": true,
      "allowElevation": true,
      "createDesktopShortcut": true,
      "warningsAsErrors": true,
      "allowToChangeInstallationDirectory": true
    },
    "mac": {
      "icon": "resources/icon.icns",
      "category": "Utilities"
    },
    "squirrelWindows": {
      "iconUrl": "https://localhost/icon.ico",
      "msi": false,
      "loadingGif": "resources/animation.gif"
    }
  }
}
alchaplinsky commented 4 years ago

Hey @SunlSonipat, please take a look at electron-builder documentation here https://www.electron.build/configuration/squirrel-windows It says Squirrel.Windows target is maintained, but deprecated. Please use nsis instead.. So I would not use squirrel as a target and therefore there will be no need to install electron-builder-squirrel-windows :)