Resources for Designers

Setting up a front-end web development environment

The open source projects for the Net-at-hand themes require a computer setup with some open source software installed on it—specifically node.js and the yarn npm package. You’ll also need git (which comes standard on a mac).

These steps assume you are on a mac. If you’re on a PC you’ll need to follow someone else’s tutorial for setting up node and yarn.

Before we begin

The default shell for macos used to be tcsh, and it is possible. depending on how you’ve handed os updates, that you’re still using this shell. This doesn’t work for the first step though, so you’ll need to change your default shell to something newer like zsh.

To do this, go to your system preferences, click on “Users & Groups”, click the padlock, then right click your user to get to advanced options. From here you can change the login shell (see the image below).

Just a quick note about the terminal—if you don’t have much experience yet using a terminal and the command line, it can be pretty daunting. I’d recommend reading a tuturial for some of the basics (here’s one here). Don’t be intimidated by it; it’s just another way to get around the file system on your mac.

Step 1—install homebrew

Homebrew is an opensource package manager for macos. It is what we will use to install node. You can get homebrew here. I’m assuming you do not have homebrew installed. You can check in the terminal by typing

which brew

If homebrew is installed, the result of that command will be a path to the brew command; something like ”/usr/local/bin/brew”. If it isn’t installed it won’t show anything; it will just bring up an empty prompt.

The installation process for homebrew is to copy and paste a terminal command from the website. Rather than putting it here, I’ll let you get it from there. When you paste it and hit return, you’ll see a bunch of text flying across the screen. Don’t get nervous with that; it’s doing what it is supposed to. It will go through the process of installing the x-code command line tools if needed.

When you’re installing homebrew, you’ll need to be patient. Depending on how your system is set up, it may need to download the xcode command line tools from apple. This can take a little while depending on your internet connection.

Also, you’ll see a bunch of text fly across your computer. As long as you don’t see something near the end that says it has failed, then you are good to go.

Step 2—install node.js and yarn

With homebrew installed you should be able to type:

which brew

and the terminal will show you the path to the brew command.

Now you can install node. In the terminal just type:

brew install node

Again, you’ll see a bunch of text fly across the screen. This is homebrew installing all the dependencies that node has along with the node.js package. Once it is done you should be able to type

which node

and the terminal will print out a path to the node executable (likely ”/usr/local/bin/node”).

With node installed, you can install yarn. This is a node package manager that is used by the Nah design theme projects for the node resources needed for them. I usually install yarn globally on my machine so I can use it wherever. To do so type the following:

npm install --global yarn

Step 3—installing git if needed

Git is a source code version control system. I use it daily for keeping track of changes to text files while I’m working on them. Git is how you will get the repository (where the source code lives) for the default design theme.

Git comes installed on macs by default (or at least comes with the x-code command line tools), but just in case use the “which” command to make sure that it is:

which git

It should output a path, probably ”/usr/bin/git”.

If it doesn’t print the path, then we can install git with homebrew. Just type:

brew install git

And you’ll be all set.

Step 4—get a good text editor

In order to work on source files, it’s a good idea to have a text editor that is meant for developers. One of the best right now is Visual Studio Code. It’s a free open source editor that has a large user base and is very stable. Once you download it, just drop the whole project folder onto the vscode icon and it will open up the project for you. It also has an integrated terminal that is great for this project.