Introduction

Setting up your development environment with the right tools may seem like an obvious first step in your development journey. If you’ve been writing code for a while, you’ve already done this and may want to skip today’s post.

If you’re new to development, first - welcome! I’m happy that you’re here & you’ve trusted me enough to help guide you. Even if you’ve been developing for years, you just may find something useful here. I learn new tricks that improve my effectiveness & efficiency all the time.

Let’s dig in.

Work Area

Since everyone’s work style is different, it’s silly to say ‘This is the way that works!’

Find the hardware setup and location in your house or apartment that works best for your gear. Make yourself comfortable. Get the right chair & keyboard. I’ve found having the wrong chair can really impact my productivity, so pay attention to your body. If you’re sore or stiff after coding, switch things up.

I have a home office that I love, though I am making some changes soon. I’m remodeling and am going to install a powered adjustable-height desk that allows me to work either seated in a chair or standing up. Having options is great, so if you’re able to get a standing desk, go for it.

I’ve setup my office to allow me to work and look outside through a large bay window. If you have a window in your work area, try arranging your desk or work table to allow you the occasional distraction of looking outside. I find that that can be mentally refreshing, especially if I’ve been working heads-down for a while. The window can provide a quick change of scenery with no effort.

Your Development Computer

I’m not going to tell you what OS you should use - use whatever you like and with which you feel most productive. For me, that’s MacOS.

I have two development systems - a desktop and laptop. I do most of my work while at my home office desk where my iMac is setup. My hardware consists of a 27" iMac with an external Dell 27" monitor. I have my desktop stretched to provide a seamless full 54" of display use. This is pretty common and easy to setup so I don’t think it needs further explanation.

When I’m working on projects that require more desktop real estate, such as when I’m creating the layout for a new book, I’ll connect a 43" Samsung monitor to a Thunderbolt hub.

What’s most important here are the basics: you need to be comfortable, able to type, see what you type, and have enough compute power to run a development app server to test things.

If you are buying a new development computer, the very best advice I can give you is to get as much RAM as possible. The difference between an 8Gb system & a 32Gb system is enormous when it comes to running an IDE, a web server inside it (we’ll cover that soon), multiple browsers with multiple tabs open in each, your music… you get the idea.

I made the mistake of saying ‘oh, that should be fine’ when buying my first iMac. My current iMac has 32Gb.

Go with a bluetooth mouse & keyboard. Having these wireless allows you a lot of freedom with regard to your work surface. Your computer may fit nicely on a shelf, above and away from your desk or table work surface. You might want it on the floor… whatever. By using a bluetooth mouse & keyboard, you aren’t constrained by the length of those cables or the proximity of your computer to your work surface. This might seem obvious as you read it, but thinking through all your work surface management options ahead of time is the key here.

IDE

Every developer has her favorite editor. I’ve used several over the years and my current IDE - integrated development environment - is Visual Studio Code, or VS Code.

If you use a different IDE and want to make a change, read on. If you’re happy with your existing editor, skip this section.

To install VS Code, download it from https://code.visualstudio.com/download and follow the usual process. Once it’s installed, come back here.

Now that VS Code is installed, you’ll want to grab a few extensions that will make your coding a lot easier & faster.

Extensions

As I write this post, a search for VS Code extensions returns over a 1,000,000 results. This is a topic that’s widely covered, in great technical detail, by many experienced developers. I’ll add here what’s important to me. I’m sure you’ll decide to add more extensions that address your needs.

Themes

The very first extension I install when setting up a new VS Code environment isn’t a development helper - it’s a theme. I don’t like the default VS Code theme. Since I’m going to be staring at that editor for potentially hours at a time while developing, I change it to something that’s more visually appealing to me.

Themes can be selected and installed by going to Settings | Themes | Color Themes. Select the theme name of interest and it will automatically load into your workspace. Try a few until you find one that suits your tastes. You can always change this later so experiment unti you find the right one. I tend to like the light themes best.

Live Server

The next extension I install is one I use nearly every time I code - Live Server by Ritwick Dey. This extension provides a local development server within VS Code that allows you to preview pages.

Follow the installation instructions here: https://ritwickdey.github.io/vscode-live-server/

Once installed, you’ll see a Go Live text control button in the lower right of your VS Code window. Click that to launch the live server on http://127.0.0.1:5500 (you can change the default port in the settings) and it’s ready to use.

Simple Browser

An amazing compliment to Live Server is VS Code’s built-in Simple Browser command. This allows you to view changes to the code you make in the editor in one panel live inside a browser in an adjacent panel, all inside VS Code. No external browser is required.

To set this up, open up View | Command Palette. In the search box that is at the top of that panel, type ‘Simple Browser’. Click ‘Simple Browser: Show’ when it appears in that window. A new text box appears that allows you to enter a URL. This is where you type in ‘http://127.0.0.1:5500’ and press Enter.

In order for this to be most effective, open a second panel by clicking the Split Editor control at the top right corner of your workspace window. You can choose between opening your new panel to the right or bottom of the existing workspace panel. Depending on what was open when you launched the Simple Browser, you may need to drag the Live Server preview tab - the Simple Browser tab - over to the just-opened new panel.

The pages rendered in Simple Browser will be whatever’s in the root of your open VS Code workspace structure. If you have an index.html at the root, it will be rendered & any change you make to it in the editor panel will reload live.

You now have a real web server & a real browser providing live reloads of any changes you make in the editor immediately adjacent in the workspace. This is very powerful & is a huge timesaver.

Source Control

When I invented hosted source control in the spring of 1999, CVS was my repository manager of choice and what drove my service Freepository. Today, I use Gitlab Community Edition installed on my iMac.

See https://packages.gitlab.com/gitlab/gitlab-ce

I do not currently expose my Gitlab server to the internet because attackers were constantly trying to break into it when I last had it online. It’s a nuisance. Instead, I simply work in a clone and frequently push to my repo. I have used both 2FA and personal access tokens in the past. They work well and should be considered a secure approach to accessing Gitlab over the internet.

I do not and will not use Github for source control. There are too many ways for repos hosted there to become compromised, including by mistakes made by Github team members.

To connect your Gitlab repository to VS Code, click the Source Control ‘branch’ icon in the left panel of the workspace. From there, you’ll have a couple options. If the existing folder structure is not already part of a git repository, you can initialize one with that code. You can also push directly to an existing repo from here.

The easier method is to setup a new project in Gitlab. This will provide step-by-step instructions for you to initialize the repository inside the local folder, i.e. the files you’re working on, and then push it to the repo in the just-created project. Once that’s complete, close VS Code and reopen that project folder in VS Code. VS Code will now detect that it’s attached to your Gitlab project’s repo and you’ll be able to perform source control actions directly in the workspace by clicking the previously mentioned Source Control icon.

Up Next

In my next post, I’ll cover setting up node.js - installing nvm, using it to load the node binaries & how to install & use node modules.