-
Notifications
You must be signed in to change notification settings - Fork 1
Expand file tree
/
Copy path2021-02-27_Basic-Web-Development-Environment-Setup-9f36c3f15afe.html
More file actions
208 lines (205 loc) · 18.5 KB
/
2021-02-27_Basic-Web-Development-Environment-Setup-9f36c3f15afe.html
File metadata and controls
208 lines (205 loc) · 18.5 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Basic Web Development Environment Setup</title>
<link rel="stylesheet" href="./style.css">
</head>
<body>
<article class="h-entry">
<header>
<h1 class="p-name">Basic Web Development Environment Setup</h1>
</header>
<section data-field="subtitle" class="p-summary">
Windows Subsystem for Linux (WSL) and Ubuntu
</section>
<section data-field="body" class="e-content">
<section name="f47b" class="section section--body section--first section--last">
<div class="section-divider">
<hr class="section-divider">
</div>
<div class="section-content">
<div class="section-inner sectionLayout--insetColumn">
<h3 name="d1ae" id="d1ae" class="graf graf--h3 graf--leading graf--title">Basic Web Development
Environment Setup</h3>
<h4 name="8672" id="8672" class="graf graf--h4 graf-after--h3 graf--subtitle">Windows Subsystem for Linux
(WSL) and Ubuntu</h4>
<p name="522e" id="522e" class="graf graf--p graf-after--h4"></p>
<figure name="d3f6" id="d3f6" class="graf graf--figure graf-after--p"><img class="graf-image"
data-image-id="0*aqKP1drNHmNm34zz.jpg" data-width="800" data-height="462" data-is-featured="true"
src="https://cdn-images-1.medium.com/max/800/0*aqKP1drNHmNm34zz.jpg"></figure>
<p name="3414" id="3414" class="graf graf--p graf-after--figure">Test if you have Ubuntu installed by
typing “Ubuntu” in the search box in the bottom app bar that reads “Type here to search”. If you see a
search result that reads <strong class="markup--strong markup--p-strong">“Ubuntu 20.04 LTS”</strong>
with “App” under it, then you have it installed.</p>
<p name="9256" id="9256" class="graf graf--p graf-after--p"></p>
<ol class="postList">
<li name="110a" id="110a" class="graf graf--li graf-after--p">In the application search box in the
bottom bar, type “PowerShell” to find the application named “Windows PowerShell”</li>
<li name="54fd" id="54fd" class="graf graf--li graf-after--li">Right-click on “Windows PowerShell” and
choose “Run as administrator” from the popup menu</li>
<li name="a018" id="a018" class="graf graf--li graf-after--li">In the blue PowerShell window, type the
following: <code class="markup--code markup--li-code">Enable-WindowsOptionalFeature -Online
-FeatureName Microsoft-Windows-Subsystem-Linux</code></li>
<li name="6269" id="6269" class="graf graf--li graf-after--li">Restart your computer</li>
<li name="6dd9" id="6dd9" class="graf graf--li graf-after--li">In the application search box in the
bottom bar, type “Store” to find the application named “Microsoft Store”</li>
<li name="eb4e" id="eb4e" class="graf graf--li graf-after--li">Click “Microsoft Store”</li>
<li name="74c1" id="74c1" class="graf graf--li graf-after--li">Click the “Search” button in the
upper-right corner of the window</li>
<li name="9d35" id="9d35" class="graf graf--li graf-after--li">Type in “Ubuntu”</li>
<li name="4205" id="4205" class="graf graf--li graf-after--li">Click “Run Linux on Windows (Get the
apps)”</li>
<li name="1799" id="1799" class="graf graf--li graf-after--li">Click the orange tile labeled <strong
class="markup--strong markup--li-strong">“Ubuntu”</strong> Note that there are 3 versions in the
Microsoft Store… you want the one just entitled ‘Ubuntu’</li>
<li name="edec" id="edec" class="graf graf--li graf-after--li">Click “Install”</li>
<li name="2935" id="2935" class="graf graf--li graf-after--li">After it downloads, click “Launch”</li>
<li name="a859" id="a859" class="graf graf--li graf-after--li">If you get the option, pin the
application to the task bar. Otherwise, right-click on the orange Ubuntu icon in the task bar and
choose “Pin to taskbar”</li>
<li name="669c" id="669c" class="graf graf--li graf-after--li">When prompted to “Enter new UNIX
username”, type your first name with no spaces</li>
<li name="e9c1" id="e9c1" class="graf graf--li graf-after--li">When prompted, enter and retype a
password for this UNIX user (it can be the same as your Windows password)</li>
<li name="4217" id="4217" class="graf graf--li graf-after--li">Confirm your installation by typing the
command <code class="markup--code markup--li-code">whoami ‘as in who-am-i'</code>followed by Enter
at the prompt (it should print your first name)</li>
<li name="48fe" id="48fe" class="graf graf--li graf-after--li">You need to update your packages, so type
<code class="markup--code markup--li-code">sudo apt update</code> (if prompted for your password,
enter it)</li>
<li name="d12f" id="d12f" class="graf graf--li graf-after--li">You need to upgrade your packages, so
type <code class="markup--code markup--li-code">sudo apt upgrade</code> (if prompted for your
password, enter it)</li>
</ol>
<h3 name="8302" id="8302" class="graf graf--h3 graf-after--li">Git</h3>
<p name="163f" id="163f" class="graf graf--p graf-after--h3">Git comes with Ubuntu, so there’s nothing to
install. However, you should configure it using the following instructions.</p>
<p name="ec67" id="ec67" class="graf graf--p graf-after--p">Open an Ubuntu terminal if you don’t have one
open already.</p>
<ol class="postList">
<li name="8cfe" id="8cfe" class="graf graf--li graf-after--p">You need to configure Git, so type <code
class="markup--code markup--li-code">git config --global user.name "Your Name"</code> with
replacing "Your Name" with your real name.</li>
<li name="0e0d" id="0e0d" class="graf graf--li graf-after--li">You need to configure Git, so type <code
class="markup--code markup--li-code">git config --global user.email your@email.com</code> with
replacing "<a href="mailto:your@email.com" data-href="mailto:your@email.com"
class="markup--anchor markup--li-anchor" rel="noopener noreferrer"
target="_blank">your@email.com</a>" with your real email.</li>
</ol>
<p name="2c68" id="2c68" class="graf graf--p graf-after--li"><strong
class="markup--strong markup--p-strong">Note: if you want git to remember your login credentials
type:</strong></p>
<pre name="31e2" id="31e2"
class="graf graf--pre graf-after--p">$ git config --global credential.helper store</pre>
<p name="0724" id="0724" class="graf graf--p graf-after--pre"></p>
<h3 name="d33b" id="d33b" class="graf graf--h3 graf-after--p">Google Chrome</h3>
<p name="0688" id="0688" class="graf graf--p graf-after--h3">Test if you have Chrome installed by typing
“Chrome” in the search box in the bottom app bar that reads “Type here to search”. If you see a search
result that reads “Chrome” with “App” under it, then you have it installed. Otherwise, follow these
instructions to install Google Chrome.</p>
<p name="7ae8" id="7ae8" class="graf graf--p graf-after--p"></p>
<ol class="postList">
<li name="578c" id="578c" class="graf graf--li graf-after--p">Open Microsoft Edge, the blue “e” in the
task bar, and type in <a href="http://chrome.google.com/" data-href="http://chrome.google.com/"
class="markup--anchor markup--li-anchor" rel="noopener noreferrer noopener"
target="_blank">http://chrome.google.com</a>. Click the “Download Chrome” button. Click the “Accept
and Install” button after reading the terms of service. Click “Save” in the “What do you want to do
with ChromeSetup.exe” dialog at the bottom of the window. When you have the option to “Run” it, do so.
Answer the questions as you’d like. Set it as the default browser.</li>
<li name="40db" id="40db" class="graf graf--li graf-after--li">Right-click on the Chrome icon in the
task bar and choose “Pin to taskbar”.</li>
</ol>
<h3 name="ce17" id="ce17" class="graf graf--h3 graf-after--li">Node.js</h3>
<p name="0d87" id="0d87" class="graf graf--p graf-after--h3">Test if you have Node.js installed by opening
an Ubuntu terminal and typing <code class="markup--code markup--p-code">node --version</code>. If it
reports "Command 'node' not found", then you need to follow these directions.</p>
<ol class="postList">
<li name="9098" id="9098" class="graf graf--li graf-after--p">In the Ubuntu terminal, type <code
class="markup--code markup--li-code">sudo apt update</code> and press Enter</li>
<li name="806b" id="806b" class="graf graf--li graf-after--li">In the Ubuntu terminal, type <code
class="markup--code markup--li-code">sudo apt install build-essential</code> and press Enter</li>
<li name="5f3a" id="5f3a" class="graf graf--li graf-after--li">In the Ubuntu terminal, type <code
class="markup--code markup--li-code">curl -o-
https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash</code> and press Enter</li>
<li name="2abd" id="2abd" class="graf graf--li graf-after--li">In the Ubuntu terminal, type <code
class="markup--code markup--li-code">. ./.bashrc</code> and press Enter</li>
<li name="3c16" id="3c16" class="graf graf--li graf-after--li">In the Ubuntu terminal, type <code
class="markup--code markup--li-code">nvm install --lts</code> and press Enter</li>
<li name="d567" id="d567" class="graf graf--li graf-after--li">Confirm that <strong
class="markup--strong markup--li-strong">node</strong> is installed by typing <code
class="markup--code markup--li-code">node --version</code> and seeing it print something that is not
"Command not found"!</li>
</ol>
<h3 name="7d5d" id="7d5d" class="graf graf--h3 graf-after--li">Unzip</h3>
<p name="0847" id="0847" class="graf graf--p graf-after--h3">You will often have to download a zip file
and unzip it. It is easier to do this from the command line. So we need to install a linux unzip
utility.</p>
<p name="85dd" id="85dd" class="graf graf--p graf-after--p">In the Ubuntu terminal type: <code
class="markup--code markup--p-code">sudo apt install unzip</code> and press Enter</p>
<p name="ecf7" id="ecf7" class="graf graf--p graf-after--p">Mocha.js</p>
<p name="5fc7" id="5fc7" class="graf graf--p graf-after--p">Test if you have Mocha.js installed by opening
an Ubuntu terminal and typing <code class="markup--code markup--p-code">which mocha</code>. If it prints
a path, then you're good. Otherwise, if it prints nothing, install Mocha.js by typing <code
class="markup--code markup--p-code">npm install -g mocha</code>.</p>
<p name="313e" id="313e" class="graf graf--p graf-after--p"></p>
<h3 name="ad40" id="ad40" class="graf graf--h3 graf-after--p">Python 3</h3>
<p name="7415" id="7415" class="graf graf--p graf-after--h3">Ubuntu does not come with Python 3. Install
it using the command <code class="markup--code markup--p-code">sudo apt install python3</code>. Test it
by typing <code class="markup--code markup--p-code">python3 --version</code> and seeing it print a
number.</p>
<p name="8592" id="8592" class="graf graf--p graf-after--p"></p>
<h3 name="63b7" id="63b7" class="graf graf--h3 graf-after--p">Note about WSL</h3>
<p name="0314" id="0314" class="graf graf--p graf-after--h3"></p>
<p name="c3fc" id="c3fc" class="graf graf--p graf-after--p">As of the time of writing of this document,
WSL has an issue renaming or deleting files if Visual Studio Code is open. So before doing any linux
commands which manipulate files, make sure you <strong
class="markup--strong markup--p-strong">close</strong> Visual Studio Code before running those
commands in the Ubuntu terminal.</p>
<p name="de6f" id="de6f" class="graf graf--p graf-after--p"></p>
<h3 name="7ef9" id="7ef9" class="graf graf--h3 graf-after--p">Some other common instillations</h3>
<pre name="087a" id="087a"
class="graf graf--pre graf-after--h3"># Installing build essentials<br>sudo apt-get install -y build-essential libssl-dev<br># Nodejs and NVM<br>curl -o- <a href="https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh" data-href="https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh" class="markup--anchor markup--pre-anchor" rel="nofollow noopener" target="_blank">https://raw.githubusercontent.com/creationix/nvm/v0.33.2/install.sh</a> | bash<br>source ~/.profile<br>sudo nvm install 7.10.0<br>sudo nvm use 7.10.0<br>node -v<br>#nodemon<br>sudo npm install -g nodemon<br>sudo npm install -g loopback-cli<br># Forever to run nodejs scripts forever<br>sudo npm install forever -g<br># Git - a version control system<br>sudo apt-get update<br>sudo apt-get install -y git xclip<br># Grunt - an automated task runner<br>sudo npm install -g grunt-cli<br># Bower - a dependency manager<br>sudo npm install -g bower<br># Yeoman - for generators<br>sudo npm install -g yo<br># maven<br>sudo apt-get install maven -y<br># Gulp - an automated task runner<br>sudo npm install -g gulp-cli<br># Angular FullStack - My favorite MEAN boilerplate (MEAN = MongoDB, Express, Angularjs, Nodejs)<br>sudo npm install -g generator-angular-fullstack<br># Vim, Curl, Python - Some random useful stuff<br>sudo apt-get install -y vim curl python-software-properties<br>sudo apt-get install -y python-dev, python-pip<br>sudo apt-get install -y libkrb5-dev<br># Installing JDK and JRE<br>sudo apt-get install -y default-jre<br>sudo apt-get install -y default-jdk<br># Archive Extractors<br>sudo apt-get install -y unace unrar zip unzip p7zip-full p7zip-rar sharutils rar uudeview mpack arj cabextract file-roller<br># FileZilla - a FTP client<br>sudo apt-get install -y filezilla</pre>
<h4 name="4493" id="4493" class="graf graf--h4 graf-after--pre">If you found this guide helpful feel free
to checkout my github/gists where I host similar content:</h4>
<p name="1c2f" id="1c2f" class="graf graf--p graf-after--h4"><a href="https://gist.github.com/bgoonz"
data-href="https://gist.github.com/bgoonz" class="markup--anchor markup--p-anchor" rel="noopener"
target="_blank">bgoonz’s gists · GitHub</a></p>
<div name="3585" id="3585" class="graf graf--mixtapeEmbed graf-after--p"><a
href="https://github.com/bgoonz" data-href="https://github.com/bgoonz"
class="markup--anchor markup--mixtapeEmbed-anchor" title="https://github.com/bgoonz"><strong
class="markup--strong markup--mixtapeEmbed-strong">bgoonz - Overview</strong><br><em
class="markup--em markup--mixtapeEmbed-em">Web Developer, Electrical Engineer JavaScript | CSS |
Bootstrap | Python | React | Node.js | Express | Sequelize…</em>github.com</a><a
href="https://github.com/bgoonz" class="js-mixtapeImage mixtapeImage u-ignoreBlock"
data-media-id="6ee74d5200d495ddc7ddad0c92bd6dce" data-thumbnail-img-id="0*Udg3rbeFyslZ9dyl"
style="background-image: url(https://cdn-images-1.medium.com/fit/c/160/160/0*Udg3rbeFyslZ9dyl);"></a>
</div>
<p name="cb1a" id="cb1a" class="graf graf--p graf-after--mixtapeEmbed">Or Checkout my personal Resource
Site:</p>
<div name="4bce" id="4bce" class="graf graf--mixtapeEmbed graf-after--p graf--trailing"><a
href="https://goofy-euclid-1cd736.netlify.app/" data-href="https://goofy-euclid-1cd736.netlify.app/"
class="markup--anchor markup--mixtapeEmbed-anchor"
title="https://goofy-euclid-1cd736.netlify.app/"><strong
class="markup--strong markup--mixtapeEmbed-strong">a/A-Student-Resources</strong><br><em
class="markup--em markup--mixtapeEmbed-em">Edit
description</em>goofy-euclid-1cd736.netlify.app</a><a
href="https://goofy-euclid-1cd736.netlify.app/" class="js-mixtapeImage mixtapeImage u-ignoreBlock"
data-media-id="260adefce95974b3b8f27566d0434b9c" data-thumbnail-img-id="0*kHvsYWw7LFYl0PB_"
style="background-image: url(https://cdn-images-1.medium.com/fit/c/160/160/0*kHvsYWw7LFYl0PB_);"></a>
</div>
</div>
</div>
</section>
</section>
<footer>
<p>By <a href="https://medium.com/@bryanguner" class="p-author h-card">Bryan Guner</a> on <a
href="https://medium.com/p/9f36c3f15afe"><time class="dt-published"
datetime="2021-02-27T02:35:09.585Z">February 27, 2021</time></a>.</p>
<p><a href="https://medium.com/@bryanguner/basic-web-development-environment-setup-9f36c3f15afe"
class="p-canonical">Canonical link</a></p>
<p>Exported from <a href="https://medium.com">Medium</a> on April 3, 2021.</p>
</footer>
</article>
</body>
</html>