Render UI using React inside Menu Page

[PDDStudio]

Hello.

This is actually more a question rather than a bug report. What I'm currently trying to do is rendering React Components inside the menubar's page. To achieve this I'm using electron, react and webpack.

However, when I bundle my application with webpack and try to run the build via electron neither the menubar's constructor nor any of its EventEmitters are getting called - which ends up with having my 'electron' application running, but without any additional icon in my menu bar.

Below is my current webpack.config.js - any help is really appreciated.

const path = require('path');
const webpack = require('webpack');
const buildPath = path.resolve(__dirname, 'build');
const nodeModulesPath = path.resolve(__dirname, 'node_modules');
const TransferWebpackPlugin = require('transfer-webpack-plugin');
const WriteFilePlugin = require('write-file-webpack-plugin');

const config = {

    // This is the setting for electron.
    target: "electron",

    // This enables the creation of source maps,
    // which improve the debuggability of the application
    // by allowing you to see where an error was raised.
    devtool: "source-map",

    // Entry file to startsbuilding from.
    // entry.jsx is the renderer process,
    // main.js is for the main process.
    // Electron will be pointed at the main bundle,
    // while the Renderer will point to entry bundle.
    entry: {
        'app': './renderer/app.jsx',
        'index': './index.js'
    },

    // Location and filename pattern of the
    // final build output files.
    output: {
        path: path.join(__dirname, 'build'),
        filename: "[name].bundle.js"
    },

    devServer: {
        outputPath: path.join(__dirname, 'build'),
        inline: false
    },

    module: {
        preLoaders: [
            // Performs linting on code for quality checks
            {
                test: /(\.js$|\.jsx$)/,
                include: path.resolve(__dirname, "renderer"),
                loader: "eslint"
            }
        ],
        loaders: [
            {
                // Post-css loader and its plugins.
                test: /\.scss$/,
                include: path.resolve(__dirname, "./renderer/styles"),
                loaders: [
                    'style',// inserts raw css into styles elements.
                    'css', // css-loader parses css files resolves url() expressions.
                    'sass' // sass-loader for sass compilation
                ]
            },
            {
                // Babel loader configuration. Performs the JSX and ES6 to JS transformations.
                test: /(\.js$|\.jsx$)/,
                include: [
                    path.resolve(__dirname, "renderer"), 
                    path.resolve(__dirname, "public"),
                    ],
                exclude: /node_modules\/(?!menubar\/).*/,
                loader: 'babel-loader',
                query: {
                    presets: ['react', 'es2015', 'stage-2']
                }
            },
            {
                test: /\.json$/,
                loader: 'json-loader'
            }
        ]
    },

    eslint: {
        configFile: '.eslintrc'
    },

    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        // Allows error warnings but does not stop compiling
        new webpack.NoErrorsPlugin(),
        new TransferWebpackPlugin([
            {from: 'public'},
        ], __dirname),
        new WriteFilePlugin(),

    ]
}

module.exports = config;

[jforaker]

See this repo for some tips: https://github.com/romanschejbal/electron-blog

[opensourcekam]

Hey check my page I forked this and setup a react app using create react app inside of it. I test all of my UI in the browser and tweak it for the menu bar app.

[amaury1093]

I think a small example with React could go into the examples: https://github.com/maxogden/menubar/tree/master/examples. Does anyone want to take care of this?

[3on]

For what it's worth, I made a simple fork of the electron-react-boilerplate to run as a menubar app https://github.com/3on/electron-react-boilerplate-menubar if that can help anyone.

[hendrik244]

Hi there, I'm also into this. Would be great to have a small example on how to run a react app as a menubar app.