electron with react and webpack - reactjs

Question

I am trying to run a simple electron app with webpack and react.
So I set my webpack with target: "electron"
const webpack = require('webpack');
const path = require('path');
const SassLintPlugin = require('sasslint-webpack-plugin');
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const extractSass = new ExtractTextPlugin({
filename: '[name].css',
disable: process.env.NODE_ENV === 'development',
});
module.exports = {
target: 'electron',
context: path.resolve(__dirname),
entry: {
app: './assets/js/components/index',
main: './main',
},
output: {
publicPath: '/dist/',
path: path.resolve('./dist/'),
filename: '[name].js',
},
module: {
rules: [
{
test: /\.jsx?$/,
loader: 'eslint-loader',
include: path.resolve(__dirname, './assets/js/'),
exclude: /node_modules/,
enforce: 'pre',
},
{
test: /\.jsx?$/,
include: path.resolve(__dirname, './assets/js/'),
exclude: /node_modules/,
loader: 'babel-loader',
},
{
test: /\.scss$/,
include: path.resolve(__dirname, './assets/scss/'),
loader: extractSass.extract({
use: [
{ loader: 'css-loader' },
{ loader: 'sass-loader' },
],
// use style-loader in development
fallback: 'style-loader',
}),
exclude: /node_modules/,
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file?name=public/fonts/[name].[ext]',
},
],
},
resolve: {
extensions: ['.js', '.jsx'],
modules: [path.resolve(__dirname, 'node_modules')],
},
plugins: [
new webpack.optimize.CommonsChunkPlugin({
names: ['main'],
}),
new SassLintPlugin({
configFile: '.sass-lint.yml',
context: [path.resolve(__dirname, './assets/scss/')],
ignoreFiles: [],
ignorePlugins: [],
glob: '**/*.s?(a|c)ss',
quiet: false,
failOnWarning: false,
failOnError: true,
testing: false,
}),
extractSass,
new HtmlWebpackPlugin({
title: 'Calendar Component',
template: 'assets/index-template.html',
minify: {
collapseWhitespace: process.env.NODE_ENV === 'production',
},
}),
],
};
My bundles are created correctly into index.html, app.js and main.js and ./dist folder.
But I got an error: Unable to find Electron at my_path_project/dist
My scripts at package.json are:
"main": "./dist/main.js",
"scripts": {
"start": "electron ./dist/",
"dev": "NODE_ENV=development webpack"
},
Can anyone help me?
Thanks in advance.

Answer 1

Probably because there is no one. You are install electron to your node modules, you are referring to that in modules: [path.resolve(__dirname, 'node_modules')].
Simply change your start command to:
"main": "dist/main.js",
"scripts": {
"start": "electron ."
},

Answer 2

The solution from #Anatoly helped me to appear the electron windows, but I couldn't run react over electron.
So I found this tutorial that worked to run react over electron:
https://medium.freecodecamp.com/building-an-electron-application-with-create-react-app-97945861647c
I hope this will help ;)