#Makepad Project Packaging Guide

Requirements for packaging a Makepad project depend on the target platform. This guide provides an overview of how to package your Makepad application for different platforms, including desktop and mobile.

#Desktop Packaging

Use the cargo-packager tool to package your Makepad application.

Before you start packaging your Makepad application, make sure you already install the cargo-packager tool:

1cargo install cargo-packager --locked

This tool helps you create packages for your Makepad application, including generating the necessary files and directories for different platforms.

Then configure your Cargo.toml file to include the necessary metadata for packaging, also you can create a packager.toml file to specify additional packaging options.

This Guide use Cargo.toml as an example, but you can also use packager.toml to specify packaging options.

1[package.metadata.packager]
2product_name = "YourAppName"
3identifier = "com.yourcompany.yourapp"
4authors = ["Your Name or Team name"]
5description = "A brief description of your Makepad application"
6### Note: there is an 80-character max for each line of the `long_description`.
7long_description = "..."
8icons = ["./assets/icon.png"]
9out_dir = "./dist"
10# ... other packaging options, see the documentation for cargo-packager for more details.
11
12before-packaging-command = """
13robius-packaging-commands before-packaging \
14    --force-makepad \
15    --binary-name <main-binary-name> \
16    --path-to-binary ./target/release/<main-binary-name>
17"""
18
19# we need to specify the resources that will be included in the package, the packager will copy them to the output directory.
20# Note: if you are using Makepad v1.0 or above, you need to specify more resource files:
21resources = [
22  { src = "./dist/resources/makepad_widgets", target = "makepad_widgets" },
23  { src = "./dist/resources/makepad_fonts_chinese_bold", target = "makepad_fonts_chinese_bold" },
24  { src = "./dist/resources/makepad_fonts_chinese_bold_2", target = "makepad_fonts_chinese_bold_2" },
25  { src = "./dist/resources/makepad_fonts_chinese_regular", target = "makepad_fonts_chinese_regular" },
26  { src = "./dist/resources/makepad_fonts_chinese_regular_2", target = "makepad_fonts_chinese_regular_2" },
27  { src = "./dist/resources/makepad_fonts_emoji", target = "makepad_fonts_emoji" },
28  { src = "./dist/resources/robrix", target = "robrix" },
29]
30
31before-each-package-command = """
32robius-packaging-commands before-each-package \
33    --force-makepad \
34    --binary-name <main-binary-name> \
35    --path-to-binary ./target/release/<main-binary-name> \
36"""

And we use the small robius-packaging-commands CLI tool to run the packaging commands before packaging your Makepad application.

You can install the robius-packaging-commands tool using the following command:

1cargo install --locked --git https://github.com/project-robius/robius-packaging-commands.git

If you don't want to use the robius-packaging-commands tool, you can also run the packaging commands manually, but it is recommended to use the tool for convenience. and manually copy the resources to the output directory.

Such as:

1[package.metadata.packager]
2
3before-packaging-command = """
4cargo run --manifest-path packaging/before-packaging-command/Cargo.toml before-packaging
5"""
6
7before-each-package-command = """
8cargo run --manifest-path packaging/before-packaging-command/Cargo.toml before-each-package
9"""

#before-packaging-command

The below command primarily uses cargo-metadata to determine the path of the makepad_widgets crate on the host build system,and copies the makepad-widgets/resources directory to the ./dist/resources/makepad_widgets directory.

We also copy the your app project's resources/ directory to the ./dist/resources/<main-binary-name> directory.

This is necessary because the cargo packager command only supports defining resources at a known path (see the resources = [...] block below),so we need to copy the resources to a known fixed (static) path before packaging, such that cargo-packager can locate them and include them in the final package.

#before-each-package-command

We then build the entire your app project and set the MAKEPAD/MAKEPAD_PACKAGE_DIR env vars to the proper value.

For macOS app bundles, this should be set to . because we set the apple_bundle cfg option for Makepad, which causes Makepad to look for resources in the Contents/Resources/ directory, which is where the resources are located for an Apple app bundle (.app and .dmg).

For Debian .deb packages, this should be set to /usr/lib/<main-binary-name>, which is currently /usr/lib/<main-binary-name>. This is the directory in which dpkg copies app resource files to when installing the .deb package.

On Linux, we also strip the binaries of unneeded content, as required for Debian packages.

For Debian and Pacman (still a to-do!) packages, we also auto-generate the list of dependencies required by your application.

See more about cargo-packager: https://github.com/crabnebula-dev/cargo-packager

#Linux (Debian/Ubuntu)

1. install necessary dependencies for packaging:

1sudo apt-get update
2sudo apt-get install libssl-dev libsqlite3-dev pkg-config binfmt-support libxcursor-dev libx11-dev libasound2-dev libpulse-dev

2. run the packaging command:

1cargo packager --release

#Windows(Windows-2022)

if you already configure your Cargo.toml file as described above, you can run the packaging command:

1cargo packager --release --formats nsis

#MacOS

if you already configure your Cargo.toml file as described above, you can run the packaging command:

1cargo packager --release

see more about robius-packaging-commands: [https://github.com/project-robius/robius-packaging-commands/blob/main/README.md]

#Mobile Packaging

Luckly, Makepad provides a convenient way to package your app for mobile platforms using cargo-makepad.

1cargo install --force --git https://github.com/makepad/makepad.git --branch dev cargo-makepad

#Android

Android can easyly be packaged using cargo-makepad:

1cargo makepad android install-toolchain
2carog makepad android build -p your_profile_name -release # it will build the apk, then you can install it on your device or emulator.

#iOS

1cargo makepad apple ios install-toolchain

use cargo-makepad to build the iOS app:

1cargo makepad apple ios --org=organisation_name --app=product_name run-sim/run-device -p your_profile_name --release
2
3in order for makepad to be able to install an ios application on a real device a provisioning profile is needed. 
4To create one make an empty application in xcode and give it an organisation
5name and product name you copy exactly and without spaces/odd characters into --org=x and --app=x
6                         --stable use stable compiler
7 Also run it on the device it at least once, so the profile is created
8                         --org=organisation_name
9                         --app=product_name
10 If you have multiple signing identities or devices or provision profiles you might have to set it explicitly
11                         --profile=
12                         --cert=
13                         --device=

Because cargo-makepad does not have a separate build command, you can directly use the run-sim or run-device command to build the application, and then package it.

1# Build and run the application on the iOS simulator using this command
2cargo makepad apple ios --org=org.robius --app=robrix run-sim -p robrix --release
3
4# cargo-makepad tool will compile and package the iOS application, generating the corresponding application package in the ./target/makepad-apple-app/aarch64-apple-ios-sim/release/robrix.app directory.
5# By using the zip command to compress the .app directory into a .zip file, you can distribute it to others or upload it to TestFlight or the App Store.
6
7# By this command to build and run the application on an iOS device, where --device (device_identifier) can set the virtual one.
8# Note: You need to replace $YOUR_PROFILE_PATH, $YOUR_CERT_FINGERPRINT, and IPhone with your actual provisioning profile path, certificate fingerprint, and device name.
9cargo makepad apple ios \
10  --org=org.robius \
11  --app=robrix \
12  --profile=$YOUR_PROFILE_PATH \
13  --cert=$YOUR_CERT_FINGERPRINT \
14  --device=IPhone \
15  run-device -p robrix --release
16
17# Seem as above, you can use the zip command to compress the .app directory into a .zip file for distribution or uploading to TestFlight or the App Store.
18cd ./target/makepad-apple-app/aarch64-apple-ios/release
19mkdir Payload
20cp -r robrix.app Payload/
21zip -r robrix-ios.ipa Payload

#Wasm Packaging

Makepad also supports compiling applications to WebAssembly (Wasm), allowing your app to run in the browser.

To package your application for Wasm, you can use the following commands:

1cargo makepad wasm install-toolchain # install Wasm toolchain
2cargo makepad wasm run -p your_profile_name --release

This will build your Makepad application as a Wasm module and run it in the browser, while also generating the corresponding HTML and JavaScript files in the /target/makepad-wasm-app/release/your_profile_name/ directory.

It includes: makepad static resources and your application's resource files, as well as the related js_bridge files and the wasm module.