basic-electron-react-boilerplate icon indicating copy to clipboard operation
basic-electron-react-boilerplate copied to clipboard

Change title

Open theIYD opened this issue 7 years ago • 9 comments

Hey.

How can i change the title of the application ?

It shows 'Webpack' in the electron window title.

Hope you reply soon.

Thanks

theIYD avatar Nov 11 '17 04:11 theIYD

You can solve this by providing a template to html-webpack-plugin. In the code, there is a comment mentioning by default there is no template. In webpack.config add the following:

const helpers = require('./config/helpers');

Then change HtmlWebpackPlugin to:

new HtmlWebpackPlugin({
      template: helpers.root('public/index.html'),
      inject: 'body'
 }),

Now you need to create two files. First one is config/helpers with contents of:

const path = require('path');

// Helper functions
function root(args) {
  args = Array.prototype.slice.call(arguments, 0);
  return path.join.apply(path, [__dirname].concat('../', ...args));
}

exports.root = root;

Then create the public/index.html. This is where you set the title name.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">

  <title>Blockbox</title>
</head>
<body>
  <div id="app"></div>
</body>
</html>

I have id=app. They add div with id="root". So your body tags should be empty. So modify it to be:

<body>
</body>

This can now be closed.

keithweaver avatar Nov 30 '17 22:11 keithweaver

I've created a fork of this repo that contains the title attributes (https://github.com/keithweaver/basic-electron-react-boilerplate)

keithweaver avatar Dec 12 '17 11:12 keithweaver

@pbarbiero this can be closed.

keithweaver avatar Dec 12 '17 11:12 keithweaver

Thanks alot @keithweaver.

I have one question. How can we integrate electron-builder instead of using electron-packager ?

theIYD avatar Dec 12 '17 12:12 theIYD

I don't know off the top of my head. I would have to do some digging. I will look into publishing a medium post or Youtube video about it. But for now, this would be all out of the scope of this ticket and issues isn't the place to ask.

keithweaver avatar Dec 12 '17 12:12 keithweaver

Thanks for replying @keithweaver.

Hope you make a Youtube video or a medium post. Where can i find you to talk to you ?

theIYD avatar Dec 12 '17 12:12 theIYD

http://keithweaver.ca

keithweaver avatar Dec 12 '17 12:12 keithweaver

Why not just add an index.html to the template straight up? Is there a reason i'm missing for creating a helper function for this?

new HtmlWebpackPlugin({ template: path.join(__dirname, 'public/index.html'), // or wherever you wanna store your index.html inject: 'body' }),

also, after reading the docs you can just add the title: "sometitle" property to the plugin.

archae0pteryx avatar Jan 22 '18 18:01 archae0pteryx

In the webpack config files add new HtmlWebpackPlugin({title: 'Your Title Here'}),

bradrisse avatar Feb 11 '18 09:02 bradrisse