Giter Site home page Giter Site logo

vscode-live's Introduction

Coderpair vscode-live

Run VS Code on any machine anywhere and access it in the browser.

Set up multiple user accounts. Each user may have their own preferences/settings.

Collaborate with your team in real-time.

Screenshot *Use the group icon in the statusbar to open the user list.

What is this?

This is a modified version of code-server's release of vscode. You basically get the full vscode editor running in your browser, plus the added features mentioned above.

The real-time collaboration feature adds functionality similar to what you find in Microsoft's Live Share extension. One big difference, however, is that you don't have to invite people to share. Once you turn on this feature, you get true peer to peer collaboration. Everyone who connects to the vscode server is connected to the same codebase as peers, and they may edit, collaborate, and generally come and go as they please. Another difference between this and Live Share is that there is, at the moment, no shared terminal or debugging session.

Unfortunately, this is NOT a vscode extension. This is a full port of vscode, and thus cannot be simply plugged in to an existing installation.

Getting Started

Almost all the info that you need can be found on the code-server page. The only thing that will be covered here are the differences.

Installing

Get the latest release here. Refer to code-server's standalone instructions for manual installation on your particular environment.

Setup

Run code-server according to the instructions in the installation page above and point your browser to the url of your code-server installation. If everything looks OK, you are ready to start setting up vscode-live.

When code-server starts up, it creates a default config file in ~/.config/code-server/config.yaml that looks like this:

bind-addr: 127.0.0.1:8080
auth: password
password: mewkmdasosafuio3422 # This is randomly generated for each config.yaml
admin: osdifnasdfiopsdfn3556 # This is randomly generated for each config.yaml
cert: false

The password field is what you use to log in to code-server as the default user.

admin is a secondary password that you use for making changed through the dashboard.

Setting up Firebase

You will need a Firebase account to use the real time collaboration feature. You can sign up here for a free account.

After signing up, edit the config.yaml so that it looks like this:

bind-addr: 127.0.0.1:8080
auth: password
password: mewkmdasosafuio3422 # This is randomly generated for each config.yaml
admin: osdifnasdfiopsdfn3556 # This is randomly generated for each config.yaml
cert: false
firebase-apiKey: '<API_KEY>'
firebase-authDomain: '<DATABASE_NAME>.firebaseapp.com'
firebase-databaseURL: 'https://<DATABASE_NAME>.firebaseio.com'
firebase-ref: '-MCyz2LOkxQUSJBASlcG'

Fill in the <API_KEY> and <DATABASE_NAME> with your Firebase settings. You can leave the firebase-ref field as is or change it if you feel like it! Restart code-server for the changes to go into effect.

Skip to Turning on real time collaboration if you don't want to set up multiple accounts.

Setting up multiple accounts

You can set up an account for each of your team members. Each user will be able to use vscode-live with their own default settings.

In order to set up multiple accounts, add a users field to the config.yaml file so that it looks like this:

bind-addr: 127.0.0.1:8080
auth: password
password: mewkmdasosafuio3422 # This is randomly generated for each config.yaml
admin: osdifnasdfiopsdfn3556 # This is randomly generated for each config.yaml
cert: false
firebase-apiKey: '<API_KEY>'
firebase-authDomain: '<DATABASE_NAME>.firebaseapp.com'
firebase-databaseURL: 'https://<DATABASE_NAME>.firebaseio.com'
firebase-ref: '-MCyz2LOkxQUSJBASlcG'
users: {
  robert: {password: pswd1, role: admin},
  sara: {password: pswd2, role: user},
  leonardo: {password: pswd3, role: user}
}

Restart code-server for the changes to go into effect.

You can add as many accounts as you like. You will log in to code-server with password you specify, so make sure it is a secure password.

Go to the login page in your browser

ie http://localhost:8080/login

and sign in with one of the user accounts.

Turning on real time collaboration

Head over to the dashboard:

ie http://localhost:8080/dashboard

go to the real time collaboration section, and turn it on there. Make sure you use the admin password in the config file to make changes.

Have fun!

Developing

vscode-live-dev containes the full source code for the most recent release, and is where current development takes place.

This repository contains the source in the form of patches that need to be applied to code-server. If you want to develop for a previous release of vscode-live (or code-server), the first thing you should do is head over to code-server and clone their repository. Next, find the patch (in the patches folder) that matches the version of code-server that you cloned. For example, if you cloned v3.8.0 of code-server, you will need patch-3.8.0. Copy the patch file into the root directory of your code-server repository. From that same directory, issue the following git command:

git apply <patch>

where <patch> is the name of the patch file.

vscode-live's People

Contributors

8sd avatar a-reda avatar ammario avatar bpmct avatar cmoog avatar coadler avatar code-asher avatar deansheather avatar dependabot[bot] avatar foresthoffman avatar frankpetrilli avatar fxxjdedd avatar greyscaled avatar kylecarbs avatar lucacasonato avatar maksimr avatar michaeldesantis avatar mikeshatch avatar nhooyr avatar niek avatar nol166 avatar omeryl avatar oonqt avatar paolomainardi avatar rdbeach avatar richardmcsorley avatar sr229 avatar sreya avatar supersandro2000 avatar tadatuta avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vscode-live's Issues

Real-time collaboration not working - infinite loading

Problem

When real-time collaboration is Off, everything seems to be working.
But after turning real-time collaboration On, after opening a file, the vscode just keeps loading indefinitely, showing that blue line at the top:

Screenshot_20210317_210750

More information

The logs don't seem to be relevant (for my eyes).
But the browser network tab is showing lots of 404 connecting firebase (real database removed):

Request URL: https://<DATABASE_NAME>.appspot.com/.lp?start=t&ser=38874610&cb=5&v=5&ns=<DATABASE_NAME>
Request Method: GET
Status Code: 404 

You may have noticed that https://<DATABASE_NAME>.appspot.com does not match the README (firebase-databaseURL: 'https://<DATABASE_NAME>.firebaseio.com').
I changed it because with the original I would get an error launching code-server :

[2021-03-18T00:29:29.934Z]  @firebase/database: FIREBASE WARNING: Firebase error. Please ensure that you spelled the name of your Firebase correctly (https://<DATABASE_NAME>.firebaseio.com) 

I got the "correct" server name from the Firebase console (storageBucket).

Am i missing any config?
Is this a bug or incomplete documentation?
I also read Firepad documentation which seems to say the same as you did.

Tested scenario

  • Web Browser: Firefox / Brave / Chromium
  • Local OS: Ubuntu 20.04.1 LTS
  • Remote OS: Ubuntu 20.04.1 LTS
  • Remote Architecture: amd64
  • code-server --version: 3.8.0 39fc66bd58ce4c9b5934a91caf5eaa0774706a3d

Installation instruction clarification

I might just be being a bit daft. I can't figure out how to install the package. The instructions say

Run code-server according to the instructions in the installation page above and point your browser to the url of your code-server
installation. If everything looks OK, you are ready to start setting up vscode-live.

But they also say

Unfortunately, this is NOT a vscode extension. This is a full port of vscode, and thus cannot be simply plugged in to an existing
installation.

Does this mean I have to create my own docker image to bundle this project and then install using the same instructions as code-server with the added firebase setup ?

Or can i ssh into an existing code-server container and run the install.sh script from there ?

Firebase options not working in config

when i put the firebase options into the config and start code-server I get this error:
error error reading /home/user/.config/code-server/config.yaml: Unknown option --firebase-apiKey=<API-KEY>
I have put the key in the config I just replaced it with for this post.

  • Web Browser:
    Firefox
  • Local OS:
    Windows 10
  • Remote OS:
    Arch Linux
  • code-server --version:
    3.9.1 e0203f2a36c9b7036fefa50eec6cf8fa36c5c015

Error: "Not permitted. Firebase not initialized." when enabling Real-Time Collabouration

I have followed the setup guide to install the tool on my Ubuntu 18, and I'm able to code using VS Studio Code in the browser. But when I go to the /dashboard url to enable real time collab, I get the error "Not permitted. Firebase not initialized.".
In the config file I've set up the firebase parameters like explained in the readme.
Any idea of what can be the cause?

My config.yml:

bind-addr: 127.0.0.1:8080
auth: password
password: ####
admin: ####
cert: false
firebase-apiKey: '####'
firebase-authDomain: '####.firebaseapp.com'
firebase-databaseURL: 'https://####.firebasedatabase.app'
firebase-ref: '-MCyz2LOkxQUSJBASlcG'
users: {
user1: {password: ####, role: admin},
user2: {password: ####, role: user},
user3: {password: ####, role: user}
}

Here you can see my Firebase settings: https://nimb.ws/l7PKIr
Here the rules of my Real Time Database on Firebase: https://nimb.ws/hketp0

Thanks

While saving a file, the file gets broken

I have noticed a very annoying thing, not sure if you experience the same/you have a fix for this: whenever I save a file, if the file is like 3000-5000 rows it takes 3-4 seconds to save. Not big deal, I can wait. The big deal is that I noticed that in this timeframe, the file is corrupted. This means that if I use my application, while the saving is in progress, the application is broken. Example of the error I see in my app when I refresh the page while the file is saving: https://nimb.ws/TBlZIc
I used to adopt AWS Cloud9 as web-based IDE editor and this was not happening. I would say its kind of a big deal, so maybe there is an easy fix that I am not seeing. Any advice?
Thanks

Can't activate extensions

  • Web Browser: Safari
  • Local OS: MacOS
  • Remote OS: Ubuntu 18.04
  • code-server --version: latest

I wanted to install the python extension, but it doesn't appears, even if it is installed, and at the beginning, I got the activating extension message.

Any clues ?

Fix New Issue -> Discussion link to point to vscode-live

Hey there! I'm one of the maintainers for code-server.

I noticed that under Issues > Discussions it links to code-server. Is it possible for you to remove this or point it to Discussions under vscode-live?

While we think vscode-live is awesome and really appreciate you open sourcing this, we don't have the same context/expertise to help people when they open Discussions under code-server related to your project. Therefore, it puts us in a weird position and we have to direct the person back to here.

Thanks so much for understanding! ♥️

Related:

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.