-
Open a Terminal. Use the below commands to open a terminal in your system:
- MAC
- Type
Command + Space bar
, typeterminal
& hit enter OR - Open the Applications >> Utilities >> Terminal
- Type
- Windows
- Type
Window + R
then, typecmd
and pressEnter
to open a Command Line Interface OR - Click the Start >> Program Files >> Accessories >> Command Prompt to open a Command Prompt
- Type
- MAC
-
Install Node & NPM
- MAC
- Install Homebrew by typing:
ruby -e $(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install
in the terminal - To see if brew is installed, type "brew -v" in the terminal. It should output something like this:
Homebrew 1.1.11 Homebrew/homebrew-core (git revision be9c; last commit 2017-03-09)
- Type
brew install node
in the terminal - To see if Node is installed, type
node -v
in terminal. This should print the version number so you’ll see something like this:
v0.10.31.
- To see if NPM is installed, type
npm -v
in terminal. This should print the version number so you’ll see something like this:
1.4.27
- Install Homebrew by typing:
- Windows
- Download the Windows installer from the Nodes.js® web site.
- Run the installer (the .msi file you downloaded in the previous step.)
- Follow the prompts in the installer (Accept the license agreement, click the NEXT button a bunch of times and accept the default installation settings).
- Restart your computer. You won’t be able to run Node.js® until you restart your computer.
- Reference Link: http://blog.teamtreehouse.com/install-node-js-npm-windows
- MAC
-
Install VS Code Editor
-
MAC
- Download Visual Studio Code for macOS.
- Double-click on the downloaded archive to expand the contents.
- Drag Visual Studio Code.app to the Applications folder, making it available in the Launchpad.
- Reference Link: https://code.visualstudio.com/docs/setup/mac
-
Windows
- Download the Visual Studio Code installer for Windows.
- Once it is downloaded, run the installer (VSCodeSetup-version.exe). This will only take a minute.
- By default, VS Code is installed under C:\Program Files\Microsoft VS Code for a 64-bit machine.
- Reference Link: https://code.visualstudio.com/docs/setup/windows
-
-
Clone the git repository by typing
git clone https://github.com/vytrinh/gwc-summerparty.git
in the terminal -
Run the below commands on the terminal to install the dependencies & bringup the server
- npm i -g webpack-dev-server
- cd ~/gwc-summerparty
- npm i
- npm run start
-
Then, navigate to http://localhost:8080 in the browser.
We are finally done with installations and server is up & running. In next few steps we will customize the app :)
- Open up VS Code and type
command + o
. This should open up the a file finder. - Select the folder for the git repository that you cloned earlier in step 4.
- In the editor left hand nav (type
command + b
to open if it's not already), select src >> css folder & double click on style.css to open the file. - To change the theme of the app do the following:
- In the style.css file, change Line 8 to
background-image: url('../images/background_2.jpg');
& save the file. Goto back to the browser & the app will now have new background. - To change the logo of the app. In the editor, goto src >> components folder & click on app.js to open the file in the editor.
- In the app.js file, at Line 6 add
import Logo2 from '../images/logo_2.png';
- In the app.js file, change Line 29 to
<img src={Logo2} />
& save the file. Goto back to the browser & the app has new a new logo :)
- In the style.css file, change Line 8 to
- Navigate to src >> css. Double click on style.css to open.
- Find the style for
#create-todo[type=text]
. Replacecolor: #848484;
withcolor: #ffffff;
. Save the file. - Navigate back to http://localhost:8080 in the browser and observe the style update you just made. The input text should at the top of the list should now be white :)