IDE ca cod cu spații de cod GitHub în codul Visual Studio

Unul dintre cele mai grele lucruri pentru dezvoltatori este să înceapă un proiect care este deja în derulare.

Se întâmplă adesea ca cerințele pentru un nou proiect să ne obligă să modificăm versiunile SDK-urilor și instrumentele pe care le-am instalat local pentru a depana mediul, ceea ce ne face să pierdem zile până când totul funcționează conform așteptărilor.

Dacă luăm în considerare versiunile care se află într-o fază beta sau de previzualizare, lucrurile se complică și mai mult. Pentru a preveni acest lucru, aș dori să vă prezint GitHub Codespaces, care nu numai că vă permite să generați mediul de dezvoltare de care are nevoie aplicația dvs. într-un container, dar face și posibilă dezvoltarea oriunde și de pe orice dispozitiv.

Sa incepem!

Ce este GitHub Codespaces?

Github codespaces este un mediu cloud care este accesibil dintr-un browser și are toate caracteristicile necesare pentru dezvoltarea codului dedicat.

Este posibil să fi văzut anunțul GitHub, de fiecare dată când vă aflați într-un repo și apăsați „tasta” punct. Se va deschide un editor web cu depozitul în cauză.

Cu toate acestea, nu veți putea rula terminalul, deoarece este pur și simplu un editor web și nu există o mașină de backend. Uneori, acest lucru poate fi mai mult decât suficient, dar imaginați-vă că trebuie să rulați un mediu sau să compilați un proiect, dar nu aveți la îndemână un sistem care să răspundă nevoilor (un iPad, un Surface Go etc.).

GitHub Codespaces rezolvă această problemă, permițându-vă să rulați IDE-ul în cloud pentru a funcționa ca și cum ați folosi un sistem local și asta, de asemenea, cu configurația specificată.

Notă: această funcție este disponibilă numai pentru conturile de echipă și de întreprindere.

Cod simplu

Pentru acest exemplu voi folosi o aplicație Node.js foarte simplă:

 const express = require('express'); const app = express(); const port = 8080; app.use(express.static('public')); app.get('/', (req, res) => { res.sendFile(__dirname + '/index.html'); }) app.listen(port, () => { console.log(`Example app listening at http://localhost:${port}`); })

Codul de mai sus are următoarea structură:

Puteți lansa acest proiect local fără nicio problemă, atâta timp cât ați instalat Node.js, git și extensiile VS Code care sunt utile pentru un proiect în această limbă. De asemenea, poate doriți să utilizați instrumente precum Nodemon, care vor reîmprospăta aplicația automat.

Problema apare atunci când nu numai că lucrați cu această configurație, ci și folosiți multe altele, cum ar fi dezvoltarea cu .NET Core, Python, Docker sau Kubernetes și asta vă face să instalați mai multe instrumente și extensii de care nu aveți întotdeauna nevoie și acestea poate ajunge să afecteze performanța mediului de dezvoltare.

Problema nu se limitează la propria performanță. Dacă altcineva se alătură echipei și trebuie să își „pregătească” sistemul cu instrumentele și cadrele necesare pentru a porni aplicația, atunci va pierde și câteva ore, ceea ce va afecta performanța generală a echipei (va fi mai rău dacă sunteți lucru folosind sisteme de operare diferite).

Lucrul cu containere la distanță

Visual Studio Code oferă o extensie numită Remote Containers sau Dev Containers, care vă permite să generați mediul de dezvoltare de care are nevoie aplicația dvs. într-un container. În acest fel, toți dezvoltatorii din echipa ta care lucrează la un proiect vor avea automat același mediu de dezvoltare.

Acest lucru va face ca experiența de a începe proiectul dvs. să fie cât mai agilă posibil și, de asemenea, dacă sunteți cel care ați definit mediul, puteți separa mai multe medii de lucru per proiect cu configurații diferite pe aceeași mașină. Tare nu?

Cum sa incep?

Pentru a utiliza această caracteristică, trebuie să aveți Docker instalat pe computer, deoarece containerele vor rula pe acesta. De asemenea, este necesară instalarea extensiei Remote Containers, care ne va ajuta să construim mediul de dezvoltare.

Primul lucru pe care trebuie să-l faceți este să creați un folder numit .devcontainer în directorul rădăcină. Acesta este cel pe care extensia va incerca sa o identifice pentru a sti daca are o configuratie pentru a monta un container cu indicatiile incluse in acesta.

În el, trebuie să aveți cel puțin un fișier numit devcontainer.json care este cel care va avea configurația mediului.

Pentru acest exemplu am folosit următoarele:

 { "name": "dev-demo", "dockerFile": "Dockerfile", "forwardPorts": [ 8080 ], "settings": { "workbench.colorTheme": "Visual Studio Light" }, "containerEnv": { "NODE_ENV": "development", }, "extensions": [ "coenraads.bracket-pair-colorizer-2", "eg2.vscode-npm-script", "christian-kohler.npm-intellisense", "dbaeumer.vscode-eslint", "streetsidesoftware.code-spell-checker", "formulahendry.auto-close-tag", "mikestead.dotenv", "christian-kohler.path-intellisense", "davidanson.vscode-markdownlint", "pkief.material-icon-theme", "humao.rest-client" ], "postCreateCommand": "/bin/bash -c .devcontainer/post-create.sh", "postAttachCommand": "nodemon server.js" }

După cum puteți vedea, este un JSON cu diferite secțiuni:

• nume : este numele pe care îl va avea containerul dev. În mod ideal, acesta ar trebui să fie un nume descriptiv.
• dockerFile : este folosit pentru a indica numele Dockerfile pe care îl vom folosi pentru a crea mediul. În cazul meu, în același folder .devcontainer, am unul ca următorul:

 FROM node:12.16.1-alpine WORKDIR /code RUN apk update && apk upgrade \ && apk add git bash curl \ && npm install -g nodemon COPY . .

În acest exemplu, folosesc imaginea node: 12.16.1-alpine pur și simplu pentru a demonstra că configurația pe care o am în acest mediu de dezvoltare este diferită de cea pe care o am local, unde folosesc versiunea 14 a Node.js. Pe de altă parte, instalez câteva utilitare precum git, bash și cURL, pe lângă modulul Nodemon pe care îl voi folosi în timpul dezvoltării.

• fordwardPorts : acestea sunt porturile pe care aplicația mea le folosește, astfel încât să le pot accesa de pe mașina locală și astfel depanarea este ușoară.
• setări : pentru acest exemplu, iar când aveți mai multe medii este super util, am modificat tema Visual Studio Code, astfel încât să fie evident că nu sunt în mediul local în acea instanță a IDE-ului. De obicei folosesc varianta întunecată și aici am setat varianta light.
• containerEnv : Am adăugat, de asemenea, o variabilă de mediu, care este de obicei super utilă la dezvoltare.
• postCreateCommand : Am adăugat această proprietate, astfel încât să puteți vedea că este posibil să executați comenzi sau scripturi în timpul ciclului de viață al containerului de dezvoltare. În acest caz, acest script va fi lansat când se termină crearea. Conținutul acestuia este:

   #!/bin/bash # this runs in background after UI is available #Remove node_modules folder echo "Remove node_modules folder first" rm -rf node_modules #Install npm dependencies echo "Install dependencies" npm install

• postAttachCommand: În sfârșit, am adăugat comanda nodemon server.js la această proprietate, astfel încât de fiecare dată când conectați containerul, acesta va ridica implicit aplicația.

Există multe opțiuni de adăugat în fișierul devcontainer.json, acesta este doar un exemplu foarte mic de ceea ce puteți face.

Acum că știți tot ce este în acest folder și cum funcționează configurația definită, cum lansăm aceasta?

Cea mai ușoară cale este prin acest buton aici:

Selectați opțiunea Redeschideți în container și procesul va începe crearea containerului și a IDE-ului dvs. personalizat. Rezultatul ar trebui să arate astfel:

În final, rezultatul, în acest caz, va fi o fereastră Visual Studio Code cu tema Light, cu o versiune specifică Node.js, mai multe extensii alese să se dezvolte mai confortabil și aplicația mea deja rulată și expusă de portul 8080.

Și cea mai bună parte este că această configurație este versiunea în depozitul de proiect, astfel încât orice membru să o poată folosi. Pur și simplu spectaculos!

Acum că am văzut toate acestea și am înțeles toți pașii, ștergeți folderul .devcontainer, selectați din nou pictograma din stânga jos, selectați din nou Redeschidere în Container și veți vedea că de data aceasta vă permite să alegeți între mai multe pre -configuratii construite.

Nu trebuie să începeți configurația de la zero și, de asemenea, știți deja unde trebuie să atingeți pentru a-i termina atingerea de tocilar.

Înapoi la Github Spaces

Acum vom folosi același proiect pe care l-am folosit în Visual Studio Remote Containers, dar de data aceasta cu GitHub. După ce se face acest lucru în secțiunea Cod, veți avea o nouă opțiune numită Codespaces:

Aici puteți selecta tipul de mașină de care aveți nevoie pentru a lucra cu acest depozit specific:

Odată ales, va începe procesul de creație. Va folosi configurația folderului .devcontainer, cel pe care l-am creat pentru Remote Containers, pentru a configura mediul.

Odată ce procesul este terminat, veți vedea că va apărea un Cod Visual Studio în format web cu aplicația rulând, în același mod în care am făcut-o pe sistemul nostru local.

Cuvinte finale

După cum puteți vedea în exemplul de mai sus, Github Codespaces care utilizează containere de la distanță este o soluție excelentă la problema noastră de a replica configurația și mediul nostru de dezvoltare și sunt, de asemenea, o modalitate excelentă de a îmbunătăți performanța echipei noastre.