Electron forge create react app. It's open-source and cross-platform.

Electron forge create react app. Electron has emerged as a popular framework for building desktop applications using web technologies such as HTML, CSS, and JavaScript. The purpose of this guide is to walk through the process of generating and setting an app icon, as well as setting installer and setup icons. Nov 18, 2024 · Combining Electron with Next. Use electron-toolkit to help you develop. It only falls down when you want to navigate to a Get code generated from the base Electron Forge Vite template to work with Typescript (branch) and optionally incrementally including React (branch), Tailwind (branch). On Windows and Linux, the will-finish-launching event is the same as the ready event; on macOS, this event represents the applicationWillFinishLaunching notification of NSApplication. Under the hood, it combines a lot of existing Electron tools (e. I recently built an Electron app using create-react-app. For more context, see the May 22, 2024 · Electron and React typescript, Tailwindcss — Create an awesome cross-platform desktop app Hello everyone, I just released the first version of Offline Dev Tools — A small desktop application … May 15, 2022 · Custom environments in a electron app (ElectronForge + webpack + react) Even though you are not working with electron forge, webpack or react this post can be useful, wait for it. Aug 28, 2020 · A basic guide to start using Electron with React in minimum steps Electron says that if you can build a website, you can build a cross-platform desktop app. Get your Electron app started the right way with first-class support for JavaScript bundling and an extensible module ecosystem. But then I realized I'm not sure how to get the React components into my Electron app. Feb 15, 2021 · So let's use it! 2. Electron Forge Electron Forge is a tool for packaging and publishing Electron applications. Aug 26, 2019 · Although Electron docs mentions electron-forge has ready to use templates for React, at the time of writing electron-forge documentation does not list any React template nor any guide on how to setup React or TypeScript. Jan 25, 2022 · The above command will launch the Electron React app in debug mode. Learn to create an electron app using the react electron boilerplate. Add the following packages to your devDependencies so that JSX and other React features can be used properly: Aug 8, 2023 · Are you trying to build your own Electron JS application with React? Do you also want to store and manage data efficiently with SQLite? In this step-by-step guide, I will show you how to integrate Better-SQLite with your Electron JS app, using Create-React-App. Do you want to create a Desktop app using React? Here's how you do it. js in the root of your project directory. May 2, 2025 · 🧠 Introduction React has become the go-to library for building modern web applications, but what if you could bring your React web apps to the desktop? Enter Electron, a framework that allows you to create cross-platform desktop applications with web technologies like React, JavaScript, HTML, and CSS. Our beloved code editor VS Code uses Create React App is a popular framework for building React projects offering helpful functionalities as hot reloading or basically non existing configuration or knowledge requirements for webpack or babel. Apr 13, 2021 · How to Migrate an existing React Web App to Desktop App with ElectronThis article is written by Rostyslav Moroziuk What is Electron? Electron is a framework for building desktop apps with web technologies. npx create-electron-app my-new-app # or yarn create electron-app my-new-app # then cd my-new-app npm start For more information on creating a new project from a template, see our CLI documentation. The following is a very minimal example of how to start to add React code: Nov 4, 2024 · Create React App streamlines frontend work minus build complexity A simple main process boots Electron and points to React Carefully structure apps for performance and scalability Implement IPC and testing for long term maintainability Plan for secure deployment and auto-updating I‘m very excited about this stack for scaling desktop apps. Future minor releases may contain breaking changes, but migration steps will be listed in release notes. Feb 17, 2025 · 1. I will guide you step by step to package your application using Electron. Importing your project into Forge This guide will step you through the process of creating a barebones Hello World app in Electron. Sep 27, 2024 · Conclusion Packaging an Electron React app may seem challenging at first, but with Electron Builder, the process is simplified into just a few steps. Feb 4, 2023 · A guide on building an Electron app with React, TypeScript, HMR, and auto-reload support. Apr 1, 2025 · Thanks to frameworks like Electron, you can leverage your React skills to build powerful desktop apps for Windows, macOS, and Linux. With tooling There are a couple tools out there that exist to package and distribute your Electron app. We recommend using Electron Forge. Example of electron app with multiple windows. For example: TSconfig extends, easily expose Electron APIs to renderers in preload scripts, etc. A modern Electron application template with React, Vite, TypeScript, and TailwindCSS. Forge is also built with advanced use cases in mind—you can add any build logic you need with custom plugins, makers or publishers. In this post, we’ll explore how to convert your React web app into an installable Jul 6, 2025 · Electron Forge, React, and TypeScript together offer a powerful stack for building high - quality, maintainable, and user - friendly desktop applications. Start with Electron. By default, Electron Forge's configuration only supports JavaScript and JSON files as inputs. Create a new Electron app with Webpack To get you up and running as fast as possible with the webpack bundler, we provide a template that makes use of the @electron-forge/plugin-webpack module, plus some preset webpack configuration options. Initially I wanted to just use electron-forge to set up my project, npm install react react-dom to install React, and call it a day. For a version of this template with React in Typescript visit this other repo. Aug 19, 2021 · 8 I'm having a problem with electron-forge. Mar 23, 2025 · Why this post exists Around the web, you can find all sorts of articles about creating a Tagged with electron, react, typescript, tailwind4. The preferred method is to install Electron as a development dependency in your app: Generate a DMG with Electron Forge to distribute your Electron app on macOS. Windows (Windows), ZIP (macOS), and deb (Linux) installers when running electron-forge make. Chapters:0:00 - Intro0 Jan 28, 2023 · In this video I go over using the vite-electron boilerplate for creating a basic Electron app with Vite and React! If you want to join my discord for more personalized help, feel free to join The top level property packagerConfig on the configuration object maps directly to the options sent to @electron/packager during the Package step of Electron Forge's build process This configuration allows you customize how @electron/packager bundles your Electron-based application source code into a packaged application ready for distribution. Electron Starter and Boilerplate Templates are resources that Jan 13, 2023 · How to use electron with react||Convert react app to electron app Sakib The Tech 567 subscribers Subscribed Events The app object emits the following events: Event: 'will-finish-launching' Emitted when the application has finished basic startup. 4. Forge comes with a ready-to-use template using Webpack as a bundler. npx create-electron-app my-app. So here is a short guide to some of the most common questions and issues people have. Read the docs Adding Electron to an existing React app Common issues Examples Overview In this section, we have collected a set of guides for common features that you may want to implement in your Electron application. How to create an Electron app with React, TypeScript, and Electron Forge Adding React support to the TypeScript + Webpack template is fairly straightforward and doesn't require a complicated boilerplate to get started. See full list on reactjsexample. The problem I have is with the hot reload. Electron Forge Electron Forge is a batteries-included toolkit for building and publishing Electron apps. This guide walks you through creating an Electron app powered by Next I feel very at ease with these technologies. In this blog post, we will integrate Tailwind CSS using Electron React Boilerplate. Naturally, I tried to setup an Electron app with React and Typescript so that I can keep working with the same framework (for the front at least), but It's been 2 weeks now and I'm struggling a lot to make this work. Feb 23, 2019 · Create your react app using below command — npx create-react-app <your_app_name> --typescript Note: Please use typescript option when using create-react-app to create your application. For . 💡 But remember, we want to use Webpack and Electron-forge actually gives us a boilerplate for that. To do this, you can either use specialized tooling or manual approaches. The easiest way to run these examples is by downloading Electron Fiddle. js. So do not hesitate and start your project by running the following command: Creating a new app To get started with Electron Forge, we first need to initialize a new project with create-electron-app. Jul 6, 2025 · In the world of desktop application development, creating cross - platform applications efficiently is a top priority. 1. but i stuck o Creating a new app To get started with Electron Forge, we first need to initialize a new project with create-electron-app. But let’s be real — this isn’t as easy as it sounds. In this video, We're going to create a desktop app using Electron, React and Tailwindcss. Electron React Boilerplate Aug 17, 2024 · React, Electron and create-react-app is a powerful combination for building cross-platform desktop applications using only JavaScript and web skills. com Template for creating Electron apps using two popular frameworks: Create React App and Electron Forge with no extra dependencies. Let's start by creating a new folder and a new npm project. Contribute to electron-react-boilerplate/electron-react-boilerplate development by creating an account on GitHub. Set up your own modern desktop application easily!--- Jul 21, 2023 · We will cover setting up the development environment, creating a basic React application, integrating it with Electron, and building a distributable package for different platforms. You can check out its documentation directly, or refer to the Packaging and Distribution Jan 12, 2017 · How to build an Electron app using create-react-app. Use electron-builder and pre-configured to pack your app. This gave me the latest and greatest nodejs and electron. This installer will allow you by just double clicking it to automatically install the app on your pc. Integrating Tailwind CSS in Electron can help us to create beautiful and responsive user interfaces for our Electron applications. Discover how to seamlessly integrate React with `Electron Forge` by following this comprehensive guide. Electron is being adopted by big organizations such as Aug 30, 2023 · Here’s what the final version of our app will look like: Creating a web app with Vite and React To start our project, we need to create the web app that we will eventually run within Electron’s embedded browser. This repo helps you to get started with many of the popular web frameworks in Electron, by providing a ready-to-go templates for electron-forge. Thanks to Electron we can create native applications and the hardest things like updating, native menus and notifications or crash reporting are handled by Electron. Detailed instructions on how to configure your application can be found in the Signing macOS Apps guide in the Electron Forge docs. g. Feb 5, 2021 · My additional information explains how to use create-react-app & that method would require 2 builds from CRA being copied into your electron app package. Apr 19, 2024 · The following guide has been tested with React 18, Babel 7, and Webpack 5. In most cases, you should do everything in the ready event handler. 9”, and “react”: “^16. If you already know Javascript, HTML, and CSS you can build an application with electron. Create a new Electron app with webpack and TypeScript. Beginners eager to learn the fundamentals of Electron and React integration. 0. This script is a convenient wrapper around Forge's Init command. That folder should also be served. js chat app with Electron. My electron app works just fine in dev mode, but both electron-forge and electron-builder do not work. You only need to run yarn create electron-app my-app. tsx to simplify the default route. Electron Forge is an all-in-one solution that unifies this fractured ecosystem. js and Electron app to use React Server Components without opening ports or running HTTP server even on localhost. In this tutorial, we configured Electron Forge's GitHub Publisher to upload your app's distributables to GitHub releases. Guides Framework Integration Vue 3 How to create an Electron app with Vue and Electron Forge Vue 3 can be added to Electron Forge's Vite template with a few setup steps. This will add Electron and React as dependencies to your project. Create the app and setup the Webpack config Create the app with the Webpack template. json file in your project directory. - chengh42/electron-app-react-ts Once your app is ready to be released, Electron Forge can handle the rest to make sure it gets into your users' hands. Electron Forge is a tool that simplifies the process of creating, packaging, and distributing Electron applications. The following guide has been tested with Vue 3 and Vite 4. You should now be able to start writing and using React components in your Electron app. Contribute to fm-labs/electron-cra-boilerplate development by creating an account on GitHub. Each guide contains a practical example in a minimal, self-contained example app. Create the initial project with Electron Forge Open a new cmd/terminal window and run the following command: npm init electron-app@latest boilerplate -- --template=webpack-typescript It takes time, but if everything went well, you should see this file structure in your To install prebuilt Electron binaries, use npm. Setting Up the Project First, create a new project using Vite and install Electron: # Create a new Vite project (choose React, Vue, or Svelte) npm create vite@latest my-electron-app --template Oct 20, 2017 · I've rigged create-react-app with the electron-forge app and now I need to somehow specify the build folder produced from the CRA for the packaging. We can build cross-platform applications and run them on all platforms (macOS, Ubuntu, Linux, or Windows) just by using JavaScript. I have created a new project with npx create-electron-app and I have installed and setup react, and it's all working just fine. 0, Vite support for Electron Forge has been marked as experimental in order to reflect its stage in development and to provide maintainers with the ability to release fixes and improvements rapidly. If you're using the create-electron-app script, this module will already be installed for you. To develop a Electron app, you probably will need some UI, test, formatter, style or other kind of library or framework, so let me install and configure some of them to you. Oct 27, 2024 · Comprehensive guide for cross-platform application setup for Windows, IOS, and Linux using Electron-React-TailwindCss setup and distribution ready using electron forge. /dist/win-unpacked/My Electron DotNet App. exe and the installer into . Let’s use Vite with the React template to generate starter code: Oct 3, 2018 · So I decided to build the nodejs project from first principles, using electron-forge e. Use Firebase as the database. Vite, on the other Mar 21, 2019 · Building a production electron/create-react-app application with shared code using electron-builder Electron makes it simple for anyone with a web development background to program a desktop app … This video will cover how to use Electron Forge to create an installer for your electron app. ) into a single interface so you do not have to worry about wiring them all together. The complete build flow for Electron Forge can be broken down into three smaller steps: Each one of these steps is a separate command exposed through Forge's electron-forge command line interface, and is usually mapped to a script in your package. exe (OSX and Linux destinations are similar). The idea being that if a user has multiple monitors they can have a larger 'image viewer' and expanded 'controls' on two separate displays. It unifies Electron's tooling ecosystem into a single extensible interface so that anyone can jump right into making Electron apps. No webpack configuration or “ejecting” necessary. This is what we will build. Event Handling state became a hassle, and I knew I needed to switch to my favorite frontend framework, React. Since distributables cannot always be generated between platforms, we recommend setting up your building and publishing flow in a Continuous Integration pipeline if you do not have access to machines. js allows developers to build modern, cross-platform desktop applications using web technologies. I didn’t need to muck about About An Electron app that uses Create React App and Electron Forge. Vite + TypeScript As of Electron Forge v7. Installation is very simple, just run the following command: Apr 16, 2020 · What is Electron? Electron is a framework for creating native applications. This is by far the quickest way to getting a working webpack setup with Electron. These steps will get you set up with a basic build pipeline that can create Squirrel. An Electron app is basically a static file server. Also note - I tried using Electron Forge and it didn’t work out of the box - requiring a lot of configuration to get it on par with electron-react-boilerplate. Feb 24, 2023 · Electron is a popular framework for building cross-platform desktop applications using web technologies. This should open the default “Hello Electron React!” launch screen. json file. Mar 3, 2025 · So, you wanna build an Electron app and need authentication? Good call. Mar 22, 2022 · Leverage the power of Vite. I am using react-router-dom for routing, and I've used the MemoryRouter as obviously, I don't have URL's running an electron app. I struggled to find concrete resources on integrating React with Vite in an Electron app. The (current) react-router docs say: Generally speaking, you should use a <BrowserRouter> if you have a server that responds to requests and a <HashRouter> if you are using a static file server. Let us edit src/renderer/App. To save others from the same frustrations, I decided to create the Electron-React-Vite Boilerplate. Jul 24, 2021 · The React app wrapped in Electron Some explanations on this: electron core is the real stuff to wrap the web app and run it in a desktop app. Create a new file called main. Makers are Electron Forge's way of taking your packaged application and generating platform-specific distributable formats like DMG, AppX, or Flatpak files (amongst others). The Electron React boilerplate comes pre-installed with react-router, the standard router for React-based applications. But, obviously Feb 15, 2023 · This will create a package. 0 or higher Git If you have a more recent version of npm or yarn, you can use npx, or yarn create. The following is a very minimal example of how to start to add React code: Aug 10, 2023 · Welcome to this comprehensive guide where we will embark on a journey to master the art of setting up Electron and React using Electron Forge 6 and the exciting enhancements that React 18 brings to the table. 2. Moreover there was surprisingly little information available on the web regarding this. 7. Would such a React developers looking to expand their skill set into desktop application development. Features like live reloading, tight integration and extensive React ecosystem support enable rapid development of high quality, distributable apps. In this guide, we'll explore how to create stunning desktop applications using React, Electron, and the sleek Shadcn UI component library. Learn how to create a secure desktop app using React, Electron and Electron Forge. Create Electron App allows you to quickly bootstrap a new Electron app, using Electron Forge. Getting Firebase to play nicely with Electron can be a pain, and Jul 31, 2024 · The electron react boilerplate is a highly efficient tool for creating desktop apps. Create the project using the following command : yarn create electron-app my-new-app --template=typescript-webpack Sep 16, 2022 · How to build an Electron app with Typescript and React quickly. It provides a runtime environment that enables these web technologies to interact with native APIs and capabilities of the operating system. In this article, we will go through a small tutorial on how to integrate Electron into a React app. Install Electron and React by running npm install --save electron react. 🚀 Electron React TypeScript Tailwind Starter This starter repository provides a ready-to-use project template for building cross-platform desktop applications with Electron, React, TypeScript, and Tailwind CSS, utilizing Electron Forge for easy packaging and publishing. 1️⃣ Introduction Before we jump into the technical stuff, let's quickly cover what we aim to achieve Sep 1, 2024 · With Electron, you can package your application and distribute it as a desktop application without rewriting the code. How to create an Electron app with React, TypeScript, and Electron Forge Electron Forge is a tool for packaging and publishing Electron applications. We find a design system for our app in Figma. Oct 29, 2023 · I like to help folks with their Electron and React problems, but I often have to repeat the same things over and over again. My project May 28, 2019 · Whats the best way to upgrade to the latest version of electron? Should I be concerned about any problems caused by upgrading? I’m playing around with “electron”: “^1. As of Electron Forge v7. Getting Started Pre-requisites: Node 16. We start from an empty directory and build up a fully functional development Jun 20, 2020 · Is there any simple way I can setup an app with Electron-Forge and React? I am usin the webpack template but don't know what to do to get jsx to work. You should now be able to start writing and using React components in your Electron app. The following is a very minimal example of how to start to add React code: How to create an Electron app with React, TypeScript, and Electron Forge Adding React support to the TypeScript + Webpack template is fairly straightforward and doesn't require a complicated boilerplate to get started. org/ run : pnpm create @quick-start/electron and follow the instructions and pick react as framework to setup your electron app. It is a framework for creating cross-platform desktop applications using JavaScript, CSS and HTML. We will be building a simple file explorer that allows users to view So I have a project I am currently working on where I have a need to click a button and have one of the components render in a new Electron window. 5. See how to use it to build a simple Electron app with a React frontend. It unifies Electron's build tooling ecosystem into a single extensible interface so that anyone can jump right into making Electron apps. Electron Forge simplifies the process of packaging, distributing, and automating the development of Electron applications. Application Packaging To distribute your app with Electron, you need to package and rebrand it. May 21, 2024 · Electron-forge vs electron-vite When starting to build and explore electron, I initialized the project with electron-vite because I was familiar with vite and react recently, And it did a great job when I didn't spend much time starting the project, integrating tailwindcss and shadcn/ui into the project. Forge handles many complex configuration tasks so developers can focus on coding. May 10, 2024 · From here, all steps can be applied regardless of the operating system, on Windows in cmd, on Mac, and Linux in terminal. On the other hand, Electron Forge framework achieves similar advantages for Electron. On Windows it builds the app into . Creating the app Initializing a new project with Electron-forge is quite straight forward. Watch Video Preview Nov 1, 2023 · Electron Forge is a complete tool for building modern Electron applications. If you already have an Electron app and want to try out Electron Forge, you can either use Forge's import script or manually configure Forge yourself. config. Jun 14, 2020 · Getting started with the webpack-typescript template electron-forge provides us a convenient webpack-typescript that generates a boilerplate configured with typescript and webpack support (who would have guessed ?). React How to create an Electron app with React and Electron Forge Adding React support to the Webpack template doesn't require a complicated boilerplate to get started. Today's video is a practical guide for building desktop apps with React and Electron that can run on Windows, Mac, and Linux. To integrate React into an Electron Forge project, follow these steps: Create Your Electron App with Electron Forge:Scaffold Create React. 0:00 Setting the project with some basic set up 3: Generate platform specific distributables for Electron apps using Electron Forge. MemoryRouter can also work, so long as all routing originates from within the React part of the app. Electron Forge is an all-in-one tool that handles the packaging and distribution of Electron apps. This tutorial starts by guiding you through the process of piecing together a minimal Electron application from scratch, then teaches you how to package and distribute it to users using Electron Forge. A step-by-step walkthrough showing how to set up a modern desktop application using Electron Forge, React, and Vite. I have the react stuff in renderer. Nov 4, 2022 · I have been reading documentation and trying so many different things for days now. electron-forge is the lib to package, release the app Apr 21, 2021 · Creating a cross-platform desktop app is easy thanks to Electron. Calculator 4 in 1 Calculator, Todo List, Clock, Weather Desktop App with Electron and React 4 in 1 Calculator, Todo List, Clock, Weather Desktop App with Electron and React 27 November 2023 Apps A Detailed system information App using React and electron for unified workflow A Detailed system information App using React and electron for unified May 26, 2020 · How to build a desktop app using React, Electron and electron-react-boilerplate. Contribute to NxRoot/electron-multiple-windows development by creating an account on GitHub. I would use the first simple way & skip CRA if you are starting fresh. 1”, About A modern, feature-rich Electron kit for building cross-platform desktop applications 🚀 electron react desktop-app template boilerplate chromium electron-forge starter-kit vitejs Readme MIT license Contributing Create-react-app, Electron, Electron Forge. It's open-source and cross-platform. If you prefer to get a project started with a single-command boilerplate, we recommend you start with Electron Forge's create-electron-app command. Electron app with React and Typescript set up using Electron Forge. Forge also supports configuration files in other languages that transpile down to JavaScript as long as a transpiler is installed locally in your project's devDependencies. In this tutorial, learn how to build a cross-platform desktop application using React, A Foundation for Scalable Cross-Platform Apps. About Monorep setup for desktop (electron-forge + webpack + react + typescript) and web (create-react-app + typescript) Jul 29, 2021 · Hello all Js Scripting Family, Currently I'm working on Electron + React js project at base level i had created project successfully but now i need to move forward to routing process. The challenge didn't end there. Oct 17, 2023 · Electron is a framework that allows developers to build cross-platform desktop applications using web technologies such as HTML, CSS, and JavaScript. Installation To use the Forge CLI, install the @electron-forge/cli module into your project as a devDependency. My Journey through Webpack Hell As someone who has built Electron apps before, I thought I knew how to use NodeJS. Create React App is a popular framework for building React projects offering helpful functionalities as hot reloading or basically non existing configuration or knowledge requirements for webpack or babel. js Aug 28, 2022 · 3 If you are getting started with a new electron project this will be a great help https://electron-vite. Each maker has to be configured in the makers section of your Forge configuration. In this tutorial, I'll show you how to start an electron project from scratch using webpack, react, and Typescript. Learn how to develop and use React electron forge in your applications. In this video, we are going to look at how we set up an electron app to build a basic application and move ahead with a desktop app development. Creating a new app To get started with Electron Forge, we first need to initialize a new project with create-electron-app. This project provides a solid foundation for developing cross-platform desktop applications. Dec 7, 2023 · The Electron-Forge-React boilerplate offers a lightweight starter kit for crafting apps using React, Electron, and Electron Forge. Forge is a collection of the official Electron tools, using @electron/packager, @electron/osx-sign, and @electron/notarize under the hood. Use electron-vite, a fast build tooling integrated with Vite 3, support for HMR, hot reloading, debugging and source code protection. With Forge, you can create a build pipeline that brings your app from development to distribution with minimal configuration. js to create a secure Electron application with TypeScript using any front-end framework (React, Vue 3, Svelte, ) Oct 31, 2023 · Is there a way to add it now with the whole webpack, babel, and all the other needed libraries in the same directory or file that my app is already in? I have seen how to start a react project and then add electron, how to use elctron forge to make electron start with react, but saw nothing of how to add to pre existing project. May 4, 2025 · In this guide, we’ll combine these three powerful tools — React, Tailwind, and Electron Forge — to create a sleek, modern desktop app with minimal setup. Docs and Usage For Electron Forge documentation and usage This example builds a stand-alone Electron + Create-React-App + dotnet application and installer. /dist/My Electron DotNet App Setup 1. Aug 25, 2023 · electron-vite brings Vite capabilities to Electron app development. Combining Next. May 21, 2024 · Installing react typescript and tailwindcss into the electron-forge project is not difficult but will take quite a while if you do not have experience (not as easy as electron-vite), In this article I will help you save a little time and get started an electron-forge project that works seamlessly with react typescript and tailwindcss. These configuration files follow the same format as forge. Second app, ChatGPT + Electron with Typescript May 4, 2024 · In this guide, we’ll cover the straightforward steps to convert your React app into an Electron desktop app, enhancing both its capabilities and accessibility. The following guide has been tested with React 17, Babel 7, and Webpack 5. This file will be the entry point for your Electron app. Create a new Electron app with Vite. @electron/packager, @electron/osx-sign, electron-winstaller, etc. hndle qdmduhp otoh kbjbsbd dfdya edwovn gjsron ybnd byycl exios