Building a desktop application using Electron and Create React App

This page summarizes the projects mentioned and recommended in the original post on dev.to

Our great sponsors
  • SurveyJS - Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App
  • InfluxDB - Power Real-Time Data Analytics at Scale
  • WorkOS - The modern identity platform for B2B SaaS
  • TL;DR: A step-by-step tutorial explaining how to create a desktop application using Create React App (CRA) and Electron. You can find the source code of the project on GitHub.

  • create-react-app

    Set up a modern web app by running one command.

  • I recently needed to wrap a React app generated with Create React App (CRA) with Electron (well, the app itself uses React Native for Web, but it doesn’t matter). My goal was to stay within the Create React App limits as much as possible (without ejecting). There’s no shortage of guides on how to do it online. Still, I couldn’t find one that fully follows the Electron security guidelines and provides a distribution setup using Electron-builder. So, here’s yet another tutorial on how to wrap an app built with Create React App in Electron — from the initial scaffolding up to the distribution workflow.

  • SurveyJS

    Open-Source JSON Form Builder to Create Dynamic Forms Right in Your App. With SurveyJS form UI libraries, you can build and style forms in a fully-integrated drag & drop form builder, render them in your JS app, and store form submission data in any backend, inc. PHP, ASP.NET Core, and Node.js.

    SurveyJS logo
  • ordinary-puzzles-app

    Mobile and web puzzle game built with React-Native

  • I recently needed to wrap a React app generated with Create React App (CRA) with Electron (well, the app itself uses React Native for Web, but it doesn’t matter). My goal was to stay within the Create React App limits as much as possible (without ejecting). There’s no shortage of guides on how to do it online. Still, I couldn’t find one that fully follows the Electron security guidelines and provides a distribution setup using Electron-builder. So, here’s yet another tutorial on how to wrap an app built with Create React App in Electron — from the initial scaffolding up to the distribution workflow.

  • concurrently

    Run commands concurrently. Like `npm run watch-js & npm run watch-less` but better.

  • concurrently: Run multiple commands concurrently. We’ll use it to run both the Electron process and the react app in watch mode.

  • electron-builder

    A complete solution to package and build a ready for distribution Electron app with “auto update” support out of the box

  • I recently needed to wrap a React app generated with Create React App (CRA) with Electron (well, the app itself uses React Native for Web, but it doesn’t matter). My goal was to stay within the Create React App limits as much as possible (without ejecting). There’s no shortage of guides on how to do it online. Still, I couldn’t find one that fully follows the Electron security guidelines and provides a distribution setup using Electron-builder. So, here’s yet another tutorial on how to wrap an app built with Create React App in Electron — from the initial scaffolding up to the distribution workflow.

  • cross-env

  • cross-env: Run scripts that set and use environment variables across different platforms. We’ll use it to make our scripts compatible with both Unix and Windows OSes.

  • electronmon

    🖥 run, watch, and restart electron apps using magic

  • electronmon: Like nodemon, but for the Electron process. Allows watching and reloading our Electron app.

  • InfluxDB

    Power Real-Time Data Analytics at Scale. Get real-time insights from all types of time series data with InfluxDB. Ingest, query, and analyze billions of data points in real-time with unbounded cardinality.

    InfluxDB logo
  • Nodemon.io

    Monitor for any changes in your node.js application and automatically restart the server - perfect for development

  • electronmon: Like nodemon, but for the Electron process. Allows watching and reloading our Electron app.

  • wait-on

    wait-on is a cross-platform command line utility and Node.js API which will wait for files, ports, sockets, and http(s) resources to become available

  • wait-on: Utility to wait for files, ports, sockets, etc. We’ll use it to wait for the react app to be built before we open the Electron app (while developing).

NOTE: The number of mentions on this list indicates mentions on common posts plus user suggested alternatives. Hence, a higher number means a more popular project.

Suggest a related project

Related posts