The webpack.config.js file contains the configuration information for project building. You can locate it in the following ways.
Normally, webpack.config.js is in the root directory of the project.
If you create your project with create-react-app, the configuration file will be node_modules/react-scripts/config/webpack.config.js.
If you create your project with vue-cli, webpack configuration will be stored in the configureWebpack property of vue.config.js.
If your project is customized, please locate webpack configuration according to your project.
1. First, add the following code before module.exports to make webpack.config.js accept the --target_platform command line parameter so that your project can be built correctly for its target platform.
In the result returned by os.platform(), darwin means macOS, and win32 means Windows (64-bit or 32-bit).
2. Add the following configuration to the rules option. The targetPlatform variable ensures that rewritePath changes automatically according to the target platform.
If you create an EXE file for Windows, native-ext-loader will load the TRTC SDK in [application root directory]/resources.
If you create a DMG file for macOS, native-ext-loader will load the TRTC SDK in [application directory]/Contents/Frameworsk/../Resources.
For local building, native-ext-loader will load the TRTC SDK in ./node_modules/trtc-electron-sdk/build/Release. For details, see TRTCSimpleDemo configuration.
You also need to add the --target_platform parameter to the build script of package.json, which brings us to the next step.
Step 6. Modify package.json
The package.json file is in the root directory of the project and contains the necessary build information. Normally, to successfully build your project, you need to modify the path in package.json as follows.
1. Modify main.
// In most cases, the name of the `main` file can be customized. For example, in TRTCSimpleDemo, `main` can be configured as follows:
"main":"main.electron.js",
// However, for projects created with the `create-react-app` scaffolding tool, `main` must be configured as follows:
"main":"public/electron.js",
2. Copy the following build configuration to your package.json file for electron-builder to read.
3. Add command scripts for building and packaging under scripts.
The following command scripts are for projects created with create-react-app and vue-cli. They provide samples for projects created with other tools too.
// Use this configuration for projects created with `create-react-app`.
"pack:mac":"npm run build:mac && npm run compile:mac",
"pack:win64":"npm run build:win && npm run compile:win64"
}
Parameter
Description
main
The entry point file of Electron, which can be customized in most cases. However, if your project is created with create-react-app, the entry point file must be public/electron.js.
build.win.extraFiles
When building for Windows, electron-builder will copy all files in the directory specified by from to bin/win-unpacked/resources (all in lowercase).
build.mac.extraFiles
When packaging for macOS, electron-builder will copy the trtc_electron_sdk.node file specified by from to bin/mac/your-app-name.app/Contents/Resources (capitalize the first letter of each word)
build.directories.output
The output path. In the sample above, the output file is saved to bin. You can modify it as needed.
build.scripts.build:mac
The script for building for macOS.
build.scripts.build:win
The script for building for Windows.
build.scripts.compile:mac
Creates a DMG file for macOS
build.scripts.compile:win64
Creates an EXE file for Windows
build.scripts.pack:mac
Calls build:mac to build the project and then `compile:mac` to generate a DMG file
build.scripts.pack:win64
Calls build:win to build the project and then `compile:win64` to generate an EXE file
Step 7. Run the build command
Build the project into a DMG file for macOS:
$ cd[Project directory]
$ npm run pack:mac
The build tool will generate an installation file named bin/your-app-name-0.1.0.dmg. Publish this file.
Build the project into an EXE file for Windows:
$ cd[Project directory]
$ npm run pack:win64
The build tool will generate an installation file named bin/your-app-name Setup 0.1.0.exe. Publish this file.
notice
Currently, the TRTC Electron SDK does not support cross-platform building. This means you cannot build your project into an EXE file on macOS or a DMG file on Windows. We are working on this and may add support for it in the future.
FAQs
What firewall restrictions does TRTC face?
The SDK uses the UDP protocol for audio/video transmission and therefore cannot be used in office networks that block UDP. If you encounter such a problem, see Firewall Restrictions.
What should I do if an error occurs when I install or build the TRTC Electron SDK?
If an error occurs when you integrate the TRTC Electron SDK, for example, if installation times out or the trtc_electron_sdk.node file fails to load after building, please contact us.
