Setup a Local Dev Environment

Back to: Web Design for All Ages

Establishing a workflow that embraces best practices

Web designers and developers typically work locally, on their personal computers, then upload their files to cloud-based, shared directories (e.g. Google Drive, DropBox, etc.), especially when working with teams on group projects. This daily workflow/process has become a standard best practice, especially for web developers. Coding technologies, tools, apps, and services like Github and VS Code (Visual Studio Code) make this practice easier, but it’s still hard for beginners. In this lesson and hands-on activity, we are going to walk through the process of setting up a local web development environment and establishing a daily workflow/routine to follow that embraces good web development principles and best practices.

Pre-requisites

This exercise assumes the following:

  1. You should already have a Github pages repo setup (e.g. https://github.com/yourusername/yourusername.github.io). If not, please refer to the previous lesson.

Ready to start coding? Don’t be scared, just follow the steps below. Let’s do this!

Step

1

Launch Terminal app on your mac and navigate to the Desktop via the command line.

  • On your Mac, go to Applications > Utilities > Terminal:
  • Once Terminal app is open, note the location, or directory that you are inside of by typing the following:
    • pwd
      • This command will display the path of the current directory (e.g. /Users/username)
    • ls
      • This command will list all of the contents inside of the current directory (e.g. files and folders)
  • Typically, by default Terminal app will open up to the current user’s root directory (e.g. Users/username), which is one level up from the Desktop, so once you confirm that you are inside your user directory and need to go one level down to get to your Desktop, you can then change the current directory to the desktop via the following:
    • cd Desktop
      • This command (cd DirectoryName) will change the current directory to a target child directory, in this case Desktop

Other helpful Command line commands:

  • cd ..
    • This will change the directory to one level up (go up one level to the parent folder)

Step

2

Git Clone (make a copy of) your Github Page repo locally

The next step is to clone (make a copy) your github repo from the server (Github) and place it on the Desktop of your computer (local). Once you know that you are inside of your Desktop directory in Terminal app (via cd Desktop), type git clone then a space then type the path to your repo from github with the following command:

  • git clone https://github.com/iwebstudentXX/iwebstudentXX.github.io
    • This command will copy the repo from github and place it on your desktop as a folder.
    • You can either type the path manually or copy-paste the url from your browser
    • Be sure to change the path to match your github username and repo name

Errors?

If you receive any errors, it’s possible that git is not installed on the computer that you are working on, or you might be experiencing a similar/related technical problem. If this happens, try using Github Desktop to commit and push your changes. Be sure to log in first and double check to ensure that your username and email addresses are entered correctly.

You will know that you are done with this step when you see the folder on your Desktop.

Step

3

Open up your repo in VS Code and update your README.md file with a link to your live github pages site.

Launch your text editor, VS Code, and open your project folder. There are multiple ways to launch VS Code:

  • You can go to Applications > VS Code (or click on the icon in the Dock)

If you open VS Code this way (by launching the application first), be careful not to edit the wrong project files by first ensuring that you are in the correct folder. By default VS Code automatically opens the last project (folder) and files. If you are on a shared computer (e.g. a school computer lab), you should get in the habit of double-checking the project/folder every time you launch VS Code. One way around this to drag your folder into VS Code via the dock:

  • To ensure that you open up your target project folder, try dragging and dropping your folder directly onto the VS Code Icon in the Dock.

Once you are in VS Code, you can also open folders via the File menu:

  1. Go to File > Open and browse to your project folder.
  2. Go ahead and close the “Welcome” screen/tab (if it appears by default).

Next open the README.md file and add the following link via markdown:

[View my site](https://username.github.io/)

When you are done editing the README.md file, hit save and you will notice a small blue circle with the number “1” in it. This is VS Code letting you know that a file was changed locally that is different than the master repo on github.com. This is a good warning notification (thank you VS Code).

Step

4

Save (commit) your local changes to the server (Github) via VS Code’s built in Git tab.

In VS Code, navigate to the “Source Control” (a.k.a. “Git”) tab on the left, then do the following:

  1. Add a descriptive comment then hit the check mark icon (the check mark will save the changes via a git “commit”)
  2. At the bottom of the interface, hit the sync icon (this sync icon will upload the changes via a git “push”)
  3. Enter your username and password if/when prompted

Once you have completed the syncing process (commit w/ a comment + push), you can then open your browser and go to your Github repo and/or your Github pages site to see if it worked.

Nice work!

If you got this working, well done! You just completed a full development cycle of 1) cloning a project from a code source, 2) editing the project locally, then 3) uploading your change to the server. This is not easy, especially for beginners, so go ahead and pat yourself on the back: you now have a local development environment all set up and ready to start coding the website.