One place for hosting & domains

      Desktop

      How To Create Your First Cross-Platform Desktop Application with Electron on macOS


      The author selected the Apache Software Foundation to receive a donation as part of the Write for DOnations program.

      Introduction

      Electron is an open source framework for creating native applications with web technologies like JavaScript, HTML, and CSS. It combines support for building and running applications cross platform on Mac, Windows, and Linux. Many popular desktop applications have been built using Electron, such as Visual Studio Code, WhatsApp, Twitch, Slack, and Figma.

      Electron facilitates designing more complex application features like automatic updates or native menus, which means that developers can focus on the core design of their application. Further, Electron is an open source project maintained by GitHub with an active community of contributors.

      In this tutorial, you’ll first set up a project and install Electron. After that you’ll create your first “Hello World!” application using Electron and customize it. You’ll implement graceful window setup and create new windows for the application. After following all of these steps, you will have an Electron cross-platform desktop application on macOS.

      Prerequisites

      To complete this tutorial, you will need:

      Note: This tutorial was tested on macOS 10.15.3.

      Step 1 — Creating the Project

      First you’ll install Electron to your machine and create the project folder to build the desktop application.

      To start the Electron installation process, create the project folder called hello-world and navigate to the folder with the following commands:

      • mkdir hello-world
      • cd hello-world

      Next, you’ll initiate your project by creating the package.json file.

      The package.json file is an essential part of a Node.js application, it performs the following:

      • Lists the packages that your project depends on.
      • Specifies the package version your project can use.

      To create the package.json file, run the following command:

      You will be asked a series of questions, starting with the package name. You can use the default application name, hello-world, as your package name.

      Then it asks for the version. To use v1.0.0, which comes as default, press ENTER.

      After that, it asks for a description. There you can add a description of your project, something like: hello world application on Electron.js.

      Next, for the entry point, enter main.js.

      The file invoked at the initial run time of application is known as the entry point. In this case, main.js is the entry point of the package.json file.

      For the remaining questions, accept the defaults with ENTER.

      Note: In this tutorial we’re leaving the author and license empty, but you can use your first and last name as the author depending on your project status. The license of your package specifies how others are permitted to use the application, and any restrictions you’re placing on it. The most common licenses are: MIT, BSD-2-Clause, and ISC. For more details, check the full list of SPDX license IDs. From there you can use a preferred license for your project, but this is not mandatory.

      Having followed the prompts you’ll receive the following output:

      Output:

      . . . Use `npm install <pkg>` afterwards to install a package and save it as a dependency in the package.json file. Press ^C at any time to quit. package name: (hello-world) version: (1.0.0) description: hello world application on Electron.js entry point: (index.js) main.js test command: git repository: keywords: author: license: (ISC)

      After that, you’ll be asked to confirm the configuration:

      Output:

      About to write to /hello-world/package.json: { "name": "hello-world", "version": "1.0.0", "description": "hello world application on Electron.js", "main": "main.js", "scripts": { "test": "echo "Error: no test specified" && exit 1" }, "author": "", "license": "ISC" } Is this OK? (yes)

      You’ll now have the newly generated package.json file inside your hello-world project directory. Next you’ll install Electron.

      Step 2 — Installing Electron

      Now you’ll implement the configuration of the package.json file and install Electron.

      For that, open the package.json file in your preferred text editor:

      Add the following highlighted line inside the scripts object:

      package.json

      {
        "name": "hello-world",  "version": "1.0.0",
        "description": "hello world application on Electron.js",
        "main": "main.js",
        "scripts": {
          "start": "electron .",
          "test": "echo "Error: no test specified" && exit 1"
       },
        "author": "",
        "license": "ISC"
      }
      

      The scripts property takes an object with as many key/value pairs as desired. Each one of the keys in these key/value pairs is the name of a command that can be run. The corresponding value of each key is the actual command that can be run. Scripts are frequently used for testing, building, and streamlining of the needed commands.

      In this project, you’ll use start as a key and electron . as a value.

      Once you’re done, save and exit the file.

      Next, you’ll install Electron as a development dependency in your project. Run the following command inside your hello-world project directory:

      • npm install --save-dev electron

      After successfully installing the Electron dependency to your project, the package.json file will be similar to this:

      package.json

      {
        "name": "hello-world",
        "version": "1.0.0",
        "description": "hello world application on Electron.js",
        "main": "main.js",
        "scripts": {
          "start": "electron .",
          "test": "echo "Error: no test specified" && exit 1"
        },
        "author": "",
        "license": "ISC",
        "devDependencies": {
          "electron": "^8.2.1"
        }
      }
      

      The dependency property takes an object that has the name and version for each dependency.

      There are two dependency properties dependencies and devDependencies that can be identified with a key difference. The dependencies property is used to define the dependencies that a module needs to run in production. The devDependencies property is usually used to define the dependencies the module needs to run in development. To install the package as devDependencies use the --save-dev flag with your command.

      You’ve installed Electron to your machine and created the project folder to build your application. Now you’ll write your first hello-world application using the Electron framework.

      Step 3 — Writing the “Hello World!” Application

      Let’s start writing your first Electron application.

      Electron operates with two types of processes: the main process (server-side) and the renderer process (client-side). The Electron main process is run on the Node.js runtime.

      For that, you’ll be working with two files: main.js and index.html.

      main.js is your application’s main process and index.html is your Electron application renderer process.

      hello-world
      +-- package.json
      +-- main.js
      +-- index.html
      

      Next, we create a manual browser window and load the content using Electron API calls, which you can use to execute HTML, CSS, JavaScript, and so on.

      First open your main.js file:

      Then add the following line of code to implement the BrowserWindow module:

      main.js

      const { app, BrowserWindow } = require('electron')
      

      This contains two destructuring assignments called app and BrowserWindow, which are required for an Electron module. The Browserwindow module is used to create a new window in your Electron application.

      Next, add the following code to your main.js file:

      main.js

      . . .
      function createWindow () {
        const mainWindow = new BrowserWindow({
          width: 800,
          height: 600
        })
      
        mainWindow.loadFile('index.html')
      }
      
      app.whenReady().then(createWindow)
      

      You add an Electron createWindow function to your hello-world application. In this function, you create a new BrowserWindow renderer process and pass the width and height parameters. The width and height will set the application window size.

      The mainWindow.loadFile() method renders some contents into the BrowserWindow. The index.html file will load the content.

      The main process will be started when the app.whenReady().then(windowName) method is ready. At this point, the main process calls the createWindow function. This function creates a new renderer process, or browser window instance, with a width of 800px and height of 600px. Then the renderer process proceeds to load content using mainWindow.loadFile('index.html') method. In this tutorial, you use index.html as the filename.

      Next add the following events code to your file:

      main.js

      . . .
      app.on('window-all-closed', () => {
        if (process.platform !== 'darwin') {
          app.quit()
        }
      })
      
      app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
          createWindow()
        }
      })
      

      You add the two main system events into the project—window-all-closed and activate events:

      • window-all-closed: Quits the application when all windows are closed. On macOS it is common for applications and their menu bar to stay active until the user quits explicitly with CMD+Q.
      • activate: Various actions can trigger this event, such as launching the application for the first time, attempting to re-launch the application when it’s already running, or clicking on the application’s dock (macOS) or taskbar icon.

      After adding these code blocks, your final output of the main.js file will be similar to this:

      main.js

      const { app, BrowserWindow } = require('electron')
      
      function createWindow () {
        const mainWindow = new BrowserWindow({
          width: 800,
          height: 600
        })
      
        mainWindow.loadFile('index.html')
      
      }
      
      app.whenReady().then(createWindow)
      
      app.on('window-all-closed', () => {
        if (process.platform !== 'darwin') {
          app.quit()
        }
      })
      
      app.on('activate', () => {
        if (BrowserWindow.getAllWindows().length === 0) {
          createWindow()
        }
      })
      

      Once you’re done, save and exit this file.

      Next, create and open the index.html file:

      Add the following code, which is sent as the final output:

      index.html

      <!DOCTYPE html>
      <html>
        <head>
          <meta charset="UTF-8">
          <title>Hello World!</title>
        </head>
        <body
          <h1>Hello World!</h1>
        </body>
      </html>
      

      Here you create a static HTML web page. The Electron application renderer process supports all HTML syntax since Electron uses Chromium for the rendering process.

      Now that you’re done, you can run your application:

      You will get an application window as an output.

      Hello world printed output window of the application

      You’ve created your first cross-platform application with the Electron framework. Next you’ll work with some customizations, which you can add for interactivity.

      Step 4 — Customizing Your “Hello World!”“ Application

      Now you have completed the initial setup of your first cross-platform application using the Electron framework. Let’s see what else you can do to improve the native behavior of the application.

      Electron has a number of built-in features such as dialog boxes, windows options, new windows, menus, shortcuts, notifications, touch bars, session controls, and so on, that improve the user experience of your desktop application. Let’s add some features to customize the hello-world application.

      Graceful Window Setup of the Application

      When you load a page into the window directly, at the startup of your application you may see the page does not load at once. This isn’t a great experience in native applications. Let’s fix this issue in a few steps.

      To do this, you need to hide the BrowserWindow by passing new configuration parameters at the time it gets created.

      For that, open the main.js file:

      Add the show: false parameter to the body of the BrowserWindow object:

      main.js

      const mainWindow = new BrowserWindow({
         width: 800,
         height: 600,
         show: false
       })
      

      Next, you’ll add a new listener to the BrowserWindow instance by adding the highlighted code line inside the createWindow function body. You’ll also add new configuration parameters into the BrowserWindow to change the background color of the initially built window.

      For that, you have to add the following code line of backgroundColor object, inside the BrowserWindow function. Feel free to change the hex color code as you wish.

      backgroundColor: '#Your hex color code'
      

      Add this line like the following highlighted code to your createWindow function:

      main.js

      function createWindow () {
       const mainWindow = new BrowserWindow({
         width: 800,
         height: 600,
         show: false,
         backgroundColor: '#ffff00'
       })
       mainWindow.loadFile('index.html')
      
       mainWindow.once('ready-to-show', mainWindow.show)
      
      }
      

      To reduce the garbage collection, you need to execute this listener one time by using the once keyword. Therefore, the mainWindow.show method executes only once at the run time of this application.

      Now save your file and run your application using the terminal:

      Your application will show with a yellow background.

      Hello world printed output window with the background color of yellow

      Finally, you will see the application window loading gracefully.

      Creating a New Window for the Application

      The use of more than one window is a common feature of basic to advanced applications. Let’s add that feature to your newly created application.

      Electron can create multiple renderer processes (multiple windows) from a single main process.

      First, open main.js:

      Create a new method called secWindow and set the width and height parameters of the newly created window by adding the highlighted code:

      main.js

      function createWindow () {
      const mainWindow = new BrowserWindow({
        width: 800,
        height: 600,
        show: false,
        backgroundColor: '#ffff00'
      })
      
      const secWindow = new BrowserWindow({
        width: 600,
        height: 400,
       })
      . . .
      }
      

      Now load content to the newly created BrowserWindow renderer process. At this time you’ll load some remote URL (Website) content.

      In this tutorial, you’re using https://www.digitalocean.com web content for the second window of the application. For that, in the second window initialization secWindow.loadURL, you add the following code line to the body of the createWindow function:

      main.js

       function createWindow () {
       const mainWindow = new BrowserWindow({
         width: 800,
         height: 600,
         show: false,
         backgroundColor: '#ffff00'
       })
      
      const secWindow = new BrowserWindow({
         width: 600,
         height: 400,
       })
      
       mainWindow.loadFile('index.html')
      
       secWindow.loadURL('https://www.digitalocean.com/')
      
       mainWindow.once('ready-to-show', mainWindow.show)
      }
      

      Now save and exit your file and run your application in the terminal:

      You will get your initial window with the yellow background and a new application with the loaded URL.

      New desktop application window of loaded URL with previously hello world printed output window

      You’ve made customizations to your newly created application to make it more interactive for users. Now it’s time to build your Electron application.

      Step 5 — Building Your First Application

      After adding some features to your application, you need to build it for the purpose of distribution. In this section, you will learn how to build the application for various platforms.

      The build process of the Electron application is considered somewhat hard because it needs a lot of tools. However, here you’ll use the electron-builder CLI tool that provides the best way to build your application for any platform.

      First, you’ll install the electron-builder CLI tools globally. To do this run the following command:

      • sudo npm install -g electron-builder

      Note: You can use either npm or yarn to install electron-builder—there are no noted differences in performance. If you intend to develop your application in the long term, the makers of electron-builder recommend yarn to avoid potential compatibility issues. To install using yarn, you’ll need to ensure it’s installed on your computer and then run yarn add electron-builder --dev to install electron-builder with yarn.

      After completing the installation of the electron-builder, you can verify the success of it by running the following command in your terminal:

      • electron-builder --version

      You’ll receive the current version of Electron in your output.

      Now you can build your first cross-platform application. To do this open your terminal and run the following command in your project directory:

      You use the flags -mwl to build applications for macOS, Windows, and Linux respectively.

      Note: Only macOS users can build for all platforms. Windows users can build the application for Windows and Linux platforms only. Linux users can build only for Linux platforms. For more details, you can refer to the documentation.

      To build applications for separate operating systems use the following:

      Build applications for macOS:

      Build applications for Windows:

      Build applications for Linux:

      This process takes some time while dependencies download and your application builds.

      Your project directory creates a new folder called dist. All your built applications and unzip versions of the application are located in that folder.

      As an example, if you build your application for all platforms, your project dist folder is similar to the following file structure:

      hello-world
        +-- hello-world-1.0.0-mac.zip
        +-- hello-world-1.0.0.dmg
        +-- hello-world Setup 1.0.0.exe
        +-- win-unpacked
        +-- mac
        +-- linux-unpacked
        +-- hello-world_1.0.0_amd64.snap
      

      electron-builder builds the Electron app for the current platform and current architecture as the default target.

      • macOS: DMG and ZIP for Squirrel.Mac
      • Windows: NSIS (.exe)
      • Linux: If you build on Windows or macOS, Snap and AppImage for x64 will be the output. Otherwise if you build on Linux, the output will be Snap and AppImage files for the current architecture.

      You’ve now built your application for all platforms.

      Conclusion

      In this tutorial, you created your first cross-platform application with the Electron framework, added native features, and built it for distribution, on macOS.

      To learn more about Electron, you can check out their documentation. Now you can also share your newly created desktop application with anyone by creating an installer.



      Source link

      How To Set Up a Remote Desktop with X2Go on Ubuntu 20.04


      Not using Ubuntu 20.04?


      Choose a different version or distribution.

      The author selected Software in the Public Interest (SPI) to receive a donation as part of the Write for DOnations program.

      Introduction

      Usually, Linux-based servers don’t come with a graphical user interface (GUI) pre-installed. Whenever you want to run GUI applications on your instance, the typical solution is to employ Virtual Network Computing (VNC). Unfortunately, VNC solutions can be sluggish and insecure; many also require a lot of manual configuration. By contrast, X2Go provides a working “cloud desktop,” complete with all the advantages of an always-online, remotely-accessible, and easily-scalable computing system with a fast network. It is also more responsive and more secure than many VNC solutions.

      In this tutorial, you’ll use X2Go to create an Ubuntu 20.04 XFCE desktop environment that you can access remotely. This cloud desktop will include the same utilities that you would obtain had you installed Ubuntu 20.04 and the XFCE environment on your personal computer (almost identical to a Xubuntu setup).

      The setup described in this tutorial is useful when:

      • You need access to a Linux-based operating system, complete with a desktop environment, but can’t install it on your personal computer.
      • You use multiple devices in multiple locations and want a consistent work environment with the same tools, look, files, and performance.
      • Your Internet service provider gives you very little bandwidth, but you need access to tens or hundreds of gigabytes of data.
      • Long-running jobs make your local computer unavailable for hours or days. Imagine that you have to compile a large project, which will take 8 hours on your laptop. You won’t be able to watch movies or do anything else very resource-intensive while your project compiles. But if you run that job on your server, now your computer is free to perform other tasks.
      • You’re working with a team, and it benefits them to have a shared computer that they can access to collaborate on a project.

      Prerequisites

      Before starting this tutorial, you’ll need:

      • An Ubuntu 20.04 x64 instance with 2GB of RAM or more. 2GB is minimal, but a server with 4GB or more is ideal if you have memory-hungry applications that you plan to run. You can use a DigitalOcean Droplet if you like.

      • A user with sudo privileges and an SSH key. Follow this guide to get started: Initial Server Setup with Ubuntu 20.04. Make sure you complete Step 4 and configure your firewall to restrict all connections except for OpenSSH.

      Step 1 — Installing the Desktop Environment on Your Server

      With your server up and your firewall configured, you are now ready to install the graphical environment for the X2Go server.

      First, update the package manager’s information about the latest software available:

      In this tutorial, you are installing XFCE as the desktop environment. XFCE doesn’t use graphical effects like compositing, making it more compatible with X2Go and optimizing screen updates. For reference, the LXDE desktop environment and the MATE desktop environment (with compositing disabled) also work fine, but you’ll have to change the command in this tutorial where you install the desktop environment. For example, instead of sudo apt-get install xubuntu-desktop, you would type sudo apt-get install lubuntu-desktop to install LXDE.

      There are two ways to install XFCE; the Minimal Desktop Environment or the Full Desktop Environment. The best choice for you will depend on your needs, which we will cover next. Choose one of the two.

      The Full Desktop Environment

      Recommended for most use cases. If you don’t want to handpick every component you need and would rather have a default set of packages, like a word processor, web browser, email client, and other accessories pre-installed, you can choose xubuntu-desktop.

      Install and configure the Full Desktop Environment. The Full Desktop Environment is similar to what you would get if you installed Xubuntu from a bootable DVD/USB memory stick to your local PC:

      • sudo apt-get install xubuntu-desktop

      When prompted to choose a display manager, pick lightdm.

      Choosing lightdm as display manager

      The Minimal Desktop Environment

      Alternately, if you want to install a small, core set of packages and then build on top of them by manually adding whatever you need, you can use the xubuntu-core meta-package.

      A meta-package doesn’t contain a single package; instead, a meta-package includes an entire package collection. Installing a meta-package saves the user from manually installing numerous components.

      Install xfce4 and all of the additional dependencies needed to support it:

      • sudo apt-get install xubuntu-core

      You have installed a graphical environment. Now you will establish a way to view it remotely.

      Step 2 — Installing X2Go on the Server

      X2Go comes with two main components: the server, which starts and manages the graphical session on the remote machine, and the client, which you install on your local computer to view and control the remote desktop or application.

      In previous versions of Ubuntu (before 18.04), x2goserver wasn’t included in the default repositories, so you’d have to follow steps like these to get the software package. We’re leaving the link here, just for reference, in case the package gets dropped in future versions of Ubuntu. Fortunately, Ubuntu 20.04, codenamed Focal Fossa, includes the package you need in its default repositories, so the installation is faster.

      To install X2Go on your server, type the following command:

      • sudo apt-get install x2goserver x2goserver-xsession

      At this point, your server requires no further setup. However, keep in mind that if you followed the recommendation of setting up SSH keys in the Initial Server Setup with Ubuntu 20.04, then you will need to have your SSH private key available on every local machine that you intend to use. If you didn’t set up an SSH private key, make sure you choose a strong password.

      Note: Remember that if you run out of RAM, the Linux kernel might abruptly terminate some applications, resulting in lost work. If you are using a DigitalOcean Droplet and you notice that your programs require more RAM, you can temporarily power off your Droplet and upgrade (resize) to one with more memory.

      You have configured your server. Type exit or close your terminal window. The rest of the steps will focus on configuring the client on your local machine.

      Step 3 — Installing the X2Go Client Locally

      X2Go is ready to use out of the box. If you’re using Windows or Mac OS X on your local machine, you can download the X2Go client software here. If you’re using Debian or Ubuntu you can install the X2Go client with this command on your local machine:

      • sudo apt-get install x2goclient

      After downloading the software, you are ready to install it. Open the installer and select your preferred language. Now agree to the license and let the wizard guide you through the remaining steps. Typically, there shouldn’t be any reason to change the pre-filled, default values in these steps.

      X2Go works well out of the box, but it is also highly customizable. If you’d like additional information, visit X2Go’s official documentation.

      Now that you have installed the desktop client, you can configure its settings and connect to the X2Go server to use your remote XFCE desktop.

      Step 4 — Connecting To the Remote Desktop

      When you first open the X2Go client, a window will appear. If it doesn’t, click Session in the top-left menu and then select New session ….

      X2Go Client Screenshot - Creating a New Session

      In the Session name field, enter something to help differentiate between servers. Using a session name is particularly useful if you plan on connecting to multiple machines.

      Enter your server’s IP address or a fully qualified domain name (FQDN) in the Host field under Server.

      Enter the username you used for your SSH connection in the Login field.

      Since you installed XFCE in Step Two, choose XFCE as your Session type.

      Finally, because you connect to the server with SSH keys, click the folder icon next to Use RSA/DSA key for ssh connection and browse to your private key. If you didn’t opt to use the more secure SSH keys, leave this empty; the X2Go client will ask for a password each time you log in.

      The rest of the default settings will suffice for now, but as you get more familiar with the software, you can fine-tune the client based on your individual preferences.

      After pressing the OK button, you can start your graphical session by clicking the white box that includes your session’s name on the box’s top-right side.

      X2Go Main Window - Session List

      If you are running OS X on your local machine, OS X might prompt you to install XQuartz, which is required to run X11. If so, follow the instructions to install it now.

      In a few seconds, your remote desktop will appear, and you can start interacting with it.

      There are a few useful keyboard shortcuts you can use for a better experience on Windows and Linux-based operating systems.

      Note: These first two options can exhibit buggy behavior on modern Windows editions. You can still test them at this point, in case later versions of X2Go fix the issues. If they fail, just avoid using the same keyboard shortcut in the future.

      CTRL+ALT+F will toggle full-screen mode on and off. Working in full-screen mode can feel more like a local desktop experience. The full-screen mode also helps the remote machine grab keyboard shortcuts instead of your local machine.

      CTRL+ALT+M will minimize the remote view, even if you are in full-screen mode.

      CTRL+ALT+T will disconnect from the session but leave the GUI running on the server. It’s just a quick way of disconnecting without logging off or closing applications on the server. The same will happen if you click the window’s close button.

      Lastly, there are two ways you can end the remote session and close all of the graphical programs running in it. You can log off remotely from XFCE’s start menu, or you can click the button marked with a circle and a small line (like a power/standby icon) in the bottom-right corner of the main portion of the X2Go screen.

      The first method is cleaner but may leave programs like session-managing software running. The second method will close everything but may do so forcefully if a process can’t exit cleanly. In either case, be sure to save your work before proceeding.

      X2Go Main Window - Terminate Session Button

      You have now successfully accessed and configured your remote desktop.

      Conclusion

      In this tutorial, you used X2Go to create a robust and remote GUI-environment for the Ubuntu operating system. Now that you are up and running, here are a few ideas about using this desktop:

      If you’d like to learn more, visit X2Go’s official documentation website.



      Source link

      How To Set Up a Remote Desktop with X2Go on Debian 10


      Not using Debian 10?


      Choose a different version or distribution.

      The author selected Software in the Public Interest (SPI) to receive a donation as part of the Write for DOnations program.

      Introduction

      Usually, Linux-based servers don’t come with a graphical user interface (GUI) preinstalled. Whenever you want to run GUI applications on your instance, the typical solution is to employ Virtual Network Computing (VNC). Unfortunately, VNC is notoriously sluggish, insecure by default, and requires a lot of manual configuration to get up and running.

      By contrast, X2Go provides a working “cloud desktop,” complete with all the advantages of an always-online, remotely-accessible, and easily-scalable computing system with a very fast network. It is also more responsive and more secure than many VNC solutions. In this tutorial, you’ll use X2Go to create a Debian 10 XFCE desktop environment that you can access remotely. This “cloud desktop” will include the exact same utilities that you would obtain had you installed Debian 10 and XFCE environment on your personal computer.

      The setup described in this tutorial is useful when:

      • You need access to a Linux-based operating system, complete with a desktop environment, but can’t install it on your personal computer.
      • You use multiple devices in multiple locations and would like to have a consistent work environment with the same tools, same look, same files, and same performance.
      • Your Internet service provider gives you very little bandwidth, but you need access to tens or hundreds of gigabytes of data.
      • Long-running jobs make your local computer unavailable for hours or days. Imagine that you have to compile a very large project, and it will take 8 hours on your laptop. You won’t be able to watch movies or do anything else very resource-intensive while your project compiles. But if you run such jobs on your server, now your computer is free to perform other tasks.
      • You’re working with a team, and it benefits them to have a common computer that they can access in order to collaborate on a project.

      Prerequisites

      Before starting this tutorial, you’ll need:

      • A Debian 10 x64 instance with 2GB of RAM or more. 2GB is minimal and it’s recommended to use a server with 4GB or more if you have memory-hungry applications you plan to run. You can use a DigitalOcean Droplet if you like.

      • A user with sudo privileges and an SSH key. Follow this guide to get started: Initial Server Setup with Debian 10. Make sure you complete Step 4 and configure your firewall to restrict all connections except for OpenSSH.

      Step 1 — Installing the Desktop Environment

      With your server up and your firewall configured, you are now ready to install the graphical environment for the X2Go server.

      In this tutorial, you are installing XFCE as the desktop environment. XFCE doesn’t use fancy graphical effects like compositing, which makes it more compatible with X2Go and allows it to optimize screen updates. For reference, LXDE and MATE (with compositing disabled) also work fine but you’ll have to change the command in this tutorial where you install the desktop environment. For example, instead of sudo apt-get install xfce4 you would type sudo apt-get install lxde.

      There are two ways to easily install XFCE, but you only need to choose one—either the Minimal Desktop Environment or the Full Desktop Environment.

      Full Desktop Environment: Recommended. If you don’t want to handpick every component you need and would rather have a default set of packages, like a word processor, web browser, email client, and other accessories pre-installed, then you can choose task-xfce-desktop.

      Install and configure the Full Desktop Environment. This is similar to what you would get if you installed Debian from a bootable DVD/USB memory stick to your local PC:

      • sudo apt-get install task-xfce-desktop

      Minimal Desktop Environment: Alternately, if you want to install a small, core set of packages and then build on top of them by manually adding whatever you need afterward, you can use the xfce4 metapackage.

      A metapackage doesn’t contain software of its own, it just depends on other packages to be installed, allowing for an entire collection of packages to be installed at once without having to type each package name individually at the command line.

      Install xfce4 and all of the additional dependencies needed to support it:

      • sudo apt-get install xfce4

      Now that your graphical environment is installed, you will establish a way to view it remotely.

      Step 2 — Installing X2Go on the Server

      X2Go comes with two main components: the server, which starts and manages the graphical session on the remote machine, and the client, which you install on your local computer to view and control the remote desktop or application.

      In previous versions of Debian, x2goserver wasn’t included in the default repositories, so you’d have to follow steps like these to get the software package. You’re leaving the link here, just for reference, in case the package gets dropped in future versions of Debian. Fortunately, Debian 10, codenamed Buster, includes the package you need in its default repositories, so the installation is a bit easier.

      To install X2Go on your server, type the following command:

      • sudo apt-get install x2goserver x2goserver-xsession

      At this point, no further setup is required on your server. However, keep in mind that since SSH password authentication is disabled, for increased security, you’ll need to have your SSH private key available on any machine that you want to log in from. This will be the case if you followed the recommendation of setting up SSH keys in the Initial Server Setup with Debian 10 tutorial listed in the prerequisites. If you didn’t, you can still log in with a password, but make sure you choose a strong one.

      Remember that if you run out of RAM, some applications might be abruptly terminated by the Linux kernel, and then you could lose work in progress. If you are using a DigitalOcean Droplet and you notice that your programs require more RAM, you can temporarily power off your Droplet and upgrade (resize) to one with more memory.

      You are now done setting up the server and you can type exit or close the terminal window. The rest of the steps will focus on configuring the client on your local machine.

      Step 3 — Installing the X2Go Client Locally

      X2Go is ready to use out of the box. If you’re using Windows or Mac on your local machine, you can download the X2Go client software here. If you’re using Debian or Ubuntu you can install the X2Go client with this command on your local machine:

      • sudo apt-get install x2goclient

      After downloading the software you are ready to install it. Open the installer and select your preferred language. Now agree to the license and let the wizard guide you through the remaining steps. Normally, there shouldn’t be any reason to change the pre-filled, default values in these steps.

      X2Go works well out of the box but it is also highly customizable. If you’d like additional information, visit X2Go’s official documentation.

      Now that the desktop client is installed, you can configure its settings and connect to the X2Go server to use your remote XFCE desktop.

      Step 4 — Connecting To the Remote Desktop

      When you first open the X2Go client, the following window will appear. If it doesn’t, click Session in the top-left menu and then select New session ….

      X2Go Client Screenshot - Creating a New Session

      In the Session name field, enter something to help differentiate between servers. This can be particularly useful if you plan on connecting to multiple machines.

      Enter your server’s IP address or hostname in the Host field under Server.

      Enter the username you used for your SSH connection in the Login field.

      And, since you installed XFCE in Step Two, choose XFCE as your Session type.

      Finally, because you are connecting to the server with SSH keys, click the folder icon next to Use RSA/DSA key for ssh connection and browse to your private key. If you didn’t opt to use the more secure SSH keys, just leave this empty and the X2Go client will ask for a password each time you log in.

      The rest of the default settings will suffice for now, but as you get more familiar with the software, you can fine tune the client based on your individual preferences.

      After pressing the OK button, you can start your graphical session by clicking the white box that includes your session’s name on the top-right side of the box.

      X2Go Main Window - Session List

      If you are running OS X on your local machine, you may be prompted to install xquartz, which is required to run X11. If so, follow the instructions to install it now.

      In a few seconds, your remote desktop will be displayed and you can start interacting with it. During your first login, XFCE will ask if you want to Use default config or One empty panel. The first option will create a rectangular panel docked at the bottom of the screen, containing a few useful application shortcuts (e.g. a file manager, a terminal emulator, a browser, etc.). This option will also add a top panel to the desktop that includes utilities like an application launcher, a clock, a shutdown menu, and more.

      Unless you’re already familiar with XFCE, opting for an empty panel can be more complicated because you’ll be starting from scratch. There will be no taskbar, no clock, and no pre-configured start menu; it will be up to you to add everything to an empty panel on your own.

      Additionally, on Windows and Linux-based operating systems, there are a few useful keyboard shortcuts you can use for a better experience:

      CTRL+ALT+F will toggle full-screen mode on and off. Working in full-screen mode can feel more like a local desktop experience. Plus, other keyboard shortcuts will be grabbed by the remote OS instead of the local one.

      CTRL+ALT+M will minimize the remote view, even if you are in full-screen mode

      CTRL+ALT+T will disconnect from the session but leave the GUI running on the server. It’s just a quick way of disconnecting without logging off or closing applications on the server. The same will happen if you click the window’s close button.

      Lastly, there are two ways you can end the remote session and close all of the graphical programs running in it. You can log off remotely from XFCE’s start menu, or you can click the button marked with a circle and a small line (like a power/standby icon) in the bottom-right corner of the main portion of the X2Go screen.

      The first method is cleaner but may leave programs like session managing software running. The second method will close everything but may do so forcefully if a process can’t cleanly exit. In either case, be sure to save your work before proceeding.

      X2Go Main Window - Terminate Session Button

      And lastly, although it’s not required, let’s go into XFCE’s control panel, navigate to power settings and disable all standby features. If you don’t use the desktop for a while, XFCE will try to trigger a standby. Although the server normally won’t do anything when it receives this request, it’s better to avoid any unforeseen behaviors altogether.

      By going to the Applications menu, then Settings, you can open Power Manager.

      Opening XFCE Power Manager

      In this application, navigate to the System tab and drag the When inactive for slider all the way to the left. You should now see the text Never under this slider, which means XFCE won’t try to put the system in standby after it’s inactive for a while.

      Disabling Automatic System Suspend in XFCE Power Manager

      You have now successfully accessed and configured your remote desktop.

      Conclusion

      In this tutorial you used X2Go to create a robust and remote GUI-environment for the Debian operating system. Here are a few additional ideas about how to use this desktop. You could centralize your development work by creating a git repository, installing an IDE/code editor like NetBeans or Eclipse, or configuring a web server for testing web applications. You could also enhance your remote desktop with a good backup scheme to make sure that your work environment and important data are safely preserved in case something ever goes wrong. With DigitalOcean, you can also snapshot your Droplets when you’re happy with a certain setup. This way, you can test risky changes and always come back to a known good state in case you break something.

      If you’d like to learn more, visit X2Go’s official documentation website.



      Source link