Template & Download

Download and explore the official 5M Phone Custom App Template (5M_CustomApp).

📥 Download Official Starter Repository

The template comes pre-packaged with Vite, React 18, TypeScript, Tailwind CSS, and the 5M Phone Bridge helper library.

⬇️ Download Template (.ZIP) ⭐ View on GitHub


Requirements

  • FiveM Server: FiveM server running OneSync Infinity and 5M_Phone.
  • Node.js: Node.js version 18.0.0 or higher.
  • Package Manager: npm, pnpm, or yarn.

Template Project Structure

Plain text
5M_CustomApp/
├── fxmanifest.lua           # FiveM resource manifest
├── config.lua               # Custom app metadata, ID, branding & screenshots
├── client/
│   └── main.lua             # App registration lifecycle & NUI callbacks
└── ui/                      # Web UI source code
    ├── package.json         # React 18, Vite, Lucide icons, Tailwind
    ├── vite.config.ts       # Vite configuration with relative asset paths
    ├── index.html           # HTML container
    ├── src/
    │   ├── App.tsx          # Main React application component
    │   ├── main.tsx         # React root mounting
    │   ├── index.css        # Tailwind styles & theme variables
    │   └── lib/
    │       └── phoneBridge.ts # 5M Phone Bridge communication helpers
    └── dist/                # Compiled static build (HTML, JS, CSS, icons)
        ├── index.html
        ├── icon.svg
        ├── assets/
        └── store/
            ├── shot1.svg
            └── shot2.svg

Configuration Breakdown (config.lua)

The template's config.lua defines how your app is displayed and presented across the phone:

Lua
Config = {}

--- Unique identifier on the phone home screen (letters, numbers, -, _)
Config.AppId = 'finals-demo'

--- Display name shown below icon on home screen and title bar
Config.Name = 'Finals Demo'

--- Description shown on the App Store product details page
Config.Description = 'Example developer app for 5M Phone.'

--- Developer / studio brand name
Config.Developer = 'Your Studio'

--- Installation mode:
--- true  = automatically pre-installed on every player's home screen
--- false = listed in the in-game App Store for players to download
Config.DefaultApp = false

--- Relative path to built HTML index (or full https:// URL)
Config.UiPath = 'ui/dist/index.html'

--- App icon (relative to this resource or remote URL)
Config.IconPath = 'ui/dist/icon.svg'

--- Brand accent color (HEX string used for badges and splash highlights)
Config.Color = '#6366f1'

--- Screenshots displayed in the App Store detail page
Config.Screenshots = {
    'ui/dist/store/shot1.svg',
    'ui/dist/store/shot2.svg',
}

Resource Manifest (fxmanifest.lua)

Lua
fx_version 'cerulean'
game 'gta5'
lua54 'yes'

name '5M_CustomApp'
author 'Finals / 5M Phone'
version '1.0.0'
description 'Custom Developer App for 5M Phone'

shared_script 'config.lua'
client_script 'client/main.lua'

files {
    'ui/dist/**/*',
}

[!NOTE] Do NOT set ui_page in fxmanifest.lua for production builds. 5M_Phone embeds your app directly into an iframe using the Config.UiPath registered via RegisterApp.