Navigation

Quick Start with Electron

On this page

  • Overview
  • Setup
  • Set up Your Application Files
  • Create the Main Script File
  • Set up a package.json
  • Install Your Project Dependencies
  • Create a Script to Run Your Application
  • Run Your Application
  • Open a Realm

This page contains information to integrate MongoDB Realm into your Electron application quickly. To learn how to set up an Electron application with Realm without using any additional frameworks, see the Electron set up instructions. If you have already created an application using Create React App or are interested in integrating a React App with Realm using Electron, check out the Electron with React set up instructions.

Before you begin, ensure you have:

Note
Version Requirement

MongoDB Realm works with any of the officially supported Electron versions. We recommend using the latest stable release. To see the officially supported Electron versions, check out the Electron Releases document.

1

To begin developing your application, create an application directory:

mkdir myElectronApplication

Create an index.html, main.js, and renderer.js file in the root directory of your application.

touch index.html main.js renderer.js

The main.js file is the entry point into your application and executes on the main process. It is responsible for loading your index.html file into Electron's BrowserWindow API. Any script files that you require in this HTML file will execute on a renderer process. Add the following to your index.html file:

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<title>Hello World!</title>
</head>
<body>
<h1>Hello World!</h1>
<script src="renderer.js"></script>
</body>
</html>

Add the following code to the renderer.js file:

const Realm = require("realm");
Note

Each Electron application can only have one main process. The main process creates web pages. Each web page runs in its own process, known as a renderer process. To learn more about this, read the official Electron Application Architecture document.

2

The main.js file is the entry point of your application. Create an Electron BrowserWindow in it and load your index.html file to display your HTML to users:

const { app, BrowserWindow } = require('electron')
function createWindow () {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
})
// to prevent the Sync Connection from ending prematurely, start reading from stdin so we don't exit
process.stdin.resume();
win.loadFile('index.html')
}
app.whenReady().then(createWindow)
3

Initialize a package.json to begin installing packages and using them in your project. Run the following command in your terminal:

npm init -y

Your application file structure should resemble the following:

.
|-- package.json
|-- package-lock.lock
|-- index.html
|-- main.js // runs on the main process
|-- renderer.js // runs on a renderer process

The file main.js executes on the main process. The file renderer.js and any other files required by it, or by index.html, executes on a renderer process.

4

Install the necessary dependencies to begin developing your Electron application using Realm.

npm install electron --save-dev
npm install realm --save
5

Add a script to your package.json file in order to start your application with the npm start command.

"scripts": {
"start": "electron ."
}
6

Start your application from the terminal:

npm start

You should see the following:

Electron Desktop App

Authenticate a user, define a schema, and sync enabled Realm Sync, then call Realm.open() in your renderer.js file.

Once you have opened the realm, you can write to the realm.

const app = new Realm.App({ id: "<Your App ID>" }); // create a new instance of the Realm.App
async function run() {
// login with an anonymous credential
await app.logIn(Realm.Credentials.anonymous());
const DogSchema = {
name: "Dog",
properties: {
_id: 'int',
name: "string",
age: "int",
},
primaryKey: '_id'
};
const realm = await Realm.open({
schema: [DogSchema],
sync: {
user: app.currentUser,
partitionValue: "myPartition",
},
});
// The myPartition realm is now synced to the device. You can
// access it through the `realm` object returned by `Realm.open()`
// write to the realm
}
run().catch(err => {
console.error("Failed to open realm:", err)
});
Note

For an example of writing to a realm from both the renderer and main processes, check out the realm-electron-advanced-quickstart repository.

Tip
Give Feedback

On this page

  • Overview
  • Setup
  • Set up Your Application Files
  • Create the Main Script File
  • Set up a package.json
  • Install Your Project Dependencies
  • Create a Script to Run Your Application
  • Run Your Application
  • Open a Realm