To view your web page, you need to be running the browser-sync tool that you installed in Chapter 1.
Open the terminal and change directory to your ottergram folder.
Recall from Chapter 1 that you change directory using the cd command
followed by the path of the folder you are moving into.
One easy way to get the ottergram path is to Control-click (right-click) the ottergram folder in Atom’s lefthand panel and choose Copy Full Path (Figure 2.12).
Then, at the command line, type cd, paste the path, and press Return.
The path you enter might look something like this:
cd /Users/chrisaquino/Projects/front-end-dev-book/ottergram
Once you are in the ottergram directory, run the following command to open Ottergram in Chrome. (We have broken the command across two lines so that it fits on the page. You should enter it on a single line.)
browser-sync start --server --browser "Google Chrome"
--files "stylesheets/*.css, *.html"
If Chrome is your default browser, you can leave out the --browser "Google Chrome"
portion of the command:
browser-sync start --server --files "stylesheets/*.css, *.html"
This command starts browser-sync
in server mode, allowing it to
send responses when a browser sends a request to get a file, such as the
index.html file you created.
The command you entered also tells browser-sync to automatically reload the browser if any HTML or
CSS files are changed. This makes the development experience
much nicer. Before tools like browser-sync, you
had to manually reload the page after every change.
Figure 2.13 shows the result of entering this command on a Mac.
You should see the same output on Windows (Figure 2.14).
Once the Ottergram page has loaded in Chrome, you should see your page with the “ottergram” heading, “ottergram” as the tab label, and a series of otter photos and names (Figure 2.15).
