We need to install dependencies to run the app with Electron. Integrate Electron and run a desktop application So our project structure should look like this: Now, we are done with creating a basic React app. We are going to add two pages: Home and About. Once our packages are installed, we can implement routing. Yarn add -dev can remove created files from src folder and add new ones. Let's add a router to the app: yarn add react-router-dom Also, it's strongly recommended to use yarn instead of npm to avoid some unexpected issues with building and running the Electron app.
Otherwise, our dependencies will be included in the production build and that will increase the bundle size. Please notice that we need to install dev dependencies in the devDependencies section of our package.json file. Run the below command to create a React app: npx create-react-app -template typescript You can skip the steps to create our basic app and fetch it from here. Let's create a basic and very common React application with react-router-dom and TypeScript. In this article, we will go through a small tutorial on how to integrate Electron into a React app. Also, we could proceed using our existing shortcuts listeners and basically, still consider our application to be a web application.
We still could use HTML5 Notifications API to send notifications from the Renderer process. We wanted to get a desktop application without any changes to our existing codebase for the web application. Why do we integrate Electron into our existing React app? Thanks to Electron, you can focus on your application instead of the technologies that you need to use. Electron is being adopted by big organizations such as Microsoft, Facebook, Twitch, so we can be sure that this framework can cover all our needs in desktop application development. We can build cross-platform applications and run them on all platforms (macOS, Ubuntu, Linux, or Windows) just by using JavaScript. This article is written by Rostyslav Moroziuk What is Electron?Įlectron is a framework for building desktop apps with web technologies.
0 kommentar(er)
