Code Monkey home page Code Monkey logo

web-desktop-environment's Introduction

Web Desktop Environment

A cross-platform desktop-environment with a web interface design to provide a simple and intuitive way to manage your server with a desktop-like interface.

What is a Web Desktop Environment

just like any other desktop environment WDE was design to abstract the use of your computer is a visual way. but the twist with WDE is that unlike other desktop environments, WDE was designed from the ground up to run on the web, and so the backend for WDE is made as an extensible web-server.

Why?

WDE usecases range from providing a slim interface for your raspberry pi to or any other micro-computer to proving an interface for developing on a remote super computer or inside a Docker container.
wehenever you need to work on a remote/cloud environment WDE can be a great choice. it can simplify and abstruct the way you interact with your server and allow to feel comfortable as if you were working on your local machine.

How?

WDE is making advantage of React.js both on the frontend and backend using a unique React framework that was developed specifically for it. WDE provide a way to extend its back/fronted functionality by adding custom apps packages. developers documentation will be available in the near future.

Installation/run guide

if you want to get started with WDE you can follow the following guide:

Run from npm

to run WDE from npm you can use the following command:

> yarn global add @web-desktop-environment/home-edition-server

> web-desktop-home

or

# for the version with support for x11 forwarding and vscode integration.
> yarn global add @web-desktop-environment/development-edition-server --unsafe-perm

> web-desktop-dev

after that your server port and cerdentials will show up in the terminal.

after that you can access it from your browser at "http://http.web-desktop.run/". note that since WDE is running on http by default, you can't access it from a https site, if security is a concern you you should use it behind an https proxy like ngrok and then access it from your browser at "https://web-desktop.run/".

Some use Cases

  • interface for small/low power computers like the Raspberry Pi zero
  • cloud development environment
  • interface for controlling your computer over a long distance or for remote support
  • interface for monitoring cloud vm/docker apps (can possibly be used as a replacement for a control panel)

The technologies behind "web-desktop-environment"

both the server and are build using a react framework called "react-fullstack" which is a framework for building fast react applications that rely on a tight reactive connection between the client and the server.

Screenshots

dark theme

Dark Theme Desktop running vs-code and x11 apps

dark theme

Dark Theme Desktop

mobile

Multiple Mobile Screenshots

light theme

Light Theme Desktop ๐Ÿ˜’

Contribute

if you have any new feature or existing feature you want to create or improve fell free to open a Pull-Request, if you have any technical questions you can always contact me on twitter at @ShmuelHizmi .

Features

Desktop

โœ”๏ธ Full web based desktop
โœ”๏ธ Mobile support โœ”๏ธ Themes and custom themes
โœ”๏ธ PWA app
โœ”๏ธ Windows can ether be opened inside the main web-app container or as a standalone

Apps

โœ”๏ธ Terminal
โœ”๏ธ Explorer
โœ”๏ธ Settings / System info
โœ”๏ธ Notepad
โœ”๏ธ VS-Code
โœ”๏ธ Media app (early developemnt) โœ”๏ธ Every X11 app using xpra

To do

Desktop TO DO List

โ˜„๏ธ more reactive animations :)
โ˜„๏ธ make the light theme look better

Apps TO DO List

โ˜„๏ธ Task manager
โ˜„๏ธ Music Player
โ˜„๏ธ Applications store for external packages

Run from source

Note that to build the project you need to be running from a linux/mac os box (wsl if you are on windows) with nodejs 16 and yarn installed.

Run

quick run

  1. yarn start

Advanced run

install packages

  1. yarn

run server

  1. cd packages/development-edition-server or cd packages/home-edition-server
  2. yarn start

run client

  1. cd packages/views
  2. yarn start

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.