Node modules not found after installation


#1

hello,

I’m building my first app in electron and I’m stuck on a problem I can’t seem to fix.

I’m using Electron builder along with electron packager to export my .exe and .dmg. That all works fine but the none of my renderer node modules seem to work. The thing is : when i build my applications is puts them in the folder ‘/dist’, when i open the application over there it works. When I install it and it is stored in ‘My Applications’, the it doesn’t work.

Should I include the node_modules in my app folder ?

Can somebody spot what I’m doing wrong ?

My general folder structure :

Dist structure :

Package.json
{
“name” : “Pilot”,
“version” : “0.1.0”,
“main” : “js/main.js”
}

index.html

<!doctype html>

<html lang="en">
<head>
    <meta charset="utf-8">
    <title>The HTML5 Herald</title>
</head>

<body>
    <button id="ipc-btn" type="button">Send IPC call</button>
    <div style="border:solid 1px grey">
        <h4>IPC Listener</h4>
        <p>Klik on a menu item or use the shortcuts</p>
        <div id="ipc-listener-wrapper">

        </div>
    </div>

    <button id="open-dialog" type="button">open dialog</button>
    <button id="make-pdf" type="button">generate PDF</button>

    <script src="http://localhost:35729/livereload.js"></script>

    <script>
        var remote = require('remote');
        window.$ = window.jQuery = require('jquery');

        var ipc = require('ipc');
        ipc.on('do-action-1', function(message){
            $('#ipc-listener-wrapper').append('<p>'+message+'</p>');
        });

        ipc.on('do-action-2', function(message){
            $('#ipc-listener-wrapper').append('<p>'+message+'</p>');
        });

        ipc.on('do-action-3', function(message){
            $('#ipc-listener-wrapper').append('<p>'+message+'</p>');
        });

        ipc.on('do-action-4', function(message){
            $('#ipc-listener-wrapper').append('<p>'+message+'</p>');
        });

        $('#ipc-btn').on('click', function(){
            ipc.send('new-view');
        });

        $('#make-pdf').on('click',function(){
            ipc.send('generate-pdf');
        });



        /*
         * Path uploader test
         */
        $('#open-dialog').on('click', function(){
            ipc.send('open-path-dialog');
        })

        ipc.on('path-chosen', function(message){
            $('#ipc-listener-wrapper').append('<p>'+message+'</p>');
        });

        ipc.on('pdf-done', function(){
            $('#ipc-listener-wrapper').append('<p>Pdf done generating</p>');
        });
    </script>
</body>
</html>

main.js

var app = require('app');  // Module to control application life.
var BrowserWindow = require('browser-window');  // Module to create native browser window.
var Menu = require('menu');
var MenuItem = require('menu-item');
var ipc = require('ipc');
var dialog = require('dialog');
var exec = require('child_process').exec, child;


// Report crashes to our server.
require('crash-reporter').start();

// Keep a global reference of the window object, if you don't, the window will
// be closed automatically when the JavaScript object is garbage collected.
var mainWindow = null;

// Quit when all windows are closed.
app.on('window-all-closed', function () {
    // On OS X it is common for applications and their menu bar
    // to stay active until the user quits explicitly with Cmd + Q
    if (process.platform != 'darwin') {
        app.quit();
    }
});

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
app.on('ready', function () {
    // Create the browser window.
    mainWindow = new BrowserWindow({width: 800, height: 600});

    // and load the index.html of the app.
    mainWindow.loadUrl('file://' + __dirname + '/../views/index.html');

    // Open the DevTools.
    //mainWindow.webContents.openDevTools();

    // Emitted when the window is closed.
    mainWindow.on('closed', function () {
        // Dereference the window object, usually you would store windows
        // in an array if your app supports multi windows, this is the time
        // when you should delete the corresponding element.
        mainWindow = null;
    });

    var menuBuilder = new MENUBUILDER();
    menuBuilder.init();
});


/*
 * IPC events
 */

ipc.on('new-view', function(event, arg){
    // and load the index.html of the app.
    mainWindow.loadUrl('file://' + __dirname + '/../views/test.html');

    // Open the DevTools.
    //mainWindow.webContents.openDevTools();
});

ipc.on('open-path-dialog', function(event, arg){
    dialog.showOpenDialog(mainWindow,{
        properties: ['openDirectory']
    },function(file_name){
        mainWindow.webContents.send('path-chosen',file_name);
    });
});

ipc.on('generate-pdf', function(event, arg){
    child = exec('electron-pdf index.html ~/Desktop/index.pdf', function(me, buffer){
        mainWindow.webContents.send('pdf-done');
    });
});


function MENUBUILDER (){
    var ths = this;

    ths.init = function(){
        var template = [
            {
                label: 'window',
                submenu: [
                    {
                        label: 'action 1',
                        accelerator: 'CmdOrCtrl+Z', //shortcut
                        click: function(){
                            mainWindow.webContents.send('do-action-1','action 1 message');
                        }
                    },
                    {
                        label: 'action 2',
                        accelerator: 'Shift+CmdOrCtrl+Z',//shortcut
                        click: function(){
                            mainWindow.webContents.send('do-action-2','action 2 message');
                        }
                    },
                    {
                        type: 'separator'
                    },
                ]
            },
            {
                label: 'services',
                submenu: [
                    {
                        label: 'action 3',
                        accelerator: 'CmdOrCtrl+R',
                        click: function(){
                            mainWindow.webContents.send('do-action-3','action 3 message');
                        }
                    },
                    {
                        label: 'action 4',
                        accelerator: 'CmdOrCtrl+T',
                        click: function(){
                            mainWindow.webContents.send('do-action-4','action 4 message');
                        }
                    }
                ]
            },
        ];

        if (process.platform == 'darwin') {
            var name = app.getName();
            template.unshift({
                label: name,
                submenu: [
                    {
                        label: 'About ' + name,
                        role: 'about'
                    },
                    {
                        type: 'separator'
                    },
                    {
                        label: 'Services',
                        role: 'services',
                        submenu: []
                    },
                    {
                        type: 'separator'
                    },
                    {
                        label: 'Hide ' + name,
                        accelerator: 'Command+H',
                        role: 'hide'
                    },
                    {
                        label: 'Hide Others',
                        accelerator: 'Command+Shift+H',
                        role: 'hideothers'
                    },
                    {
                        label: 'Show All',
                        role: 'unhide'
                    },
                    {
                        type: 'separator'
                    },
                    {
                        label: 'Quit',
                        accelerator: 'Command+Q',
                        click: function () {
                            app.quit();
                        }
                    },
                ]
            });
        }

        menu = Menu.buildFromTemplate(template);
        Menu.setApplicationMenu(menu);
    }
}