Project Overview

This section describes how to create a MōBrowser project from scratch, explains the project structure, and the configuration file.

To create a cross-platform desktop application, you need to create a MōBrowser project. It contains all the files and dependencies required to build and run your desktop application.

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 project scaffolding tool. You will be presented with prompts for your application name, the preferred frontend framework, UI component library, and language.

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

React
Vue
Vanilla (HTML, CSS, and JavaScript)
None (website as a frontend)

The following UI component libraries are supported:

The following frontend languages are supported:

JavaScript
TypeScript

You will be also asked if you want to add a native C++ module to your project to access platform-specific APIs.

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 dependencies:

npm install

Project structure

The project directory structure may be different depending on the options you chose during project generation.

If you develop a desktop application that represents a desktop client for a web application, then you will need to select the None frontend framework. You will get the following project structure:

.vscode/
assets/
resources/
src/
├── main/
mobrowser.conf.json
package.json
tsconfig.json
tsconfig.node.json
vite.config.ts

If you select a frontend framework, then you will see the additional src/renderer directory that contains the frontend code for the selected framework:

.vscode/
assets/
resources/
src/
├── main/
├── renderer/
mobrowser.conf.json
package.json
tsconfig.json
tsconfig.node.json
vite.config.ts

If you decide to add a native C++ module, then you will see additional files and folders in the project structure:

.vscode/
assets/
resources/
src/
├── main/
├── native/
├── renderer/
CMakeLists.txt
mobrowser.conf.json
package.json
tsconfig.json
tsconfig.node.json
vite.config.ts

Here is the description of the files and folders in the project structure:

File/Folder	Description
`.vscode/`	Visual Studio Code settings and workspace configuration.
`assets/`	Application assets such as icons, images, and other resources.
`resources/`	Application resources that shouldn’t be protected.
`src/main/`	Main process source code.
`src/renderer/`	Renderer process source code.
`src/native/`	Native C++ module source code.
`CMakeLists.txt`	CMake build configuration.
`mobrowser.conf.json`	Application configuration file.
`package.json`	npm package configuration file.
`tsconfig.json`	TypeScript configuration file.
`tsconfig.node.json`	TypeScript configuration file for Node.js.
`vite.config.ts`	Vite configuration file.

mobrowser.conf.json

The mobrowser.conf.json file is the main configuration file for the MōBrowser application. It contains the application name, version, author, copyright, description, and other properties.