Coder Social home page Coder Social 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

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

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.