CODEWITHSUNDEEP
webpackelectron
james williams
james williams

Reputation: 151

Auto reload changes made on React, Express Webpack with Electron

I've just finished implementing babel, webpack and postcss for compiling Reactjs, Express and tailwindscss and wrapped it with Electron. Everything works perfectly fine, but I'd like to build a script that would allow me to display the changes made from the react to electron. The first thing that happens is compiling everything from Reactjs and then only we run electron to show the changes. I've previously added nodemon as watcher to the express server, but I've recently removed it and planning to try it out later, any suggestions or help would be appreciated as I feel like some sort of watcher needs to be placed and I don't know where to start?

Package.json

  "scripts": {
    "electron": "electron .",
    "build": "webpack --mode production",
    "start": "npm run build && node src/server/index.js",
    "client": "webpack-dev-server --mode development --devtool inline-source-map --hot",
    "server": "nodemon src/server/index.js",
    "dev": "concurrently \"npm run server\" \"npm run client\" \"npm run electron-dev\""
  },

Webpack config

const path = require('path')
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CleanWebpackPlugin = require('clean-webpack-plugin')

const outputDirectory = 'dist'

module.exports = {
    entry: ['babel-polyfill', './src/client/index.js'],
    output: {
        path: path.join(__dirname, outputDirectory),
        filename: 'bundle.js'
    },
    module: {
        rules: [{
            test: /\.(js|jsx)$/,
            exclude: /node_modules/,
            use: {
                loader: 'babel-loader'
            }
        },
        {
            test: /\.css$/,
            use: [
                'style-loader',
                {
                    loader: 'css-loader',
                },
                'postcss-loader'
            ]
        },
        {
            test: /\.(png|woff|woff2|eot|ttf|svg)$/,
            loader: 'url-loader?limit=100000'
        }]
    },
    resolve: {
        extensions: ['*', '.js', '.jsx']
    },
    devServer: {
        port: 3000,
        open: true,
        historyApiFallback: true,
        proxy: {
          '/': 'http://localhost:8080'
        }
    },
    plugins: [
        new CleanWebpackPlugin([outputDirectory]),
        new HtmlWebpackPlugin({
            template: resolve(__dirname, 'public', 'index.html'),
            filename: './index.html'
        })
    ]
}

Or is it possible to make use of the dev server being launched from reactjs and implement it to electron instead of loading the file index.html file with __driname? here is my electron files.

// main.js

// Modules to control application life and create native browser window
const { app, BrowserWindow } = require('electron')
const path = require('path')
const url = require('url')
const startServer = require('../src/server/index');

const createWindow = () => {
    startServer();
  // Create the browser window.
  const mainWindow = new BrowserWindow({
    width: 1500,
    height: 800,
    webPreferences: {
      nodeIntegration: true,
    }
  })

  // and load the index.html of the app.
  mainWindow.loadURL(url.format({
      pathname: path.join(__dirname, '../dist/index.html')
  }))

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

// This method will be called when Electron has finished
// initialization and is ready to create browser windows.
// Some APIs can only be used after this event occurs.
app.whenReady().then(() => {
  createWindow()

  app.on('activate', () => {
    // On macOS it's common to re-create a window in the app when the
    // dock icon is clicked and there are no other windows open.
    if (BrowserWindow.getAllWindows().length === 0) createWindow()
  })
})

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

// In this file you can include the rest of your app's specific main process
// code. You can also put them in separate files and require them here.

Html (bundle.js)

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Reducted</title>
</head>
<body>
    <div id="root"></div>
<script type="text/javascript" src="bundle.js"></script></body>
</html>

Upvotes: 0

Views: 1044

Answers (1)

james williams
james williams

Reputation: 151

So I ended up answering my own question so I'll leave this here

Electron main

changed

mainWindow.loadURL(url.format({
    pathname: path.join(__dirname, '../dist/index.html')
}))

to

mainWindow.loadURL('http://localhost:3000/index.html')

Upvotes: 1

Related Questions