Introduction to Electron Apps on Ubuntu 18.04
Electron is an open-source framework that enables developers to create cross-platform desktop applications using web technologies such as HTML, CSS, and JavaScript. In essence, Electron allows you to wrap a website in a reliable desktop environment, making it accessible as a standalone application. If you have a favorite website or web application that you would like to run as a desktop app on Ubuntu 18.04, you’re in the right place. This guide will walk you through the process step-by-step, offering clear explanations and practical tips along the way.
Prerequisites
Before diving into the development of your Electron app, you need to ensure that you have a few things set up on your Ubuntu 18.04 system:
1. Node.js and npm
Node.js is the JavaScript runtime that powers Electron, while npm (Node Package Manager) allows you to manage and install various packages. Follow the steps below to install Node.js and npm:
bash
sudo apt update
sudo apt install nodejs npm
To verify the installation, check the versions:
bash
node -v
npm -v
2. Electron
Once you have Node.js and npm installed, you can install Electron globally. Open your terminal and run:
bash
sudo npm install -g electron
To confirm that Electron is installed correctly, check the version by running:
bash
electron -v
Creating Your First Electron App
With Node.js, npm, and Electron installed, you are all set to create your first Electron app.
Step 1: Setting Up Your Project
Navigate to your desired directory in the terminal and create a new directory for your Electron app:
bash
mkdir my-electron-app
cd my-electron-app
Next, initialize a new Node.js project by running:
bash
npm init -y
This command will create a package.json file in your project directory, which will hold metadata about your application.
Step 2: Installing Electron Locally
Although we installed Electron globally, it’s best practice to install it locally as well. Run:
bash
npm install –save electron
Step 3: Creating Application Files
To build your Electron app, you’ll need at least three files:
- main.js: This will serve as the main process of your application.
- index.html: This file will contain the structure and content of your app’s interface.
- package.json: This will be modified to include additional settings for your Electron application.
Create these files in your project folder:
bash
touch main.js index.html
Step 4: Writing Your Main Process
Open main.js in your text editor and add the following code:
javascript
const { app, BrowserWindow } = require(‘electron’);
const path = require(‘path’);
function createWindow() {
const win = new BrowserWindow({
width: 800,
height: 600,
webPreferences: {
nodeIntegration: true
}
});
win.loadURL('https://example.com'); // Replace with your desired URL}
app.whenReady().then(createWindow);
app.on(‘window-all-closed’, () => {
if (process.platform !== ‘darwin’) {
app.quit();
}
});
app.on(‘activate’, () => {
if (BrowserWindow.getAllWindows().length === 0) {
createWindow();
}
});
This code initializes a new Electron application window and loads a specified URL. Replace 'https://example.com' with the URL of the website you want to convert into a desktop application.
Step 5: Updating package.json
Open your package.json file and modify it to include an entry point for your Electron application. Your file should look something like this:
json
{
“name”: “my-electron-app”,
“version”: “1.0.0”,
“main”: “main.js”,
“scripts”: {
“start”: “electron .”
},
“dependencies”: {
“electron”: “^VERSION_NUMBER”
}
}
Make sure to replace ^VERSION_NUMBER with the actual version number of Electron installed.
Step 6: Running Your App
Return to your terminal and run the following command to start your application:
bash
npm start
Your Electron application should launch, displaying the specified website in a desktop environment.
Customization and Packaging
Once you have a basic Electron app running, you might want to customize it further or package it for distribution.
Customizing the Appearance
You can further enhance your app’s user interface by modifying the index.html file. This file can include CSS styles and JavaScript code, allowing for a more tailored experience.
Electron Builder
For packaging your Electron app, consider using a tool like Electron Builder. It simplifies the process of creating distributable executables for your application across various operating systems.
To install Electron Builder, run:
bash
npm install –save-dev electron-builder
Next, update your package.json to include build-specific configurations:
json
“build”: {
“appId”: “com.example.myapp”,
“mac”: {
“icon”: “build/icon.icns”
},
“win”: {
“icon”: “build/icon.ico”
},
“linux”: {
“icon”: “build/icon.png”
}
}
Now, you can create a package for your application by running the following command:
bash
npm run build
Conclusion
Creating an Electron app from any website on Ubuntu 18.04 is both an accessible and rewarding process. With Electron, you can bring your desired web experience to the desktop, enhancing its usability and visibility. Whether you are developing a simple tool or a comprehensive application, the versatility of Electron allows for endless possibilities.
By following the steps outlined in this guide, you can easily set up, customize, and package an Electron application that meets your needs. Don’t hesitate to experiment with various features and functionalities to make your app uniquely yours.
FAQ
What is Electron, and why should I use it?
Electron is a framework that allows developers to create desktop applications using web technologies like HTML, CSS, and JavaScript. It is beneficial for creating cross-platform applications that maintain a consistent user experience across different operating systems.
Can I use other websites in my Electron app?
Yes, you can use any website as the URL loaded in your Electron app. Just replace the URL in your main.js file, and your application will display that website.
Is it possible to add offline capabilities to my Electron app?
Yes, by using service workers and local storage, you can provide offline functionality for your Electron application. This involves additional development work.
Can I package my Electron app for different operating systems?
Absolutely! With tools like Electron Builder, you can easily package your app for Windows, MacOS, and Linux, allowing for wide distribution.
Do I need to know programming to create an Electron app?
While some prior knowledge of JavaScript helps, the process is quite accessible for beginners who are willing to learn. There are numerous resources available online for those who wish to delve into web development.
Are there any alternatives to Electron for desktop app development?
Yes, several alternatives such as NW.js, React Native for Windows, and Flutter can be used for desktop app development. Each framework has its strengths and weaknesses, so the best choice depends on your specific needs and expertise.
