# Build the cross-platform application

## In this learning path

- [Introduction](https://learn.arm.com/learning-paths/laptops-and-desktops/electron/)
- [Create the application using the electron framework](https://learn.arm.com/learning-paths/laptops-and-desktops/electron/how-to-1/)
- [Build the cross-platform application](https://learn.arm.com/learning-paths/laptops-and-desktops/electron/how-to-2/)
- [Next Steps](https://learn.arm.com/learning-paths/laptops-and-desktops/electron/_next-steps/)

## Objective
In this section you will build your application to run on both Arm64 and x64.

## Electron Builder
Start by installing the Electron Builder:

```
npm install electron-builder --save-dev
```

The output will look similar to:

```
__output__ added 191 packages, removed 12 packages, changed 18 packages, and audited 265 packages in 23s
__output__ 
__output__ 28 packages are looking for funding
__output__   run `npm fund` for details
__output__ 
__output__ 4 vulnerabilities (3 moderate, 1 high)
__output__ 
__output__ To address all issues (including breaking changes), run:
__output__   npm audit fix --force
__output__ 
__output__ Run `npm audit` for details.
```

Modify the `package.json` file in your project folder with the content shown below:

```json
{
  "name": "electron-sample-app",
  "version": "1.0.0",
  "description": "Electron application to retrieve data from API and display it in a table.",
  "main": "main.js",
  "scripts": {
    "start": "electron .",
    "build": "electron-builder"
  },
  "author": "Learning Path",
  "license": "MIT",
  "dependencies": {
    "axios": "^0.21.4",
    "jquery": "^3.6.0"
  },
  "devDependencies": {
    "electron-builder": "^22.12.0",
    "electron": "^16.0.5"
  },
  "build": {
    "appId": "com.example.electron-sample-app",
    "productName": "Electron Sample Application",
    "directories": {
      "output": "dist"
    },
    "win": {
      "target": [
        "nsis",
        "nsis:x64"
      ]
    }
  }
}
```

## Build the application
Finally, you can build the application using the following command:

```
npm run build
```

The above command generates the following output:

```
__output__ > electron-sample-app@1.0.0 build
__output__ > electron-builder
__output__ 
__output__   • electron-builder  version=24.9.1 os=10.0.22631
__output__   • loaded configuration  file=package.json ("build" field)
__output__   • writing effective config  file=dist\builder-effective-config.yaml
__output__   • packaging       platform=win32 arch=arm64 electron=16.2.8 appOutDir=dist\win-arm64-unpacked
__output__   • default Electron icon is used  reason=application icon is not set
__output__   • packaging       platform=win32 arch=x64 electron=16.2.8 appOutDir=dist\win-unpacked
__output__   • downloading     url=https://github.com/electron/electron/releases/download/v16.2.8/electron-v16.2.8-win32-x64.zip size=85 MB parts=8
__output__   • downloaded      url=https://github.com/electron/electron/releases/download/v16.2.8/electron-v16.2.8-win32-x64.zip duration=3.87s
__output__   • building        target=nsis file=dist\Electron Sample Application Setup 1.0.0.exe archs=arm64, x64 oneClick=true perMachine=false
__output__   • output file is locked for writing (maybe by virus scanner) => waiting for unlock...
__output__   • building block map  blockMapFile=dist\Electron Sample Application Setup 1.0.0.exe.blockmap
```

The Electron Builder will generate distributables of the application for Windows using two architectures x64 and Arm64. You will find them in the following folders:

- x64: `<project>\dist\win-unpacked`
- Arm64: `<project>\dist\win-arm64-unpacked`

Each folder contains the executable `Electron Sample Application.exe`. Launch this executable from both folders. Then, open the Task Manager to check that both executables run as either x64 or Arm64 processes.

## Summary
In this learning path, you created the Electron application designed to retrieve and display data from a mock API in a user-friendly table format. Developed using web technologies such as HTML, CSS, and JavaScript, this application leverages the Electron framework to seamlessly run on Windows. With added support for both x64 and Arm64 architectures on Windows, this application demonstrates the flexibility and adaptability of Electron in building robust desktop solutions for a wide range of use cases.