Πώς να μεταβείτε από το μηδέν στη Δημιουργία-Αντιδρά-εφαρμογή στα Windows

Ένας ενημερωμένος οδηγός για τη δημιουργία ενός περιβάλλοντος ανάπτυξης ιστού στα Windows 10

Είμαι επαγγελματίας προγραμματιστής ιστού από τον Μάρτιο του 2018 και χρησιμοποίησα τόσο MacOs όσο και Windows εκείνη την εποχή. Το προτιμώμενο λειτουργικό μου σύστημα είναι τα Windows, για κανέναν άλλο λόγο από ό, τι προτιμώ τη διάταξη του πληκτρολογίου.

Με τα Windows / Linux μου αρέσει να έχω το πλήκτρο Ctrl μου ως το κλειδί για χρήση σε λειτουργίες αντιγραφής-επικόλλησης και μπορώ να χρησιμοποιήσω το αριστερό μου ροζ αντί για τον αντίχειρά μου. Εν πάση περιπτώσει, ας αφήσουμε πίσω τον αδύναμο συλλογισμό καθώς αυτός δεν είναι ο σκοπός αυτής της ανάρτησης!

Εάν δεν έχετε μηχανή Windows, τότε αυτή η ανάρτηση πιθανότατα δεν είναι για εσάς, εάν αυτό είναι διαφορετικό από αυτό που χρησιμοποιείτε, δεν το κάνει κακό.

Ας δούμε τι έχει να πει ο Ken:

Άρα είμαι περίπου 4 μήνες στη χρήση των Windows στην εργασία με πλήρη απασχόληση και δεν είναι καθόλου κακό.

- PATAGUCCI MANE (@ken_wheeler) 20 Δεκεμβρίου 2018

Αυτή είναι η ανανέωση του οδηγού μου από την αρχή του έτους σχετικά με τη δημιουργία ενός περιβάλλοντος ανάπτυξης ιστού σε μια μηχανή Windows.

Αυτός ο οδηγός θα καλύψει την εγκατάσταση του Ubuntu, αλλά μπορείτε να χρησιμοποιήσετε μερικές από τις άλλες γεύσεις του Linux που διατίθενται στο κατάστημα των Windows, η ρύθμιση του Debian θα είναι πολύ παρόμοια με αυτή του Ubuntu.

Στόχος αυτής της ανάρτησης

Για να μεταβείτε από μια νέα παρουσία των Windows 10 σε κάτι με το οποίο μπορείτε να αναπτύξετε εφαρμογές ιστού.

Αυτές οι οδηγίες αφορούν την ενημέρωση δημιουργών πτώσης των Windows 10 και νεότερες εκδόσεις.

Τι θα καλύψουμε:

  • Εγκαταστήστε το WSL
  • Ενεργοποιήστε το WSL στο μηχάνημά σας
  • ενημέρωση, αναβάθμιση και αυτόματη κατάργηση
  • Εγκατάσταση κόμβου (με n)
  • Εγκατάσταση κώδικα Visual Studio
  • Εγκαταστήστε τα Windows Git
  • Εγκατάσταση τερματικού (Hyper)
  • Εγκαταστήστε το κέλυφος ψαριού!
  • Εγκαταστήστε το Oh My Fish
  • Θέματα ψαριών με OMF
  • Διαμορφώστε
  • Διαμόρφωση Git
  • Δημιουργία εφαρμογής React
  • Χρησιμοποιήστε το SSH με το GitHub
  • Διαμόρφωση WSL SSH
  • Διαμόρφωση Windows Git Bash SSH
  • Αλλαγή έκδοσης WSL
  • Τύλιξε!

Εγκαταστήστε το WSL

Μπορείτε να εγκαταστήσετε το Ubuntu από το κατάστημα της Microsoft, το οποίο θα είναι το πρώτο μισό της εγκατάστασης, το δεύτερο θα είναι όταν ανοίγετε την εφαρμογή.

Ενεργοποιήστε το WSL στο μηχάνημά σας

Η επίσημη καθοδήγηση το καλύπτει πολύ καλά, αλλά πρόκειται να προσθέσω τα πλήκτρα συντόμευσης εδώ εάν δεν θέλετε να κάνετε κλικ με το ποντίκι.

Πριν από αυτό, ωστόσο, εάν δεν έχετε επιλέξει το PowerShell ως προεπιλεγμένη γραμμή εντολών, μπορείτε να το επιλέξετε από τη σελίδα ρυθμίσεων της γραμμής εργασιών που βρίσκεται στην ενότητα Εξατομίκευση στις Ρυθμίσεις, προτείνω να το κάνετε τώρα:

Ενώ είμαστε σε αυτό θα πρέπει επίσης να ενεργοποιήσουμε κρυμμένους φακέλους και να προσθέσουμε επεκτάσεις αρχείων για γνωστούς τύπους αρχείων στην Εξερεύνηση αρχείων των Windows.

Ανοίξτε την Εξερεύνηση αρχείων των Windows με το πλήκτρο Windows + e και, στη συνέχεια, επιλέξτε Προβολή από την κορδέλα. Στη συνέχεια, κάντε κλικ στο κουμπί Επιλογές στην άκρη δεξιά, θα εμφανιστεί το παράθυρο διαλόγου Επιλογές φακέλων, από εδώ θέλουμε να επιλέξουμε την καρτέλα Προβολή και να επιλέξουμε το κουμπί Ραδιόφωνο για κρυφά αρχεία και φακέλους με το "Εμφάνιση κρυφών αρχείων, φακέλων και μονάδων δίσκου", καταργήστε την επιλογή για "Απόκρυψη επεκτάσεων για γνωστούς τύπους αρχείων" επίσης. Κάντε κλικ στην εφαρμογή και στο Ok.

Ο λόγος για τον οποίο το κάνουμε αυτό είναι έτσι ώστε να μπορούμε να δούμε το .gitφάκελο σε δομές έργων και είναι επίσης απαραίτητο για αρχεία όπως .envαρχεία που χρησιμοποιούνται για διαμόρφωση περιβάλλοντος.

Χρησιμοποιήστε το πλήκτρο Windows + x, αυτό είναι το ίδιο με το δεξί κλικ στο εικονίδιο παραθύρων στην επιφάνεια εργασίας, αυτό θα ανοίξει το μενού γρήγορης σύνδεσης. Από εδώ πρέπει να ορίσετε την επιλογή Windows PowerShell (Διαχειριστής), μπορείτε να το κάνετε πατώντας ένα στο πληκτρολόγιο. Έτσι, το πλήκτρο Windows + x τότε a, θα ανοίξει το μήνυμα ελέγχου λογαριασμού χρήστη (Διαχειριστής), υποθέτοντας ότι έχετε δικαιώματα διαχειριστή στον υπολογιστή σας, θα πρέπει να κάνετε κλικ στο Ναι για να συνεχίσετε.

Αντιγράψτε τον κωδικό εδώ και επικολλήστε τον στο παράθυρο PowerShell, το Ctrl + v θα λειτουργήσει στο PowerShell, πατήστε enter για να εκτελέσετε την εντολή.

Enable-WindowsOptionalFeature -Online -FeatureName Microsoft-Windows-Subsystem-Linux

Θα σας ζητηθεί να επανεκκινήσετε το μηχάνημά σας μετά από αυτό, το οποίο πρέπει να κάνετε.

Ελέγξτε τον σύνδεσμο για μια πλήρη λίστα συντομεύσεων πληκτρολογίου παραθύρων.

Μετά την επανεκκίνηση μπορείτε να ανοίξετε το πρόγραμμα Ubuntu από το μενού έναρξης και θα πρέπει να συμβεί η δεύτερη εγκατάσταση (του WSL στο σύστημά σας). Περιμένετε να ολοκληρωθεί, τότε θα σας ζητηθεί να δημιουργήσετε έναν χρήστη και έναν κωδικό πρόσβασης για τον λογαριασμό. Θα πρέπει να θυμάστε τον κωδικό πρόσβασης που δημιουργήθηκε για τον χρήστη καθώς θα σας ζητηθεί να χρησιμοποιήσει sudoδικαιώματα.

ενημέρωση, αναβάθμιση και αυτόματη κατάργηση

Κατά τη στιγμή της σύνταξης αυτού, η έκδοση που έχω συνδέσει με το Ubuntu είναι 18.04.1

Η συνδεδεμένη εφαρμογή θα εγκαταστήσει την τελευταία σταθερή έκδοση του Ubuntu στα Windows.

Μπορείτε να ελέγξετε με ποια έκδοση του Ubuntu έχετε εγκαταστήσει:

lsb_release -a

Εάν θέλετε να χρησιμοποιήσετε μια συγκεκριμένη έκδοση LTS του Ubuntu, μπορείτε να τα λάβετε από το Windows Store, εδώ:

  • Ubuntu 16.04 LTS
  • Ubuntu 18.04 LTS

Τώρα πρόκειται να προχωρήσουμε σε μια ενημέρωση και να αναβαθμίσουμε όλα τα πράγματα, οι τρεις εντολές εδώ θα ενημερώσουν και θα αναβαθμίσουν όλο το προεγκατεστημένο λογισμικό που συνοδεύει την εγκατάσταση του Ubuntu.

Ο παρακάτω κώδικας είναι τρεις εντολές που ενώνονται μαζί &&. Η -yεπισήμανση είναι να αποδεχτείτε αυτόματα τις αλλαγές που πρόκειται να πραγματοποιηθούν με τις αναβαθμίσεις. Η αυτόματη κατάργηση θα αφαιρέσει τα αχρησιμοποίητα πακέτα που απομένουν από τις αναβαθμίσεις

Αντιγράψτε τις παρακάτω εντολές στο τερματικό του Ubuntu και εκτελέστε την εντολή:

sudo apt update && sudo apt -y upgrade && sudo apt autoremove
Για να πάτε από 16.04 έως 18.04 δοκιμάστε do-release-upgradeστο τερματικό. προειδοποιήστε ότι αυτό διαρκεί πολύ περισσότερο από το να διαγράψετε την τρέχουσα εγκατάσταση του Ubuntu και να ξεκινήσετε ξανά.

Τώρα που η βάση έχει εγκατασταθεί και ενημερωθεί, πρέπει να εγκαταστήσουμε το πακέτο build-essential για να μεταγλωττίσουμε και να δημιουργήσουμε άλλα πακέτα, τα ακόλουθα πακέτα που πρόκειται να εγκαταστήσουμε θα το χρειαστούν όλοι.

sudo apt install -y build-essential

Από εδώ και πέρα, θα πρότεινα τη χρήση δύο παραθύρων bash, το ένα με το sudo ενεργοποίησε το άλλο με τυπικά δικαιώματα.

ανοίξτε ένα τερματικό και μην μπείτε sudoεκεί, αντί να χρησιμοποιήσετε το τερματικό στο οποίο έχει δοθεί αυτή η άδεια.

Ο λόγος για αυτό είναι ότι έχω βρει αν εγκαταστήσετε τον κόμβο ως sudo, τότε κάθε φορά που θέλετε να εκτελέσετε μια npm installεντολή θα πρέπει να εκχωρήσετε δικαιώματα sudo και όλα μπορούν να είναι λίγο κουραστικά. Και δεν θα έπρεπε πραγματικά να εγκαταστήσετε πακέτα npm με δικαιώματα sudo.

Εγκατάσταση κόμβου (με n)

Let’s get our run-time on! If you use Node.js you will eventually have situations where you need to be able to switch Node versions, for this you may have heard to nvm (Node Version Manager) which by the way you can still use in WSL.

The reason for me opting for n over nvm is that in the past I experienced slow bash startup times whilst using nvm. Take a look at this WSL GitHub issue detailing it and the specific comment for the pros of using n.

Ok let’s install n, with n-install, the command doesn’t start with sudo so use it in the bash window you have with no sudo privileges.?

curl -L //git.io/n-install | bash

This will install the latest version of Node for us, follow the prompt on the terminal screen to reload bash:

# mine looks like this. /home/scott/.bashrc

Now check the versions of Node and npm we have installed with node -v && npm -v in the terminal.

Install Visual Studio Code

Install VSCode? What? This post is to set up WSL? Ok, so we’re going to presume that this is going from nothing to being able to web dev, so we’re going to need a text editor, and there’s nothing out there at the moment that comes close to VSCode, if you already have a text editor installed then skip to the next part.

Install the Windows version of VSCode from the Download section once installed we can enable WSL in the settings, the quickest way to do this is to open the integrated terminal in VSCode with the shortcut keys Ctrl+’ ? that’s and apostrophe. You will be prompted to select your default terminal, select WSL Bash.

Install Windows Git

There’s a bit of stumbling block getting Git support for VSCode, it’s well documented in the various issues mentioned in the linked issue.

There are workarounds as well with things like WSLGit which has its own set of issues, this all stems from users (me included) not wanting to have to install another binary for Git.

I have tried several variants when it comes to using Git with VSCode and the path of least resistance was biting the bullet and installing that additional binary, there’s an overhead with having to maintain and configure SSH keys for both Windows and WSL Git but it’s a one time setup.

Until the VSCode team incorporate WSLGit into VSCode I think this is the best option.

Install from git-scm.com the link will start downloading the install binary you can then open it and go through the install, you can keep clicking next through the install, I have selected a few options that I would like enabled.

For now, that is all we need to do, when it comes to authenticating with with GitHub using SSH we will use the Git Bash command line to configure the Windows side of things.

Install a Terminal (Hyper)

Now we have bash on Windows it’s time to install a nice Terminal app, because, let’s face it, the standard one is a bit basic.

Enter Hyper an electron based terminal app that is super themeable and configurable.

Download and install hyper for Windows, this will be the bare-bones version, it’ll look something like this:

You may notice that, this is the Windows Command prompt too — don’t worry, we’re going to configure that right now.

Open up the .hyper.js file located in the root of your user folder, or from Hyper itself use the shortcut key Ctrl+, to pop open the settings.

If the settings file (.hyper.js) opens in Notepad then you can set the default to be VSCode. In File Explorer (Use Windows key+e to open it) navigate to the file, it'll be in your User folder, right-click the file and select Properties, then Change for 'Opens with:' and select VSCode from the list.

Now we can set WSL as the shell path in Hyper, open the .hyper.jssettings file and search (Ctrl+f) for bash, we want to add the path to the WSL shell into the shell property defined in the file.

// amend shell path// WSL Bashshell: 'C:\\Windows\\System32\\bash.exe',

We can also change the appearance of Hyper from here by specifying font size and font family and also predefined themes, let’s quickly add in the hyper-adventure-time theme into the plugins section.

Open another Hyper tab with Ctrl+Shift+t, this will show the bash terminal for WSL now.

Quick orientation with the Hyper terminal keyboard shortcuts:

  • New tab = Ctrl+Shift+t
  • Close current tab = Ctrl+Shift+w
  • Cycle through tabs right = Ctrl+Shift+right arrow
  • Cycle through tabs left = Ctrl+Shift+left arrow

Now I’m going to configure some additional properties for Hyper, and change the theme to something a bit more subtle.

I purchased Dank Mono, if you want a similar font as OSS check out FiraCode.

Here’s what I changed:

module.exports = { config: { fontSize: 18, fontFamily: '"Dank Mono",...', cursorShape: 'BEAM', cursorBlink: true, copyOnSelect: true, plugins: ['hyper-altair'] }}

Install Fish Shell!

Ok, time to install the Fish Shell! This is a completely optional step, I like to use fish for the nice intellisense you get when navigating file structures, there are also some neat themes you can get with Oh My Fish

sudo apt -y install fish

Install Oh My Fish

Now we can install Oh My Fish (OMF) and get a nice terminal theme going on too, remember we talked about running commands with the correct permissions? Well this is one of those occasions, open a new tab first then paste in the following:

curl -L //get.oh-my.fish | fish

Fish themes with OMF

After installing OMF you can pick a theme, here you may notice that the text doesn’t fit in the screen on Hyper, a quick way to reset it is to maximise the window then back again, I did this with the Windows key+arrow up to maximise the Windows key+arrow down to restore it.

After installing omf I chose the theme agnoster, installed with omf install agnoster you can list out what is available and what you have already installed by selecting omf theme let's change it once more to the one theme, adjust the size of the window first as things are getting a bit cramped.

Have a play around there’s loads there, I prefer the one theme because you can see what version of node you’re running on, over on the far right. Here you can also see the intellisense for fish where it shows agnoster as a previous selection, if I wanted to select agnoster I could tab to complete the rest of the command.

Configure

So, now we have a swanky looking new terminal and a bare-bones VSCode install it’s time to get things moving.

I have a cheat-sheets repo detailing a lot of the configuration we’re about to go through here, if you find something useful along the way please drop a PR with the suggestion.

First up, in place of typing out fish each time I open a new terminal, and not replacing bash which you can do, but I prefer to use an alias. So what we're going to do is open up the .bashrc file and edit it.

From a new terminal type in nano ~/.bashrc, nano is a bash text editor. Scroll (or Page) down to the bottom of the file and add in an alias for fish, alias f=fish then to exit nano Ctrl+x and confirm changes with a y. Reload the .bashrc file like we did after using n to install Node . /home/scott/.bashrc but your username in place of mine ?, now we can use f instead of fish! Well done you saved yourself typing three extra characters!!!

Git config

Before we crack on with spinning up a Create React App instance we’re going to need to configure Git, via the .gitconfig file.

We’re going to use nano to add some settings for Git, both in WSL and Windows, this is the extra config I mentioned earlier, apologies!

First up we’ll config our bash environment and then move onto Git bash on Windows.

# open up the .gitconfig file in WSL bash# nano will create one if it doesn't existnano ~/.gitconfig

It’s nearly identical config for both environments apart from Windows uses the credential manager helper and WSL will need the cache helper.

# needed in Git Bash for Windows[credential] helper = manager# needed in WSL[credential] helper = cache[color] ui = true
[user] name = yourGitHubUserName email = [email protected]
[core] editor = code --wait

Make your changes then Ctrl+x to exit and confirm with y, that’s the first part of the Git config done.

In Git Bash for Windows do the same in the terminal, use nano to create a .gitconfig file and add the setting to it.

Create React App

Ok, we shall get create react app going so we can get Git configured with GitHub using SSH and start making changes to commit to a GitHub repo.

We’re going to use npx to make a starter React project with Create React App. If you want to have your projects somewhere else now is the time to navigate to that directory.

From the terminal enter:

# this will create a starter react project# called create-react-appnpx create-react-app create-react-app

This is creating the project in my home (~) folder, I've had to speed the gif up to 20x faster, it does take a while.?

Wheeeeeeeeeeeeeeeeeeeee!

So, now that we have spun up a React app to work on we should make a change and then add it to GitHub.

Navigate to the create-react-app folder in the terminal and open the project. You can open VSCode with the code . command, the . denotes the current folder in the terminal.

This will open VSCode at the root of the create-react-app project, make sure everything is working as expected by running the start script in npm.

npm run start

If you want to see what scripts are available in the current project you can also use npm run which will list defined npm commands from the package.json file.

Θα ανοίξει ένα παράθυρο που θα εμφανίζει τη βασική σελίδα προορισμού Δημιουργία εφαρμογής, πρόκειται να προσθέσουμε ένα h1 στη App.jsλειτουργική μονάδα και στη συνέχεια να το δεσμεύσουμε, μέσω του μενού Source Control στον VSCode.

Λάβετε υπόψη ότι αυτός είναι ένας συνεχής οδηγός για ένα περιβάλλον ανάπτυξης, δεν πρόκειται να αναλύσω λεπτομερώς την ανάπτυξη στο React

Ενώ το τερματικό είναι απασχολημένο ξεκινώντας τη σελίδα create-react, μπορούμε να ανοίξουμε μια άλλη καρτέλα στο Hyper με Ctrl + Shift + t και να ανοίξουμε τον VSCode με την code .εντολή, πλοηγηθείτε στο App.jsστοιχείο και προσθέστε μια <ετικέτα h1> σε αυτό ακριβώς πάνωe the τ; ετικέτα με

Γεια σας!

μέσα σε αυτό.

Now the landing page should show the newly added h1, we can confirm that the file is changed in Git by doing a git status from the terminal. Then we can commit it from either the terminal or the IDE (VSCode) my preference is to use VSCode as the visual diffing of files is great.

Commit the changes with Ctrl+Enter if you have not selected the file you want to commit you will get a dialogue telling you there are no staged changes to commit, you can select the files (in this case only the App.jsfile) by clicking the plus next to the file. Hitting Ctrl+Enter again will commit the changes with a message, you can check that there are no changes to commit with git status from the terminal or visually from the Source Control section in VSCode.

Ok, time to add our super sweet code changes to a repository on GitHub for the world to see!

Next up we’re going to go through adding the local changes we’ve made to a GitHub repository. If you haven’t got a GitHub account and are following along now may be a good time to set one up.

Use SSH with GitHub

First up, we’re going to make a repository on GitHub and push the changes we have made to it, here we’re going to click the + button in the top right of the GitHub home page, enter a repository name and GitHub will give you some defaults to choose from. As we have already made change locally we can ignore the first several commands but we do need the command to add the remote:

git remote add origin [email protected]:spences10/cra.git

And to push the changes up to GitHub git push -u origin master but we're going to get an error, as we haven't set up SSH.

WSL SSH Config

Ανοίξτε μια νέα καρτέλα bash στο Hyper και εισαγάγετε ls -al ~/.sshβεβαιωθείτε ότι δεν υπάρχουν rsaαρχεία πριν το κάνετε.

Θα παρατηρήσετε ότι το κάνουμε αυτό στο bash και όχι στο Fish.

Εάν δεν υπάρχει τίποτα εκεί, δημιουργήστε νέα κλειδιά με:

# add your email address ?ssh-keygen -t rsa -b 4096 -C [email protected] 

Τώρα ls -al ~/.sshθα εμφανιστούν δύο επιπλέον αρχεία:

# there should be a private and public key-pairid_rsaid_rsa.pub

Ξεκινήστε τον πράκτορα SSH:

eval "$(ssh-agent -s)"

Προσθέστε το κλειδί RSA στο SSH με:

ssh-add ~/.ssh/id_rsa

Τώρα ώρα να προσθέσουμε το δημόσιο κλειδί SSH στο GitHub, στο WSL θα αντιγράψουμε-ζυμαρικά το δημόσιο κλειδί SSH με cat ~/.ssh/id_rsa.pubτο Hyper. Στη συνέχεια μπορούμε να αντιγράψουμε από το Hyper σε ένα νέο κλειδί SSH.

Τέλος, κάντε έλεγχο ταυτότητας με το GitHub:

ssh -T [email protected]

Διαμόρφωση Windows Git Bash SSH

Για τα Windows Git Bash, θα αντιγράψουμε τα κλειδιά SSH που μόλις δημιουργήσαμε στο WSL στο Windows Git Bash, υπάρχουν κάποιες λεπτές διαφορές κατά τον έλεγχο ταυτότητας με το Windows Git Bash.

Από το Hyper, αντιγράψτε τα αρχεία SSH από Linux σε Windows:

cp ~/.ssh/* /c/Users/spenc/.ssh/

Ξεκινήστε τον πράκτορα SSH:

eval `ssh-agent -s`

Προσθέστε το κλειδί στον πράκτορα SSH:

ssh-add ~/.ssh/id_rsa

Πιστοποιώ την αυθεντικότητα:

ssh -T [email protected]

Now the additional set up for SSH is done we should be able to go back to Hyper and push our change to GitHub.

Also, you may have noticed that the SSH Key ? token went from black to green on the settings screen there this indicates that you have authenticated.

Change WSL version

If you want to use a different version of Ubuntu, Debian or any of the other available distributions of Linux from the Windows store with Hyper you will need to change the default version from PowerShell:

# list available versionswslconfig /l# set defaultwslconfig /setdefault Debian

Wrap up!

Αυτό είναι! Πήγαμε από το μηδέν σε ένα λειτουργικό περιβάλλον ανάπτυξης ιστού. Υπάρχουν πολλά άλλα προσωπικά πράγματα που τώρα θα προσθέσω στην εγκατάσταση μου που είναι ψευδώνυμα τόσο για το Git όσο και για το κέλυφος ψαριών. Αν σας ενδιαφέρει έχω ένα cheat-sheet για το Fish με μια λίστα με όλα τα ψευδώνυμα που χρησιμοποιώ, το ίδιο για το δικό μου .gitconfigμπορείτε να το βρείτε αυτό στο dotfiles repo

Ευχαριστούμε που διαβάσατε ;

Αρχικά δημοσιεύτηκε στο blog μου στο Gatsby, μπορείτε να το δείτε εδώ παρακαλώ ρίξτε μια ματιά στο άλλο περιεχόμενό μου αν σας άρεσε αυτό.

Ακολουθήστε με στο Twitter ή Ρωτήστε με οτιδήποτε στο GitHub.

Μπορείτε να διαβάσετε άλλα άρθρα όπως αυτό στο blog μου.