Now we need to edit package.json to run the app with Electron. Please, visit this link to find more BroswerWindow properties. In this file, we create a window on a full working area: Create a folder electron on the root level of the project and add a file main.ts there. Once we are done with installing dependencies, we can go to coding. We'll use the packages concurrently and wait-on to run the application in development mode, locally. Let's go to a folder with a project in your terminal and run the next command: yarn add -dev electron concurrently wait-on 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.
Build Cross Platform Desktop Apps using Electron.NET (Step by Step Tutorial) Why do we integrate Electron into our existing React app?
0 kommentar(er)
