Menu
Electron helps you for build a cross platform desktop applications with using Node.js as a back-end and a Chromium front-end. So you can use JavaScript, HTML and CSS for develop your application and using Electron you can wrap them as a desktop app. Basically, Electron is a framework for creating native applications with web technologies. I’ve been developing with React Native for a while and no, you DON’T need Mac to write your code. BUT you will need Mac to compile and publish your app on App Store.
Facebook Supported, Community Driven
Facebook released React Native in 2015 and has been maintaining it ever since.
In 2018, React Native had the 2nd highest number of contributors for any repository in GitHub. Today, React Native is supported by contributions from individuals and companies around the world including Callstack, Expo, Infinite Red, Microsoft and Software Mansion.
Our community is always shipping exciting new projects and exploring platforms beyond Android and iOS with repos like React Native Windows, React Native macOS and React Native Web.
React Native is being used in thousands of apps, but it's likely you've already used it in one of these apps:
and many more.
Table of Contents
- Creating the starting app
Imagine you could build desktop apps only with HTML, CSS and JavaScript. This is possible and easy with library called Electron. This tutorial will show you how to start building your first desktop apps with Electron and React. We will take a look at what dependencies are necessary. Then, we will set up Webpack. Finally, we will create a starting template for your electron app.
Starting with the basics
The first thing we will do is taking care about dependencies. These packages will help us start building our desktop apps. As we touched upon in the intro, we will use Electron and React. So, we will need to install
electron
, react
and react-dom
packages from npm. I also mentioned Webpack. This means that we will also need html-webpack-plugin
, file-loader
, webpack
, webpack-cli
, webpack-dev-server
.If we want to build desktop apps with React and ES6 syntax, we will need to add
babel-core
, babel-loader
and babel-preset-react
. And, we can also add babili-webpack-plugin
. This is Webpack plugin for minifying based on Babel. Since we will want to use CSS let’s also add css-loader
, style-loader
and mini-css-extract-plugin
to our stack. When it comes to CSS, we have a couple of options.We can either use a plain CSS or we can use some preprocessor. Or, we can another tool to transform our CSS such as PostCSS. Since PostCSS is incredibly extensible and still very similar to pure CSS, let’s choose that. This will mean that that we will need a few more packages. These packages will depend on what PostCSS plugins will you want to use.
One that will be necessary is
postcss-loader
. This will help Webpack process CSS “written” in PostCSS. Some handy PostCSS plugins are postcss-cssnext
, postcss-import
, postcss-nested
and postcss-pxtorem
. First will take care about prefixes. Second will allow us to use imports and third to nest selectors, like in Sass or Less. The last will convert pixels to rems.The last dependency we will need to add will be either
electron-packager
or electron-builder
. These dependencies will help us build our desktops apps so we can use them as normal apps. Meaning, it will generate folder with executable files and anything our app needs in order to run. For now, let’s choose the first one. Available options for packager are on GitHub.Now, to the
package.json
. The absolute minimum amount of information required are just two, name
and version
. I like to create more descriptive info. Decide how much information do you want to include for your project. About the scripts, we will use four, prod
, start
, build
, package
and postpackage
.The
build
and prod
scripts will use Webpack configs for “build” or production. The start
script will use config for “dev”. The same applies to webpack modes. The build
and prod
scripts will use production mode while start
will use development mode. The prod
script will use webpack in production mode with electron so we can preview our app. The package
will build our code and use electron to generate the app.A more descriptive version of
package.json
can look something like this:Now, when we have completed the
package.json
, with all dependencies, we can now run npm install
or yarn
. This will download all dependencies specified in package.json
from npm.When we work on our desktop apps, there might be some files we don’t want to include in git. For this reason, we should also add some
.gitignore
. Below is a more universal .gitignore
that will take care about a lot of files that you may not want to include in git. It will work well with most projects. For now, the first three sections (build, development and logs) will be very useful. Other than that, use whatever you want.Setting up Webpack, Babel and PostCSS
![Mac Mac](https://reactnativeexample.com/content/images/2018/06/react-native-macos.jpg)
Next, let’s take care about config files for Webpack. We will create two. We will use one config while developing our desktop apps. The second config will be used when we decide to build our desktop apps and package them for production. These configs we look very similar. One difference is that, unlike config for production, config for development will use
devtool
and devServer
. Second, config for production will use BabiliPlugin
plugin.Aside to these, we will also need to specify
rules
, target
and plugins
. Plugins
will tell Webpack what plugins do we want to use. target
will specify that we want to compile our desktop apps for Electron, for renderer process more specifically. Rules
will tell Webpack what files to watch and how to handle them, what loader should it use to process them.If you are curios about additional options or the inner working of Webpack, take a look at Webpack documentation. Another good place to learn about Webpack is Webpack Academy. Below are examples of configs that will help us set up Webpack so we can start working on our desktop apps.
Side note: I included rules for images and custom fonts. If you don’t want to use any images or fonts in your desktops apps, hosted locally, feel free to remove these rules. Also, if you decide that you don’t want to use both, you can also remove
file-loader
from package.json
. This package will no longer have any use.Webpack config for development environment:
Webpack config for production environment:
Side note:
HtmlWebpackPlugin
can generate default template (index.html file) for use. However, you may want to add additional assets or tags, and you may not want to do it through the plugin itself. So, for this reason we will use custom template specified by template
inside HtmlWebpackPlugin
in plugins
section of both configs. If you want to use generated template, remove the template
part from HtmlWebpackPlugin
configuration.When we are done with Webpack we still need to do one thing. We need to set up configs babel and PostCSS Webpack will use. This will be very fast. We will need to create
.babelrc
and postcss.config.js
. For babel, we will specify what preset we want to use. This will be “react. For PostCSS, we will define what plugins we want to use. We can also add some custom configuration, such as browser ranges for prefixes and pxtorem.Final version of
.babelrc
:Final version of
postcss.config.js
:Setting up electron
Next is Electron. This is the crucial part since we want to use Electron to build desktop apps. Electron uses one main JavaScript source file. The most important part of this file is the main process. This process is something like a manager. It handles tasks such as creating app window, attaching listeners and actions and just anything that works with renderer processes.
The code I used is a slightly customized template provided by Electron community. Our version contains additional
if
statement for Webpack. It basically says whether we want to run our app on URL (localhost) via dev server or as a “standalone” app from build. URL, and dev server, is used only for development mode. Otherwise, we want to run the build of our app.A very short version of what we do in this file is creating a new application, or a window, by defining the method that will be used for starting it and for shutting it down. Fortunately, people behind Electron did a great job and the code itself is well documented. If you want to know more about what features can you use for your desktop apps, take a look at the official documentation.
Final version of
main.js
:Creating the starting app
We are almost at the end. In order to start building our first desktop apps, we will need a couple more files. The most important will be
index.html
, index.js
and App.jsx
. Well, if you decided to let Webpack generate the template for you (note about HtmlWebpackPlugin
), then you will need only index.js
. index.html
will be very simple.This file will contain the default
DOCTYPE
, html
, head
, body
tags along with title
and meta for http-equiv
. And, we will add a div
as a place where we will render the main component of our React app. We will put this file into public
folder.React Native For Mac
The final version of
index.html
:Adding React
Next is the
index.js
. This file will be simple as well. It will contain imports for React
and render
. And, we can also add another import for some styles we will create later. Below that, we will create the main App
component. After that, we will use render
and render the App
component into the DOM, the div
inside index.html
.Final version of
index.js
:Side note: if you decided to use template generated by Webpack and
HtmlWebpackPlugin
, you will need an additional code to index.js
. You will need to create the div
we have in index.html
and append it to body
element. Modified version of index.js
is below.Adding styles
Now, we can add some styles, just to make sure Webpack loaders work. Let’s style the main heading we used in
index.js
.How Build Desktop Mac Apps With React Native Americans
Final structure
We worked with a lot of files throughout this tutorial. If you followed all the steps, the final structure for our electron app will look something as the example below.
Closing thoughts on building desktop apps with Election and React
And, this is all for this article! You created your own simple starting template for building desktop apps. I hope you’ve enjoyed this tutorial and learned something new. What now? Go ahead, take this template and build the app you always wished existed. The only limit is your imagination. Thank you for your time and have a great day!
One warning. Building your own desktop apps can be highly addictive!
React For Desktop Apps
If you liked this article, please subscribe so you don't miss any future post.
If you'd like to support me and this blog, you can become a patron, or you can buy me a coffee ?