Page blank building with electron-builder

[50l3r]

I read other issues describing this problem but i cant find any solution:

I recieve a blank page building my app with "npm run build"

GET file://src/main/index.html 404 File not found

But when i try to execute "npm run dev" it works:

[PasserbyFluid]

something was wrong with your main.js file,could show your main.js code

[50l3r]

import Vue from 'vue';
import Vuesax from 'vuesax';
import VeeValidate, { Validator } from 'vee-validate';
import VeeValidateES from 'vee-validate/dist/locale/es';
import VueMoment from 'vue-moment';
import VueShortkey from 'vue-shortkey';
import Swal from 'sweetalert2';
import Tawk from 'vue-tawk';

import 'animate.css/animate.css';
import 'prismjs';
import 'prismjs/themes/prism.css';
import 'material-icons/iconfont/material-icons.css';
import 'vuesax/dist/vuesax.css';
import '@/assets/css/main.css';

import axios from '@/config/axios';
import app from './App.vue';
import router from './router/index';
import store from './store';
import GestiosCache from './store/modules/cache/GestiosCache';
import sdk from './sdk';
import moment from 'moment';

moment.locale("es");

import themeConfig from '../themeConfig';
import './assets/scss/main.scss';
import './globalComponents';
import './filters/filters';

Vue.use(Vuesax);
Vue.use(VeeValidate);
Vue.use(VueMoment, {moment});
Vue.use(VueShortkey);
Vue.use(Tawk, {tawkSrc: 'https://embed.tawk.to/5cc5eb69d6e05b735b44ac58/default'});

Validator.localize('es', VeeValidateES);

require('./assets/css/iconfont.css');

if (!process.env.IS_WEB) Vue.use(require('vue-electron'));

//PROTOTYPES
Vue.http = axios;
Vue.prototype.$http = axios;
Vue.prototype.$swal = Swal;
Vue.prototype.$eventHub = new Vue();
Vue.config.productionTip = false;

// AXIOS API KEY AUTH
if (store.state.Gestios.user) {
    axios.defaults.headers.common['X-API-KEY'] = store.state.Gestios.user.API;
}

// ADDITIONAL VUEX MODULES
store.registerModule('GestiosCache', GestiosCache);
Vue.prototype.$cache = store.state.GestiosCache;
Vue.prototype.$gestios = store.state.Gestios;

//ROUTE VALIDATION
router.beforeEach((to, from, next) => {
    const authRequired = to.matched.some(route => route.meta.auth);
    const project = store.state.Gestios.project;
    const authed = store.state.Gestios.user;

    if (project) {
        if (authRequired && !authed) {
            next('/login');
        } else if (to.name == 'Login' && authed) {
            Vue.Wrapper =
            next('/');
        } else {
            next();
        }
    } else {
        if (to.name != 'Login') {
            next('/login');
        } else {
            next();
        }
    }
});

new Vue({
    mixins: [sdk],
    data() {
        return {
            sandbox_path: store.state.Gestios.paths.sandbox,
            isWeb: process.env.IS_WEB,
            colors: themeConfig.colors
        };
    },
    router: router,
    store: store,
    render: h => h(app),
}).$mount('main');

[50l3r]

Anybody help me? I cant find the problem

[PasserbyFluid]

not renderer process ,please show your main process ,where you create BrowserWindow,I think you load wrong URL

[50l3r]

This

import { app, BrowserWindow } from 'electron'; // eslint-disable-line

/**
 * Set `__static` path to static files in production
 * https://simulatedgreg.gitbooks.io/electron-vue/content/en/using-static-assets.html
 */
if (process.env.NODE_ENV !== 'development') {
    global.__static = require('path')
        .join(__dirname, '/static')
        .replace(/\\/g, '\\\\'); // eslint-disable-line
}

let mainWindow;
const winURL = process.env.NODE_ENV === 'development' ? 'http://localhost:9080' : `file://${__dirname}/index.html`;

function createWindow() {
    /**
     * Initial window options
     */
    mainWindow = new BrowserWindow({
        height: 750,
        useContentSize: true,
        width: 1220,
        frame: false,
        minHeight: 600,
        minWidth: 940,
        resizable: true
    });

    mainWindow.loadURL(winURL);

    mainWindow.on('closed', () => {
        mainWindow = null;
    });

    mainWindow.webContents.openDevTools();
}

app.on('ready', createWindow);

app.on('window-all-closed', () => {
    if (process.platform !== 'darwin') {
        app.quit();
    }
});

app.on('activate', () => {
    if (mainWindow === null) {
        createWindow();
    }
});

[PasserbyFluid]

sorry ,I cannot help you

[zaherg]

try to remove this line mainWindow.webContents.openDevTools(); no need for it. Since this line belongs to the development environment.

and if you looked at your index.dev.js file you will notice this line:

// Install `electron-debug` with `devtron`
require('electron-debug')({showDevTools: true});

which will open the dev tool automatically when you run yarn dev

[50l3r]

try to remove this line mainWindow.webContents.openDevTools(); no need for it. Since this line belongs to the development environment.

and if you looked at your index.dev.js file you will notice this line:

// Install `electron-debug` with `devtron`
require('electron-debug')({showDevTools: true});

which will open the dev tool automatically when you run yarn dev

This line: mainWindow.webContents.openDevTools(); its for open shell and debug the build .exe

If i open the .exe i have a blank page:

https://i.gyazo.com/820160540a534ccc8f1546aad22269f1.png

[zaherg]

This line is for development and should not be part of the production build.

And you don't need it within your index.js file as it's already in your index.dev.js file

On Mon, 6 May 2019, 7:21 pm 50l3r, notifications@github.com wrote:

try to remove this line mainWindow.webContents.openDevTools(); no need for it. Since this line belongs to the development environment.

and if you looked at your index.dev.js file you will notice this line:

// Install electron-debug with devtron require('electron-debug')({showDevTools: true});

which will open the dev tool automatically when you run yarn dev

This line: mainWindow.webContents.openDevTools(); its for open shell and debug the build .exe

If i open the .exe i have a blank page:

https://i.gyazo.com/820160540a534ccc8f1546aad22269f1.png

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/SimulatedGREG/electron-vue/issues/869#issuecomment-489681617, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAGX2EJSGMP4OIJAOW6ZGDPUBLHVANCNFSM4HJBCORQ .

[50l3r]

This line is for development and should not be part of the production build. And you don't need it within your index.js file as it's already in your index.dev.js file … On Mon, 6 May 2019, 7:21 pm 50l3r, @.***> wrote: try to remove this line mainWindow.webContents.openDevTools(); no need for it. Since this line belongs to the development environment. and if you looked at your index.dev.js file you will notice this line: // Install electron-debug with devtron require('electron-debug')({showDevTools: true}); which will open the dev tool automatically when you run yarn dev This line: mainWindow.webContents.openDevTools(); its for open shell and debug the build .exe If i open the .exe i have a blank page: https://i.gyazo.com/820160540a534ccc8f1546aad22269f1.png — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#869 (comment)>, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAGX2EJSGMP4OIJAOW6ZGDPUBLHVANCNFSM4HJBCORQ .

Yeah, i only add this line for debug purposes.

I build, tun the executable and didnt see nothing

[zaherg]

Do you have any logging implementation that you can use to share with us?

Also can you share your packages.json file

On Mon, 6 May 2019, 10:21 pm 50l3r, notifications@github.com wrote:

This line is for development and should not be part of the production build. And you don't need it within your index.js file as it's already in your index.dev.js file … <#m-31707697937658955> On Mon, 6 May 2019, 7:21 pm 50l3r, @.***> wrote: try to remove this line mainWindow.webContents.openDevTools(); no need for it. Since this line belongs to the development environment. and if you looked at your index.dev.js file you will notice this line: // Install electron-debug with devtron require('electron-debug')({showDevTools: true}); which will open the dev tool automatically when you run yarn dev This line: mainWindow.webContents.openDevTools(); its for open shell and debug the build .exe If i open the .exe i have a blank page: https://i.gyazo.com/820160540a534ccc8f1546aad22269f1.png — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#869 (comment) https://github.com/SimulatedGREG/electron-vue/issues/869#issuecomment-489681617>, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAGX2EJSGMP4OIJAOW6ZGDPUBLHVANCNFSM4HJBCORQ .

Yeah, i only add this line for debug purposes.

I build, tun the executable and didnt see nothing

— You are receiving this because you commented. Reply to this email directly, view it on GitHub https://github.com/SimulatedGREG/electron-vue/issues/869#issuecomment-489742553, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAGX2ETJDKQAOD4BVQ6GJ3PUCALVANCNFSM4HJBCORQ .

[50l3r]

Do you have any logging implementation that you can use to share with us? Also can you share your packages.json file … On Mon, 6 May 2019, 10:21 pm 50l3r, @.> wrote: This line is for development and should not be part of the production build. And you don't need it within your index.js file as it's already in your index.dev.js file … <#m-31707697937658955> On Mon, 6 May 2019, 7:21 pm 50l3r, @.> wrote: try to remove this line mainWindow.webContents.openDevTools(); no need for it. Since this line belongs to the development environment. and if you looked at your index.dev.js file you will notice this line: // Install electron-debug with devtron require('electron-debug')({showDevTools: true}); which will open the dev tool automatically when you run yarn dev This line: mainWindow.webContents.openDevTools(); its for open shell and debug the build .exe If i open the .exe i have a blank page: https://i.gyazo.com/820160540a534ccc8f1546aad22269f1.png — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#869 (comment) <#869 (comment)>>, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAGX2EJSGMP4OIJAOW6ZGDPUBLHVANCNFSM4HJBCORQ . Yeah, i only add this line for debug purposes. I build, tun the executable and didnt see nothing — You are receiving this because you commented. Reply to this email directly, view it on GitHub <#869 (comment)>, or mute the thread https://github.com/notifications/unsubscribe-auth/AAAGX2ETJDKQAOD4BVQ6GJ3PUCALVANCNFSM4HJBCORQ .

Mmm nope.

This is my package.json

{
  "name": "gestios-apps",
  "version": "0.0.1",
  "author": "50l3r <500l3r@gmail.com>",
  "description": "Native version of gestios",
  "license": null,
  "main": "./dist/electron/main.js",
  "scripts": {
    "build": "node .electron-vue/build.js && electron-builder",
    "build:dir": "node .electron-vue/build.js && electron-builder --dir",
    "build:clean": "cross-env BUILD_TARGET=clean node .electron-vue/build.js",
    "build:web": "cross-env BUILD_TARGET=web node .electron-vue/build.js",
    "dev": "node .electron-vue/dev-runner.js",
    "lint": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter src",
    "lint:fix": "eslint --ext .js,.vue -f ./node_modules/eslint-friendly-formatter --fix src",
    "pack": "npm run pack:main && npm run pack:renderer",
    "pack:main": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.main.config.js",
    "pack:renderer": "cross-env NODE_ENV=production webpack --progress --colors --config .electron-vue/webpack.renderer.config.js",
    "postinstall": "npm run lint:fix"
  },
  "build": {
    "productName": "Gestios",
    "appId": "es.calltek.gestios",
    "directories": {
      "output": "build"
    },
    "files": [
      "dist/electron/**/*"
    ],
    "dmg": {
      "contents": [
        {
          "x": 410,
          "y": 150,
          "type": "link",
          "path": "/Applications"
        },
        {
          "x": 130,
          "y": 150,
          "type": "file"
        }
      ]
    },
    "mac": {
      "icon": "build/icons/icon.icns"
    },
    "win": {
      "icon": "build/icons/icon.ico"
    },
    "linux": {
      "icon": "build/icons"
    }
  },
  "dependencies": {
    "@chenfengyuan/vue-countdown": "^1.0.1",
    "animate.css": "^3.7.0",
    "apexcharts": "^3.2.1",
    "axios": "^0.18.0",
    "chart.js": "^2.7.3",
    "debounce": "^1.2.0",
    "js-cookie": "^2.2.0",
    "material-icons": "^0.3.0",
    "perfect-scrollbar": "^1.4.0",
    "postcss-loader": "^3.0.0",
    "prismjs": "^1.15.0",
    "sweetalert2": "^8.8.7",
    "tailwindcss": "^0.7.4",
    "vee-validate": "^2.1.3",
    "vue": "2.6.7",
    "vue-apexcharts": "^1.2.8",
    "vue-chartjs": "^3.4.0",
    "vue-echarts": "^3.1.3",
    "vue-electron": "^1.0.6",
    "vue-feather-icons": "^4.7.1",
    "vue-flag-icon": "^1.0.6",
    "vue-form-wizard": "^0.8.4",
    "vue-fullcalendar": "^1.0.9",
    "vue-moment": "^4.0.0",
    "vue-perfect-scrollbar": "^0.1.0",
    "vue-prism-component": "^1.1.0",
    "vue-quill-editor": "^3.0.6",
    "vue-router": "^3.0.1",
    "vue-select": "^2.5.1",
    "vue-shortkey": "^3.1.6",
    "vue-video-player": "^5.0.2",
    "vue2-google-maps": "^0.10.3",
    "vuedraggable": "^2.16.0",
    "vuejs-datepicker": "^1.5.4",
    "vuesax": "^3.8.61",
    "vuex": "^3.0.1",
    "vuex-electron": "^1.0.0",
    "vuex-persistedstate": "^2.5.4"
  },
  "devDependencies": {
    "@vue/cli-plugin-babel": "^3.0.4",
    "@vue/cli-plugin-eslint": "^3.0.4",
    "@vue/cli-service": "^3.0.4",
    "ajv": "^6.5.0",
    "babel-core": "^6.26.3",
    "babel-eslint": "^8.2.6",
    "babel-loader": "^7.1.4",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "babel-register": "^6.26.0",
    "babili-webpack-plugin": "^0.1.2",
    "cfonts": "^2.1.2",
    "chalk": "^2.4.1",
    "copy-webpack-plugin": "^4.5.1",
    "cross-env": "^5.1.6",
    "css-loader": "^0.28.11",
    "del": "^3.0.0",
    "devtron": "^1.4.0",
    "electron": "^2.0.4",
    "electron-builder": "^20.19.2",
    "electron-debug": "^1.5.0",
    "electron-devtools-installer": "^2.2.4",
    "eslint": "^4.19.1",
    "eslint-config-airbnb-base": "^12.1.0",
    "eslint-config-prettier": "^4.1.0",
    "eslint-friendly-formatter": "^4.0.1",
    "eslint-import-resolver-webpack": "^0.10.1",
    "eslint-loader": "^2.0.0",
    "eslint-plugin-html": "^4.0.3",
    "eslint-plugin-import": "^2.12.0",
    "eslint-plugin-prettier": "^3.0.1",
    "eslint-plugin-vue": "^5.2.2",
    "file-loader": "^1.1.11",
    "html-webpack-plugin": "^3.2.0",
    "mini-css-extract-plugin": "0.4.0",
    "multispinner": "^0.2.1",
    "node-loader": "^0.6.0",
    "node-sass": "^4.9.2",
    "prettier": "^1.16.4",
    "sass-loader": "^7.0.3",
    "style-loader": "^0.21.0",
    "url-loader": "^1.0.1",
    "vue-html-loader": "^1.2.4",
    "vue-loader": "^15.2.4",
    "vue-style-loader": "^4.1.0",
    "vue-template-compiler": "2.6.7",
    "webpack": "^4.15.1",
    "webpack-cli": "^3.0.8",
    "webpack-dev-server": "^3.1.4",
    "webpack-hot-middleware": "^2.22.2",
    "webpack-merge": "^4.1.3"
  }
}

[zaherg]

Ok, my only hope is for you to implement window.onerror function to catch any unhandled exception on the renderer check https://stackoverflow.com/a/39305399/1013493 for how to add it to your code.

another option is to try building the project using build:dir or build:web and see what can you get as a feedback out of them.

[PasserbyFluid]

ok,could you show all code on github?I'm going to try it locally.

[50l3r]

It's a private repo but i give you haccess: https://github.com/50l3r/gestios-native

@linuxjuggler u too

This repo needs a private system called gestios who control the CRUD but with the client u dont need any more to build.

[zaherg]

hey @50l3r I can't promise anything since am not using Windows, but I'll check the code when I get some free time.

Thanks

[50l3r]

Much thanks @linuxjuggler.I try to use ipc but i can't view more errors:

The error i cant view only appear 1 sec: https://gyazo.com/9e96d740de93afc774c1242dcb5e2bc5

[zaherg]

Here is what I think you should do:

1. try to update the packages you have, remember that updates will hold fixes to the packages.
2. try to upgrade to the latest electron which is version 5.0.1 but be careful from the breaking features they have.

All of the above has nothing to do with your problem, but I wanted to advise you about keeping your code up to date.

your code is missing the primary environment variable which tells them that you are building for production, not development.

in your .electron-vue/build.js you are missing this line:

process.env.NODE_ENV = 'production';

adding that after use strict will tell webpack that you are building for a production environment.

your problem was in the following config section :

  node: {
    __dirname: process.env.NODE_ENV !== 'production',
    __filename: process.env.NODE_ENV !== 'production'
  },

which always return true since they don't have any information that the build is for production.

You still have to fix some other issues, but at least now you have your app up and running.

[zaherg]

also @50l3r remember to revoke my invitation.

[50l3r]

Much thanks @linuxjuggler

Yeah, now i have problem with image routes and vue router paths, but i working to solve it.

[zaherg]

Good luck man, I think you should close this ticket since we have fixed your problem

[antonreshetov]

Same issue only in linux build