Contents

MōBrowser Project

This section provides a comprehensive overview of the MōBrowser project, step-by-step instructions for creating it, and an exploration of its structure and configuration file.

Overview

To create a cross-platform desktop application with MōBrowser, you need to create a MōBrowser project. A MōBrowser project is a directory that contains all the files and dependencies required to build and run a MōBrowser application. To create a project you can use the official MōBrowser scaffolding tool.

Creating a Project

Make sure your current working directory is the one where you intend to create a project. Run the following command in your command line:

npm create mobrowser-app@latest

This command will install and execute create-mobrowser-app, the official MōBrowser project scaffolding tool. You will be presented with prompts for your application name, the preferred frontend framework and language.

The scaffolding tool allows generating a project with the following frontend frameworks:

The following frontend languages are supported:

  • JavaScript
  • TypeScript

The generated projects includes the package.json file that contains the npm project dependencies and scripts. The package.json file is used by npm to install the project dependencies and run the project scripts.

Installing dependencies

Once the project is created, enter the project directory and install the project dependencies:

npm install

Updating dependencies

The MōBrowser tools and libraries are listed as project dependencies in the package.json file.

{
  "name": "MyApp",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview",
    "mobrowser": "mobrowser"
  },
  "devDependencies": {
    "vite": "^4.3.2"
  },
  "dependencies": {
    "@mobrowser-apps/mobrowser": "^1.0.0-preview"
  }
}

To update MōBrowser to the required version, change the version and run:

npm install

Project structure

The project directory structure may be different depending on the frontend framework and language you chose.

Here’s the project directory structure of the project created with the Vanilla frontend framework and JavaScript language:

src/
|-- assets/
|   `-- logo.svg
|-- main.js
`-- style.css
src-cpp/
|-- assets/
|   |-- app-Info.plist
|   |-- app.icns
|   |-- app.ico 
|   `-- app128.png
|-- src/
|   `-- main.cc
CMakeLists.txt
index.html
mobrowser.conf.json
package.json

The project directory consists of files that can be divided into three categories:

  1. Configuration files.
  2. Application frontend files.
  3. Application backend files.

The application frontend is responsible for creating the application user interface that will be displayed in the application window and communicating with the application C++ backend.

The application backend is responsible for creating the application window, displaying native system dialogs, managing the application life cycle, making calls to the operating system and third party libraries, and communicating with the application JavaScript frontend.

On this page
Top