electron-express-react-webpack-boilerplate: A JavaScript repository from raigad

Minimal Electron, Express, React and Webpack boilerplate

Minimal Electron, Express, React and Webpack boilerplate to help you get started with building your next app.

This project was a fork of electron-react-webpack-boilerplate. I keep some files used in that project, but I add and change things.

In this project I add ExpressJs, removed PostCSS, added Sass and added Electron Builder to create the app package.

Install
Configuration
Usage
Change app title
Generate packages
Contact and Support
Licence

Install

Clone this repo

git clone git@github.com:WalterRadduso/electron-express-react-boilerplate.git

Install dependencies

yarn

npm install

Configuration

Server Port

Copy the example environment variable.

cp .env.example .env

Now you are able to change the port.

Usage

Run in dev

yarn start-all

npm run start-all

Run in prod

yarn prod

npm run prod

Build the app

yarn build

npm run build

Change app title

This boilerplate uses HTML Webpack Plugin to generate the HTML file of the app. Changing app title is possible only through webpack configs, webpack.build.config.js and webpack.dev.config.js. App title can be changed by adding objects of options.

In webpack.build.config.js:

plugins: [
  new HtmlWebpackPlugin({title: 'New app title'}),// Add this (line 41)
  new MiniCssExtractPlugin({
    // Options similar to the same options in webpackOptions.output
    // both options are optional
    filename: 'bundle.css',
    chunkFilename: '[id].css'
  }),
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('production')
  }),
  new BabiliPlugin()
]

In webpack.dev.config.js:

plugins: [
  new HtmlWebpackPlugin({title: 'New app title '}),// Add this (line 36)
  new webpack.DefinePlugin({
    'process.env.NODE_ENV': JSON.stringify('development')
  })
]

Generate packages

Files needed

You are able to add the files/folders that you need in your package.

In package.json you have to add/remove the files that you need in your own project.

{
  "build": {
    "files": [
      "dist",
      "electron.js",
      "node_modules",
      "package.json",
      "server.js",
      "src",
      "splash"
    ]
  }
}

MacOS

yarn package-mac

npm run package-mac

Windows

yarn package-win

npm run package-win

Linux

yarn package-linux

npm run package-linux

Contact and Support

I want your feedback! Here's a list of different ways to me and request help:

Report bugs and submit feature requests to GitHub issues.

If you feel generous and want to show some extra appreciation:

raigad/electron-express-react-webpack-boilerplate