
- #Electron app icon generator how to#
- #Electron app icon generator install#
- #Electron app icon generator generator#
My package.json would look like something like this. Aside to these two required keys, it is completely up to you to choose how much information you want to add and add them. I usually like to add more, much more, information in my projects. The absolute minimum amount of information required for package.json are just two keys with some value: name and version. Next step is setting up some basic version of package.json. Packaging your application for distribution Setting a custom name and icon for your packaged application Easily packaging applications containing. Side note: webpack-cli package is reuqired since the release of Webpack 4. Yarn add electron react react-dom styled-components

Yarn add -D babel-core babel-loader babel-preset-env babel-preset-react babili-webpack-plugin cross-env electron-packager extract-text-webpack-plugin file-loader html-webpack-plugin webpack webpack-cli webpack-dev-server One thing to keep in mind is that dependencies are installed without any flag while devDependencies are installed with -D or -save-dev flag.

#Electron app icon generator install#
Now, when we know what packages to install, we can use either npm, yarn, pnpm or any other package manager and install them. When it comes to dependencies, our password manager wil need just four: electron, react, react-dom and styled-components. html-webpack-plugin ,webpack ,webpack-cli andwebpack-dev-server`. These are babel-core, babel-loader, babel-preset-env, babel-preset-react, babili-webpack-plugin, cross-env, electron-packager, extract-text-webpack-plugin, file-loader.
#Electron app icon generator generator#
Our password generator will require a couple of dependencies and devDependencies. These each have their own set of configuration options and produce installers with different user experience. For Windows, there are currently two options for the kind of installer that Electron Forge can make, WiX and Squirrel.Windows. It will also help us prevent some of the potential issues that could occure later. One of the ways that an Electron app can be packaged for distribution is by using Electron Forge. Doing so is a good and easy way to start this project. Let’s start, as always, with putting together all prerequisites and assets we will need to create our password generator app. You can find the password generator app on GitHub and npm.
#Electron app icon generator how to#
How to Build Password Generator with Electron & React part 3. How to Build Password Generator with Electron & React part 2. Finally, we will prepare configs for Webpack and main file for electron. Then, we will create package.json and prepare npm scripts. By default it launches server on localhost:3001 address. It will launch UI where you will be able to replace assets with custom ones and generate the required icons. To launch it with UI, run the assets command with -ui flag in the directory with your app.

Today, we will start by putting together all dependencies. Framework7 CLI allows to launch assets generation process with the user interface. Have you ever wanted to build your own password generator? And, what about an app? This tutorial will show you how! In this mini series, we will learn how to use electron and React and build desktop password generator app. Closing thoughts on how to build password generator.
