basic-electron-react-boilerplate
basic-electron-react-boilerplate copied to clipboard
Change title
Hey.
How can i change the title of the application ?
It shows 'Webpack' in the electron window title.
Hope you reply soon.
Thanks
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.
I've created a fork of this repo that contains the title attributes (https://github.com/keithweaver/basic-electron-react-boilerplate)
@pbarbiero this can be closed.
Thanks alot @keithweaver.
I have one question. How can we integrate electron-builder instead of using electron-packager ?
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.
Thanks for replying @keithweaver.
Hope you make a Youtube video or a medium post. Where can i find you to talk to you ?
http://keithweaver.ca
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.
In the webpack config files add new HtmlWebpackPlugin({title: 'Your Title Here'}),