Skip to content

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Sign up
Appearance settings

Commit 1f25287

Browse files
macos webdev setup tutorial by codewithchu
0 parents commit 1f25287

22 files changed

+1133
-0
lines changed

‎02-install-and-setup.md

Lines changed: 249 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,249 @@
1+
# Install and Setup
2+
3+
General Setup and App Install on MacOS Catalina (10.15.7)
4+
5+
## Terminal.app
6+
7+
Open up /Applications/Utilities/Terminal.app
8+
9+
## Command Line Tools
10+
11+
Mac OS Command Line toolkit has a bunch of utilities, and compilers. All of these commands come out of the box for Linux.
12+
13+
## Check Version
14+
15+
This check isn't that reliable.
16+
17+
```sh
18+
xcode-select -p
19+
```
20+
21+
Try one of the commands below on a fresh install of MacOS Catalina this should prompt the install of command line tools. if its not installed
22+
23+
```sh
24+
git
25+
make
26+
GCC
27+
```
28+
29+
## Manual Install
30+
31+
```sh
32+
#this might not work anymore
33+
xcode-select --install
34+
```
35+
36+
> **NOTE**
37+
>
38+
> You might get this error
39+
>
40+
> Can’t install the software because it is not currently available from the Software Update server.
41+
>
42+
> **Download from Apple Developers Site**
43+
>
44+
> Sign in with your Apple ID and download from [Apple's Developers site](https://developer.apple.com/download/more/?=command%20line%20tools 'Mac OS Command Line Tool').
45+
46+
## Homebrew
47+
48+
https://brew.sh
49+
50+
Installing Homebrew and CLI tool for installing applications.
51+
52+
> It also prompts to install Command Line Tools if you don't have it installed.
53+
54+
### Check version
55+
56+
```sh
57+
brew --version
58+
```
59+
60+
Install Command
61+
62+
```sh
63+
/bin/bash -c "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install.sh)"
64+
```
65+
66+
### Useful Commands to know
67+
68+
```sh
69+
brew update
70+
brew upgrade
71+
brew cleanup
72+
73+
#list brew
74+
brew list
75+
brew list --cask
76+
```
77+
78+
### Install Brew
79+
80+
https://brew.sh/analytics
81+
82+
Most Popular installs
83+
84+
```sh
85+
brew install \git \wget
86+
```
87+
88+
```sh
89+
#browsers
90+
brew cask install \google-chrome \firefox \opera
91+
92+
#apps
93+
brew cask install \visual-studio-code \rectangle \figma
94+
95+
96+
#OPTIONAL
97+
#Other Text Editors
98+
brew cask install \atom \sublime-text
99+
100+
#Other App if you want
101+
brew cask install \slack \spotify \zoom \vlc \iterm2 \postman \postgres
102+
103+
```
104+
105+
# Shell
106+
107+
Catalina comes with zsh as the default shell.
108+
109+
check version
110+
111+
```sh
112+
zsh --version
113+
which zsh
114+
```
115+
116+
```sh
117+
brew install zsh
118+
chsh -s /bin/zsh
119+
```
120+
121+
If prompted enter `0`
122+
123+
# Node.js, npm with NVM
124+
125+
Better to install node with nvm instead of homebrew. Allows us the flexibility to easily update node, have multiple version as well.
126+
127+
## Install nvm
128+
129+
Allow you to manage your node version
130+
131+
- https://github.com/nvm-sh/nvm
132+
133+
```sh
134+
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.35.2/install.sh | bash
135+
```
136+
137+
restart terminal
138+
139+
### check version
140+
141+
```sh
142+
nvm --version
143+
```
144+
145+
### Debug
146+
147+
if you're comand nvm isn't recognized try adding the code to your shell profile
148+
149+
we're using zsh so you would add it to.
150+
151+
```
152+
nano ~/.zshrc
153+
```
154+
155+
```sh
156+
#.zshrc
157+
export NVM_DIR="$([ -z "${XDG_CONFIG_HOME-}" ] && printf %s "${HOME}/.nvm" || printf %s "${XDG_CONFIG_HOME}/nvm")"
158+
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh"
159+
# This loads nvm
160+
```
161+
162+
### other shell profiles
163+
164+
- ~/.bash_profile
165+
- ~/.profile
166+
- ~/.bashrc
167+
168+
## Install Node
169+
170+
```sh
171+
nvm install node
172+
```
173+
174+
```sh
175+
nvm use node
176+
```
177+
178+
## Check Node and NPM Version
179+
180+
```sh
181+
node -v && npm -v
182+
```
183+
184+
## Update nvm
185+
186+
Later down the road if you want to update NVM
187+
188+
```sh
189+
nvm install node --reinstall-packages-from=node
190+
```
191+
192+
## Change version
193+
194+
https://nodejs.org/en/download/releases/
195+
Find node vesion
196+
197+
```sh
198+
nvm install xx.xx
199+
nvm use xx.xx
200+
201+
#list node version
202+
nvm ls
203+
```
204+
205+
And to set the default:
206+
207+
```sh
208+
nvm alias default xx.xx
209+
210+
#list nvm
211+
nvm alias default xx.xx
212+
213+
#check version
214+
node -v && npm -v
215+
```
216+
217+
# Git
218+
219+
Version Control
220+
221+
Add Default User Info
222+
223+
```sh
224+
git --version
225+
git config --global user.name "Your Name"
226+
git config --global user.email "youremail@email.com"
227+
```
228+
229+
# ssh
230+
231+
Create a SSH Key
232+
233+
```sh
234+
ssh-keygen
235+
```
236+
237+
save as /home/username/.ssh/id_rsa
238+
239+
Type in passphrase this will be extra password for security make sure you remember this or store it somewhere safe.
240+
241+
- [Install Applications](02-install-and-setup.md)
242+
- [Rectangles](03-rectangles.md)
243+
- [Terminal & zsh](04-setup-terminal-zsh.md)
244+
- [VS Code](05-vscode.md)
245+
- [Node & NPM](06-node-npm.md)
246+
- [SSH](07-ssh.md)
247+
- [Git & GitHub](08-git-setup.md)
248+
- [Browsers](09-browsers.md)
249+
- [Figma](10-figma.md)

‎03-rectangles.md

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
# Setup Rectangles
2+
3+
Rectangle is a window management app.
4+
5+
- https://rectangleapp.com/
6+
- https://github.com/rxhanson/Rectangle
7+
8+
* open the application
9+
* provide access to security & privacy
10+
* Recommended hot keys
11+
* show how it works
12+
* screen edge snapping similar to windows
13+
14+
## Basic Shortcut
15+
16+
Shortcuts I find useful
17+
18+
| Shortcut | Screen |
19+
| -------------------- | ----------- |
20+
| crtl + option left | left half |
21+
| crtl + option right | right half |
22+
| crtl + option up | top half |
23+
| crtl + option down | bottom half |
24+
| crtl + option return | full |
25+
| crtl + option delete | reset |
26+
| crtl + option e | 2/3 |
27+
| crtl + option d | 1/3 |
28+
29+
## Table of Content
30+
31+
- [Install Applications](02-install-and-setup.md)
32+
- [Rectangles](03-rectangles.md)
33+
- [Terminal & zsh](04-setup-terminal-zsh.md)
34+
- [VS Code](05-vscode.md)
35+
- [Node & NPM](06-node-npm.md)
36+
- [SSH](07-ssh.md)
37+
- [Git & GitHub](08-git-setup.md)
38+
- [Browsers](09-browsers.md)
39+
- [Figma](10-figma.md)

0 commit comments

Comments
(0)

AltStyle によって変換されたページ (->オリジナル) /