Electron

Build cross platform desktop apps with JavaScript, HTML, and CSS

npm i material-bread

yarn add material-bread

There are essentially three steps involved in getting Material Bread working on Electron.

Set up React on Electron
Set up React-Web on Electron
Set up Material Bread and vector icons

The quickest and easiest way to get started is to check out the example repo linked below. If you're familiar with setting up react and react-native-web with electron then you can skip to the section about webpack config and app.js .

Install dependencies

This includes react , react-native , react-native-web , electron , required babel plugins, and webpack loaders.

npm i material-bread electron react react-dom react-native-web react-native-svg modal-enhanced-react-native-web @babel/core @babel/plugin-proposal-class-properties @babel/plugin-proposal-object-rest-spread @babel/plugin-transform-flow-strip-types @babel/plugin-transform-regenerator @babel/plugin-transform-runtime @babel/plugin-proposal-export-default-from css-loader file-loader style-loader webpack webpack-cli webpack-dev-server

HTML entry

Create a src folder with index.html to act as an entry

<!DOCTYPE html>
<html>
  <head>
    <title>Material Bread Electron</title>
    <meta charset="utf-8" />
  </head>
  <body>
    <div id="app"></div>
    <script
      type="text/javascript"
      src="http://localhost:7000/bundle.js"
    ></script>
  </body>
</html>

Create main.js

Create a main.js file in src that will create a window and load the index.html file.

const { app, BrowserWindow } = require("electron");

let win;

const createWindow = () => {
  win = new BrowserWindow({
    width: 800,
    minWidth: 500,
    height: 620,
    minHeight: 500,
    center: true,
    show: false
  });
  win.loadURL(`file:////index.html`);

  win.on("closed", () => {
    win = null;
  });
  win.once("ready-to-show", () => {
    win.show();
  });
};

app.on("ready", createWindow);

app.on("window-all-closed", () => {
  app.quit();
});

app.on("activate", () => {
  if (win === null) {
    createWindow();
  }
});

Create renderer.js

Create a renderer.js file in src that will load react into the html file with hot reloading.

import React from "react";
import { render, unmountComponentAtNode } from "react-dom";

const root = document.getElementById("app");

const renderApp = () => {
  const App = require("./App").default;
  if (root) render(<App />, root);
};

renderApp();

if (module && module.hot != null && typeof module.hot.accept === "function") {
  module.hot.accept(["./App"], () =>
    setImmediate(() => {
      unmountComponentAtNode(root);
      renderApp();
    })
  );
}

Create webpack.config.js

Create a webpack.config.js file in the root of the project that will handle babel plugins, loaders, electron-renderer, output our bundle, and alias react-native.

const path = require("path");

module.exports = {
  mode: "development",
  entry: {
    app: path.join(__dirname, "src", "renderer.js")
  },
  node: {
    __filename: true,
    __dirname: true
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        exclude: /node_modules/(?!(material-bread|react-native-vector-icons)/).*/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["@babel/preset-env", "@babel/preset-react"],
            plugins: [
              "@babel/plugin-transform-flow-strip-types",
              "@babel/plugin-proposal-class-properties",
              "@babel/plugin-proposal-object-rest-spread",
              "@babel/plugin-transform-runtime",
              "@babel/plugin-transform-regenerator",
              "@babel/plugin-proposal-export-default-from"
            ]
          }
        }
      },
      {
        test: /.html$/,
        use: [
          {
            loader: "html-loader"
          }
        ]
      },
      {
        test: /.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        test: /.(png|woff|woff2|eot|ttf|svg)$/,
        loader: "file-loader?limit=100000"
      }
    ]
  },
  resolve: {
    alias: {
      "react-native": "react-native-web"
    }
  },
  output: {
    filename: "bundle.js"
  },
  target: "electron-renderer",
  devServer: {
    contentBase: path.join(__dirname, "src"),
    port: 7000
  }
};

Create App.js and add Icons

Create App.js component in src. Add the FontFace function below to add the material icons to the package.

import React, { Component } from "react";
import { View } from "react-native";
import { Fab } from "material-bread";

const materialFont = new FontFace(
  "MaterialIcons",
  "url(../node_modules/react-native-vector-icons/Fonts/MaterialIcons.ttf)"
);
document.fonts.add(materialFont);

class App extends Component {
  
    render() {
        return (
            <View>
                <Fab />
            </View>
        );
    }
}

export default App;

Add scipts

Add webpack server script and electron server to package.json .

"server": "webpack-dev-server --config ./webpack.config.js",
"electron": "electron ./src/main.js",

Finish

Finally open up two console tabs, run npm run server in one and npm run electron in the other. You should now see your app running with Material Bread components. Keep in mind this a very minimal setup, there are plenty of other great guides setting up react and react-native with electron .

Simply wrap your app or root in the BreadProvider and start developing. You can learn about customizing on the theme page.

import React, { Component } from "react";
import Root from "./Root";
import { BreadProvider } from "material-bread";

export default class App extends Component {
  render() {
    return (
      <BreadProvider>
        <Root />
      </BreadProvider>
    );
  }
}

For a quick start with minimal set up with react-native-web , electron , and materal-bread , checkout the example below

Minimal React Native Electron Example

Electron

Install #

Setup #