
I am using Electron Forge to build my Electron App [Mindsaha](https://mindsaha.com). Here's how I setup an automatic updates server for my desktop app, so that whenever I release a new version, users will be notified and updates will be installed automatically.

## Tech stack

This How-to assumes that:

- You have an Electron application setup already
- You are using [Electron Forge](https://www.electronforge.io/) to package your electron application
- You want to setup update server using [cloud object storage](https://www.electronjs.org/docs/latest/tutorial/updates#using-cloud-object-storage-serverless).

## 1. Setup Cloudflare storage

Cloudflare provides an [object storage service called R2](https://developers.cloudflare.com/r2/) allows developers to store large amounts of unstructured data. The good thing is that there's no charge for data transfer to internet, so you won't need to pay anything if users download your application.

1. Signup to Cloudflare and Create a R2 storage bucket names 'yourapp' (example only, you can use any name).
2. [Expose the bucket's content to internet](https://developers.cloudflare.com/r2/buckets/public-buckets/) via either custom domain (like get.yourapp.com) or a cloudflare managed sub-domain. I'd recommend use custom domains.
3. Create a folder called `updates` under your bucket. We will use this `updates` folder to store our electron update files.

## 2. Preparing release meta data

Now that we have our server setup, next step is to prepare the release files and meta data to store in the server. For mac updates, we need `RELEASES.json` file and for Windows we need `RELEASES` file. When user launches your electron app, the updater code will fetch these two files based on the platform and determine if there's a new version available or not.

### Creating Mac RELEASES.json file

When you run `npm run make`, on macOs, there won't be any `RELEASES.json` file be created. So, I came up with a small script that creates the JSON file for me. I created this file under the `PROJECT_ROOT/scripts/releaseJson.js` path.

```javascript
// PROJECT_ROOT/scripts/releaseJson.js

var pjson = require("../package.json");
var path = require("node:path");
var fs = require("node:fs");

// run only in mac
if (process.platform !== "darwin") return;

const { platform, arch } = process;

const releaseVersion = pjson.version;
const outPath = path.resolve("out");
const releaseJsonPath = path.join(
  outPath,
  "make",
  "zip",
  platform,
  arch,
  "RELEASES.json",
);

const releaseMeta = {
  currentRelease: releaseVersion,
  releases: [
    {
      version: releaseVersion,
      updateTo: {
        version: releaseVersion,
        pub_date: new Date().toISOString(),
        notes: "Features and bug fixes",
        name: releaseVersion,
        url: `https://get.yourapp.com/updates/${platform}/${arch}/yourapp-${platform}-${arch}-${releaseVersion}.zip`,
      },
    },
  ],
};

fs.writeFileSync(releaseJsonPath, JSON.stringify(releaseMeta), { flag: "w+" });
```

Take a note at the `url` property - here you should correctly mention the public URL of your cloudflare R2 bucket and the `updates` folder you created in the previous step. Next update the `package.json` to call this script during make step `"make": "npm run clean && electron-forge make && node scripts/releaseJson.js"`. Here's a sample output.

```json
{
  "currentRelease": "1.18.0",
  "releases": [
    {
      "version": "1.18.0",
      "updateTo": {
        "version": "1.18.0",
        "pub_date": "2025-05-17T05:38:11.951Z",
        "notes": "Features and bug fixes",
        "name": "1.18.0",
        "url": "https://get.yourapp.com/updates/darwin/arm64/yourapp-darwin-arm64-1.18.0.zip"
      }
    }
  ]
}
```

### Creating Windows RELEASES file

For Windows, we do not need any extra script, as the `make` itself creates the RELEASES file properly. Here's the sample file for Windows

```text
1B0863D5C31C795C2EADA94DE21D994D1A810AAC yourapp-1.18.0-full.nupkg 119179484
```

So finally our release files structure should look like this.

```text
yourapp
└── out
    └── make
        ├── zip
        │   └── darwin
        │       └── arm64
        │           ├── yourapp-darwin-arm64-1.18.0.zip
        │           └── RELEASES.json
        └── squirrel.windows
            └── win32
                └── x64
                    ├── yourapp-1.18.0 Setup.exe
                    ├── yourapp-1.18.0-full.nupkg
                    └── RELEASES
```
## 3. Uploading release artifacts to Cloudflare bucket

Once you have built the release files, you need to transfer the generated files to the Cluodflare R2 bucket. You can either do this step manually or automate this via script. For my purpose, I have been transferring files manually so far. May be in near future, I will update this section once I automate the file copy to R2 bucket.

## 4. Configuring Electron app to look for updates

Now that you have your release server ready, next step is to instruct your electron app to look in this server for any updates. You do this by placing this piece of code anywhere in your `main.js` file.

```javascript
const { updateElectronApp, UpdateSourceType } = require('update-electron-app');
const logger = require('electron-log');

// other code
updateElectronApp({
  updateSource: {
    type: UpdateSourceType.StaticStorage,
    baseUrl: `https://get.yourapp.com/updates/${process.platform}/${process.arch}`
  },
  logger
});
```

Ensure that the `baseUrl` property has the corrent public URL of your Cloudflare R2 bucket and the directory structure matches the one you have in your bucket.

With this setup, whenever you upload a new version of your app to Cloudflare bucket, user's will be notified about an when they open the app and update will be automatically downloaded and installed.

How to setup Automatic updates for Electron apps using Forge and Cloudflare

I've been working on adding new features to Gauge Generator for a while now. The version 2 of the product is now [live](https://veerasundar.com/gauge-generator).

[![Gauge Generator](https://veerasundar.com/gauge-generator/gauge.png)](https://veerasundar.com/gauge-generator)

I have added support for semi circle, arc shapes along with the circle shape. Now, a label can also be added next to the Gauge. User can pick a gauge from the template gallery and then customize them as per their wish.

Once the gauge is done, user can either copy the image to clipboard, download as an PNG file or view/copy the SVG source code that they can use in their design tools.

Happy Gauging!


Launched Version 2 of Gauge Generator


Before you start reading this article, I'd suggest to take a look at the [Route Planner application](https://veerasundar.com/route-planner) to understand what I am talking about. This post explains the process/code behind the route planner JavaScript application. You can fork/star [the project in Github](https://github.com/vraa/route-planner) if you wish.

[![Route Planner](http://i.imgur.com/BwVt4y2.png?1)](https://veerasundar.com/route-planner)

Having [photography as a hobby](https://500px.com/vraa) makes me travel to places whenever I get a chance. When planning such trips, I needed a tool that assist me in analysing different routes. **Google Maps** is good, but it did not have the feature that I wanted. I.e. showing distance and time between individual destinations. Having a hammer called [React](http://facebook.github.io/react/), this problem really started looking like a nail to me.

I have been using React for a while at work. In short, **I love it**. For a couple of my other side projects, I was using [Backbone](http://backbonejs.org/), which was good. However, with the added knowledge of React, I was really looking for an opportunity to unleash its power :). So I decided to make a simple React application that uses the **Google Maps API and helps me to plan routes for my trip**.

## Laying the foundation - browserify and npm

It is very important to have a good build system and module framework to organize your code. As your project grows, you'll thank yourself for laying a good foundation in the beginning of your project. I decided to use [Grunt](http://gruntjs.com/) and [Browserify](http://browserify.org/) as by build system and bundler. Moreover, there's a JSX transform called [Reactify](https://www.npmjs.com/package/reactify) which makes it easy to use React and Browsrify together. With this, here's my `package.json` with all my project dependencies.

```json
{
    "name": "routeplanner",
    "version": "0.0.1",
    "description": "Google Maps Route Planner",
    "main": "index.js",
    "dependencies": {
        "backbone": "*",
        "underscore": "*",
        "react": "*",
        "react-backbone": "*",
        "react-mixin-manager": "*",
        "google-maps": "*",
        "domready": "*",
        "promise": "*",
        "classnames": "*",
        "vent": "*"
    },
    "devDependencies": {
        "grunt": "*",
        "browserify": "*",
        "grunt-browserify": "*",
        "grunt-cli": "*",
        "grunt-contrib-sass": "*",
        "grunt-contrib-cssmin": "*",
        "grunt-contrib-watch": "*",
        "grunt-contrib-connect": "*",
        "reactify": "*"
    },
    "scripts": {
        "dev": "watchify --ignore-watch=node_modules/** -v -d -t reactify src/js/index.js -o resources/js/routeplanner.js"
    },
    "author": "Veera"
}
```

I have also added `grunt-contrib-sass` and `grunt-contrib-connect` as my dev dependencies. These two helps in compiling my `.scss` files to `.css` and serving static files during development.

As you can see I have also added a **npm script** for auto compiling my project -
```
watchify --ignore-watch=node_modules/** -v -d -t reactify src/js/index.js -o resources/js/routeplanner.js
```

This script, when running, makes sure to take all the JavaScript files referenced from `src/js/index.js`, transform them from JSX to pure JavaScript and then bundle all of them together into `resources/js/routeplanner.js`.

## Grunt build system

After you have your dependencies defined in a `package.json`, next step is to create your build pipeline. For my project, all I needed is three simple tasks.

1. Watch all my `.scss` files for changes.
2. When they change, compile them into `.css` files.
3. A static web server for my development.

Here's my `Gruntfile.js` that include the above said tasks.

```javascript
module.exports = function (grunt) {

    grunt.initConfig({
        pkg: grunt.file.readJSON('package.json'),
        watch: {
            options: {
                atBegin: true
            },
            sass: {
                files: ['src/scss/**/*.scss'],
                tasks: ['sass']
            }
        },
        sass: {
            dist: {
                files: {
                    'resources/css/main.css': 'src/scss/main.scss'
                }
            }
        },
        connect: {
            server: {
                options: {
                    port: 8888,
                    keepalive: true
                }
            },
            keepalive: true
        }
    });

    grunt.loadNpmTasks('grunt-contrib-sass');
    grunt.loadNpmTasks('grunt-contrib-watch');
    grunt.loadNpmTasks('grunt-contrib-connect');

}
```

With the bundler and build system is in place, now its time to write the real code.

## The React application

**React** provides the **View** part of the **MVC** model. All it needs a DOM element to render the React component. You can design your application to be a React component that contains other sub components. That's exactly how I designed the route planner. A single `<Application/>` component that contains all my sub components such as `<Header/>`, `<Map/>` etc.

Here's a code snippet of my application.

### HTML Markup

```html
<div class="app" id="app"></div>
<script src="resources/js/routeplanner.js"></script>
```

### Render the React component into the DOM

```javascript
React.render(<Application />, document.getElementById('app'));
```

### The Application component

```javascript
var Application = React.createClass({
	render: function () {
        return (
            <div className='route-planner'>
                <Header/>
                <Map />
                <div className='panel'>
                    <RouteTabs />
                    <RoutePlan />
                </div>
            </div>
            );
});
```

With this structure, all you have to do is, create each components and define the `render()` method for each of them. For example, here's the `<Header/>` component.

```javascript
var Header = React.createClass({
    render: function () {
        return (
            <header>
                <h1><Route Planner</h1>
            </header>
            );
    }
});
```

## Handling the state

When designing a React application, it is very important to consider where you hold your application state. React suggests to have your components **stateless**. But if you want to have states, then hold the state as high as possible in the component hierarchy and pass it along to the child components as **props**. This way, there will be only one source of truth and data flow will be unidirection.

For my application, I decided to hold my state in the `<Application/>` component which is the top level component.

```javascript
var Application = React.createClass({
    getInitialState: function () {
        return {
            routes: this.load() || SeedData.routes,
            previousRoute: -1,
            activeRoute: 0,
            selectedPlace: null
        };
    },
    render: function () {
        var mapService = this.props.mapService,
            route = this.state.routes.at(this.state.activeRoute);
        return (

            <div className='route-planner'>
                <Header/>
                <Map mapService={mapService} route={route}/>
                <div className='panel'>
                    <RouteTabs
                    routes={this.state.routes}
                    active={this.state.activeRoute}
                    />
                    <RoutePlan
                    routeIndex={this.state.activeRoute}
                    fadeOut={this.state.hideActiveRoute}
                    />
                </div>
            </div>
            );
    }
});
```

The `getInitialState()` function returns the initial state of my application. Whenever there's some data changes, I have methods that update the `<Application/>` component's `state` object. When the state changes, React calls the `render()` method of the `<Application/>` component, inside which I pass the current state object to the child components.

## Conclusion

I believe I showed you the basic structure of the Route Planner application. If you'd like to see more code, feel free to fork [the route-planner project in Github](https://github.com/vraa/route-planner). If you have any questions or wants to know more about any piece of code in this project, please leave a comment.


#webapp (3)