A Beginner’s Guide: Setting Up Your Development Environment

“handheld tool lot” by Cesar Carlevarino Aragon on Unsplash

Introduction

This is a guide for configuring your local machine for general web development. This guide is useful for humans that are new to coding, anyone on the verge of entering a web development class, or any person or persons that have recently had their laptops stolen.

Scope

The guide will cover tools that all web coders will find useful, but the applicable languages include, but are not limited to HTML, CSS, and JavaScript. Windows, Mac and Linux users are serviced when possible.

Please comment below if you have any feedback or additional tools you’d like to see.

Editors

If you’re going to do any kind of development, you’re going to spend a lot of time in front of a text editor. There are many languages for coding on the web, but let’s focus on the big 3. HTML, CSS & JavaScript and setup our environment to manipulate them. Go ahead and check out these tools.

Visual Studio Code | Text Editor

Visual Studio Code (or VSCode) is the best editor out there in my non-humble opinion. Easy to use and free, what else do you need to know.

Visual Studio Code - Code Editing. Redefined

Extras:

1. I like the extensions: Rest Client, Code Spell Checker, Debugger for Chrome and Local History,
2. But I’ve also added a number of extensions from this article “Top JavaScript VSCode Extensions for Faster Development”; like Bracket Pair Colorizer and Indent Rainbow to name a few.

My editor with “Bracket Pair Colorizer” & “Indent Rainbow” Extensions for VSCode

3. When installing VSCode make sure to check BOTH of the Add “Open with Code” actions…; this makes opening VSCode easier from files and inside folders.

Honorable Mentions

• Sublime Texts is a great secondary editor worth downloading; for instance you can use it as a default editor for Git, and not have to do everything inside VSCode.
• Notepad++ is a great general purpose editor, like Sublime its worth downloading and adding to your toolbox. (Windows OS only)

Here is a good review on Codementor.io if you want to look at other opinions.

Version Control and Repository Manager

If you’re going to be programming anything worth using, you’re going to need these tools: a system to keep track of your code changes (version control) and a place to store your code (a repository manager, or repo manager).

Git | Version control

Git was created by the same dude that developed the Linux operating system, and it’s the best version control system available now. Setup your Git locally using the link below.

Git - Installing Git

GitHub | Repository Manager

GitHub is the market leader for Git repos and the best place to start sharing and storing your code.

Build software better, together

Extras:

1. Connect your local Git to your remote GitHub: You’ll want to have a secure connection between your local version control system and your remote repo. Watch this Video, or read the instructions here at GitHub

Honorable Mentions

• GitLab (Git Repository Manager) offers free and private repositories. GitHub has private repos as well, but you have to pay for them.

Here are some more ideas from DeployBot-blog and flow.ci

Server Environment and Package Manager

In order to build a full-stack application using JavaScript you’ll need a server-side JavaScript runtime. And you’ll probably want a package manager while you’re at it.

Node.js | Server Environment

Node.js is built on the the same JavaScript engine used by the Chrome browser. It can serve files and connect to your database using nothing but good ole JavaScript, or if you prefer, a scripting language that adheres to the ECMAScript Language Specification.

Download | Node.js

Package Manager: I’ve grouped server environments together with package managers because Node.js ships with npm, so I will discuss them here.

yarn | Package Manager

You have npm with your node.js download already , now go ahead and install yarn. Standard npm will be good enough to start with, but try yarn as at some point to see if you like it better, since its supposed to install libraries faster.

yarn

Also check out this npm-vs-yarn article if you want to learn more.

Database

If you need place to store your application data you might want to think about this newfangled invention called a database.

MySQL Community Server | RDBMS

This is the free relational database system that you should have in your toolbox.

MySQL :: Download MySQL Community Server

Extra:

1. MySQL can be a bit finicky to install and start, follow the instructions carefully and try not to be too clever with your password the first time you get going.
2. I recommend installing Server, Workbench and the shell/command-line tool at least.
3. The free database is licensed under the GNU GPL v2 license, so investigate your options before getting into the commercial space.

Install at minimum Workbench, Shell, Server

MongoDB Community Edition | NoSQL

Mongo is not only the name of a planet in the Flash Gordon movie, but also the name of a popular NoSQL (Not Only SQL) database - a document database to be exact. MongoDB can encode data in JavaScript Object Notation (JSON), so importing, exporting and manipulating data is somewhat more intuitive for JavaScript coders.

MongoDB Download Center

Extra:

1. There many use cases for both relational databases and the NoSQL systems. Read more here from The Geek Stuff, Stack Overflow, & sitepoint.
2. As always check out the licensing policy.

Cloud & Hosting Services

If you want to test a web application on the World Wide Web you’ll need to deploy it on a server that has access to the internet, right? Unless you want to mess around with port forwarding and all that jazz.

GitHub Pages | Static Site Hosting

If you’ve signed up for GitHub then all you have to do is enable this on your repository page. This is perfect for static websites.

What is GitHub Pages? - User Documentation

Heroku | PaaS for Dynamic Site Hosting

Heroku offers a free Platform as a Service (PaaS) where you can host a dynamic website. There are some limitations, but Heroku is still the best option for most web developers.

Create a free Heroku account and then follow the tutorial below to connect your local environment to your Heroku remote environment.

Getting Started on Heroku with Node.js | Heroku Dev Center

Extra:

1. Deploying to Heroku can be tricky, take your time and follow the instructions.

Honorable Mentions

• Amazon Web Services (AWS) is one of the largest cloud services provider on the planet, you might as well learn how to use it. There’s a free tier for their PaaS offering (Beanstalk), but some of the services (like EC2) are based on compute hours, so don’t run multiple instances simultaneously or use functionality without checking out the documentation.
• Google Cloud Platform (GCP) like AWS, this is a large cloud provider with a free tier for their PaaS offering (App Engine).

Community

The tech community is an open and supportive community. If you need help understanding a pesky error message or you need a free library to make your gadget bounce to and fro, the community is standing by to give you a virtual helping hand. Go and get involved in the these communities.

Stack Overflow | question-and-answer website

Don’t even ask me any questions. Just sign-up and get involved. Also check out the mother site Stack Exchange.

Quora | question-and-answer website

Another good site to assist and be assisted by the technical community, although Quora is more generic then Stack Overflow. By the way — I think its pronounced “Kwar-Ru”.

Command-line interfaces (for Windows OS)

Let’s be real. Anything tool is better than the stupid cmd command prompt.

Cmder.exe

1. Cmder | Console Emulator: the tabbed windows are convenient
2. Babun | Windows Shell

The Fat Old Daddy motto: If this fat old man can do it, so can you.

Leave a comment or suggestions