electron-react-ts-vscode-template

Clone and run for a quick way to see Electron in action.

This is a React-based Electron application based on the Quick Start Guide within the Electron documentation and the Create React App repository.

Use this app along with the Electron API Demos app for API code examples and the React Docs page to help you get started.

A React-based Electron application needs just these files:

• ./package.json - Points to the app's main file and lists its details and dependencies.
• ./src/electron.ts - Starts the app and creates a browser window to render HTML. This is the app's main process.
• ./public/index.html - A web page to render. This is the app's renderer process.
• ./src/index.tsx - This is the javascript file corresponding to ./public/index.html.
• ./src/components/app/App.tsx - This is the file for App Component. App Component is the main component in React which acts as a container for all other components.

You can learn more about each of these components within the Electron Quick Start Guide and CRA Folder Structure.

Getting Started

1. Make sure you're running the latest version of VS Code.
2. Also make sure the latest version of the Debugger for Chrome extension is installed in VS Code.
   • Debugger for Chrome extension has been deprecated as Visual Studio Code now has a bundled JavaScript Debugger that covers the same functionality.
3. To clone and run this repository you'll need Git and Node.js (which comes with npm) installed on your computer. From your command line:

   # Clone this repository
   git clone https://github.com/phoihos/electron-react-ts-vscode-template.git
   # Go into the repository directory
   cd electron-react-ts-vscode-template
   # Install dependencies
   npm install
   # Run VS Code on the repository directory
   code .

Note: If you're using Linux Bash for Windows, see this guide or use node from the command prompt.

Debugging

1. Go to the Run view and select 'Run Electron App' or press F5 key to start debugging.
2. Set breakpoints in any of the files.

Note: The breakpoint in the renderer process will not be hit immediately while Chrome Debugger attaching to Electron App. If you know about solving this issue, please open an issue on Github.

License

CC0 1.0 (Public Domain)