shmuelhizmi / web-desktop-environment Goto Github PK

a web-based cross-platform desktop environment

License: MIT License

HTML 0.20% CSS 0.15% TypeScript 69.35% JavaScript 29.48% Dockerfile 0.27% Shell 0.55%

desktop-environment typescript nodejs react wed-desktop react-fullstack pwa visual-interface react-server operating-system

web-desktop-environment's Introduction

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

# 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 Desktop running vs-code and x11 apps

Dark Theme Desktop

Multiple Mobile Screenshots

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

yarn start

Advanced run

install packages

yarn

run server

cd packages/development-edition-server or cd packages/home-edition-server
yarn start

run client

cd packages/views
yarn start

web-desktop-environment's People

Contributors

Stargazers

Watchers

Forkers

bjalford sasi-007 ghenry22 maxdevjs rootshaxor chenperach peteralexandercharles ibivibiv jo9182 saapo-ka-baadshah bobo12e4 doytsujin abraham-yusuf jnpbl79 dalalsunil1986 code4fun29 kamawanu devopstoday11 thicket deawx luxtr gsdgsdgsgwearzseg francescocaponio nobita-gamerz ronicarvalho u4ea6 ekefddfjoeroe sp0rkz sgnconnects webrulon geosis-development zumwaltboi68 webclinic017 nonamecoder1 nicoirm brugarolas trapjawws

web-desktop-environment's Issues

Does not build

Great concept. However, following the build/install instructions here https://github.com/shmuelhizmi/web-desktop-environment (both quick start and advanced run) and here https://github.com/shmuelhizmi/web-desktop-environment/tree/master/packages/servers/development-edition-server only leads in getting a bunch of different build errors.

Tried all mentioned options in a windows and a linux boxes and against the master branch and the tag 1.0.2 same outcome.

Are these instructions up to date and/or accurate?

I have no Idea how to use it

Would appreciate some help, I wanted to make one for my small team with buds, so that we can have a small online workspace environment, I tried deploying it on vercel but it returns with an erroe

Console error

when i was trying to access the server from the website https://web-desktop.app/ that i had started up (which i used goormide to host) gave me this error and a white screen:

websocket.js:124 Mixed Content: The page at 'https://www.web-desktop.app/' was loaded over HTTPS, but attempted to connect to the insecure WebSocket endpoint 'ws://https/socket.io/?EIO=3&transport=websocket'. This request has been blocked; this endpoint must be available over WSS.
h.doOpen @ websocket.js:124

I was using the development server btw. plz help

Add this as a auto start

Hey, is it possible to add this as an auto start so, I should not be using any other wm ? I want to use this as my default wm and stop using any other so, I can contribute on this project too.

Docker Management and Docker Window Management Support

Hey, I have an idea that would open up a lot more possibilities in the project.
Just try to follow me.
If you could add a small interface to manage Docker Containers that allows you to open the ports of a container as a link like in Docker Desktop, but instead of opening them in a browser, you could open them as an app in a window within the web desktop environment and then link them in a menu, you would have a web desktop environment that is Docker capable. This would allow to install virtually any relevant docker as an app and use it as an app inside the web desktop environment.
I know it's a bit far-fetched, but especially on ARM platforms this could make sense if you keep the possibility of cluster management in mind.

Adding access control to endpoints

I wish to web-desktop-environment in Docker form as a multi tenant development environment but cannot figure out a way to safeguard the endpoints so that only I (and people given access) are able to use it. I already have a setup with vouch proxy but cannot figure out how to integrate it. It would be preferable if there was an option to use domains instead of ports or some kind of password mechanism.

Advanced Install Instructions Out of Date

Following up from the tail of #19 in a new issue, since this is separate from the original issue.

Heads up, looks like the commands in #advanced are outdated:

❯ npm --version
7.21.0
❯ npm i -g lerna
npm WARN deprecated [email protected]: this library is no longer supported
npm WARN deprecated [email protected]: Please upgrade  to version 7 or higher.  Older versions may use Math.random() in certain circumstances, which is known to be problematic.  See https://v8.dev/blog/math-random for details.
npm WARN deprecated [email protected]: request has been deprecated, see https://github.com/request/request/issues/3142

added 55 packages, removed 102 packages, changed 570 packages, and audited 626 packages in 19s

68 packages are looking for funding
  run `npm fund` for details

found 0 vulnerabilities
❯ lerna bootstrap --unsafe-perm
ERR! lerna Unknown arguments: unsafe-perm, unsafePerm
❯ lerna bootstrap unsafe-perm
ERR! lerna Unknown argument: unsafe-perm
❯ lerna bootstrap unsafePerm
ERR! lerna Unknown argument: unsafePerm
❯ lerna bootstrap
lerna notice cli v4.0.0
lerna info bootstrap root only
npm ERR! code 1
npm ERR! path /home/alex/projects/web-desktop-environment/node_modules/code-server
npm ERR! command failed
npm ERR! command sh -c ./postinstall.sh
npm ERR! Please pass --unsafe-perm to npm to install code-server
npm ERR! Otherwise the postinstall script does not have permissions to run
npm ERR! See https://docs.npmjs.com/misc/config#unsafe-perm
npm ERR! See https://stackoverflow.com/questions/49084929/npm-sudo-global-installation-unsafe-perm

npm ERR! A complete log of this run can be found in:
npm ERR!     /home/alex/.npm/_logs/2021-08-25T16_59_12_097Z-debug.log
lerna ERR! npm install exited 1 in 'root'
lerna ERR! npm install exited 1 in 'root'

It looks like lerna no longer passes flags to npm: lerna/lerna#2315

Additionally, I wonder how I could install the web-desktop without code-server? I already have it running as an independent process, and don't need it in my web-desktop environment.