How to Set Up a Web Development Environment from Scratch?
Building websites and web applications requires setting up a development environment on your local computer. This allows you to code and test projects before deploying them live on the internet.
While
some online code playgrounds exist, having a local setup allows for more
flexibility, control and closely matches a real production environment. It also
lets you work offline.
This
comprehensive guide takes you through setting up a modern web dev environment
on a Windows, Linux or Mac OS computer step-by-step from scratch. We also
include tips for web development
resources and
customization.
Why Set Up a Local Web Dev Environment?
Here are
some key reasons you should configure a
local web development environment:
● Work on projects offline once environment is
set up
● Mimic actual hosting environment more closely
● Ability to use latest/experimental technology
stacks
● Customize setup to exact requirements
● Test different versions of libraries,
databases, OS, servers etc
● More control over the full technology stack
● Debug projects easily before deploying to live
servers
● Set up automatic workflows to improve
productivity
● Learn fundamentals of how fullstack projects
work
While
online code playgrounds are great for simple experiments, a local setup is
necessary for building full-featured apps.
Core Components of a Web Dev Environment
A
typical modern web development environment consists of:
- A text editor to write code
- Libraries & frameworks like React or Laravel
- Tools to automate workflows like Webpack or Gulp
- A web server, database & programming language backend
- Runtime environments like Node.js or PHP engine
- Terminal for command line interface & tools
- Source code management with Git &
hosting services like GitHub
Here's a
diagram showing how these different components interact:
While
getting comfortable with these takes time, having the core environment setup
makes it much easier.
Next,
let's go through setting these components up on macOS, Windows 10 and Linux.
Step 1 - Install Fundamental Developer Tools
Every
operating system comes with a command line interface and text editors. But
we'll install more advanced replacements:
Terminal Emulator
The terminal
allows you to access the command line interface (CLI) and install additional
tools quickly.
Windows
● PowerShell - Included by default or download latest version
● Windows
Terminal - Enhanced
interface and customization options
● Cmder - Portable console emulator replacement
MacOS/Linux
● Included terminal
app is sufficient
Options
● Hyper - Cross-platform and highly customizable
● Git
Bash (Windows) - Provides Unix style CLI
Text Editor
Replace
default basic text editors with one suited for coding:
● Visual Studio Code ⭐ - Simple yet powerful editor
● Sublime Text
● Atom by GitHub - Hackable text editor
Enable
these essential extensions for best experience:
● ESLint - Linting utility for JavaScript
● Prettier - Code formatter for consistent style
● Live Server - Local development server with
live reload
● Debugger for Chrome - Debug JavaScript code in
Google Chrome
● Code Spell Checker - Catch typos and spelling
mistakes
● Bracket Pair Colorizer - Distinguish nested
brackets
Combined
with features like IntelliSense and built-in Git control, these make the
editing experience very powerful.
Step 2 - Install a Web Server Solution
To host
and serve web applications, a web/HTTP server software is required. We'll also
set up a database server to store and manage app data.
All Platforms
XAMPP provides Apache as web server along with MariaDB, PHP and other
components in one bundle that works cross-platform.
Alternative:
● Windows - WAMP has Apache, MySQL & PHP
● Linux - LAMP or LEMP stack
● Mac - MAMP
Install XAMPP From
Execute
the installer and use default options. Once installed, you can start/stop
servers easily.
The web
files go inside /xampp/htdocs
directory by default.
*Pro Tip - Having multiple independent XAMPP installs allows testing different
PHP versions.*
Enable HTTPS
For full-fledged
testing, enable HTTPS on localhost
using a generated SSL certificate.
On
Windows run these commands in XAMPP
Shell:
cd
c:\xampp\apache\bin
.\openssl.exe req
-utf8 -x509 -nodes -days 365 -newkey rsa:2048 -keyout my-key.key -out
my-cert.crt -config \xampp\apache\conf\openssl.cnf
Now open
C:\xampp\apache\conf\extra\httpd-ssl.conf
And
replace the sample paths with actual ones:
SSLCertificateFile
"C:/xampp/apache/my-cert.crt"
SSLCertificateKeyFile
"C:/xampp/apache/my-key.key"
You can
now access projects at https://localhost along with regular http.
Step 3 - Install a Programming Language
Implementation
The most
popular languages for web development are JavaScript,
PHP and Python. We'll install interpreters/compilers for these to execute
code locally:
JavaScript
An
implementation of the ECMAScript standard is required to parse JS code.
● Node.js - Also gives access to world's largest
repository of open source libraries on npm
● Enable Node.js support in XAMPP control panel
for server-side JS code
⬇
Download and install latest stable Node.js version ⬇
Modern
front-end (client-side) apps are written in JavaScript only. Back-end code runs
outside browser so alternative runtimes are used:
PHP
Already
enabled in XAMPP/WAMP bundles.
Can also
install different versions side-by-side:
Windows
● ⬇ PHP binaries from windows.php.net ⬇
● Unzip to custom folder like PHP8.0 or PHP7.4
Linux & Mac
● Use package manager i.e. apt, yum, dnf or brew
Python
Note - Required for backend/scripting use only
Windows
● ⬇ Download Python EXE installer ⬇
Mac & Linux
● Included by default or use package manager
Tip - Setup virtual environments to isolate package dependencies between
Python projects.
While
the above are most widespread, others like Ruby,
.NET, Go etc can also be utilized on modern web stacks.
Step 4 - Version Control with Git
Git is
the most popular open source distributed version control system. It can track
file changes, coordinate work and create backups.
Install Git
⬇
Download and install latest Git version ⬇
Verify
installation was successful by running:
$ git --version
# Git version 2.39
or higher
Graphical
clients for managing Git repositories provide a UI:
● GitHub
Desktop
● GitKraken
● Sourcetree
However
the command line allows full flexibility.
Create a GitHub Account
To store
code remotely and collaborate, create a
free account on GitHub
It
provides unlimited public & private repositories with version control,
wikis and issue tracking.
Step 5 - Install JavaScript Package Manager
npm (Node
Package Manager) allows installing useful JS libraries & tools from
https://npmjs.com
Over 1.5
million open source packages!
npm gets
installed automatically with Node.js. Verify by running:
$ npm -v
8.19.2
Example
usage - Initialize new project:
$ mkdir my-app
$ cd my-app
$ npm init
This
creates package.json to manage dependencies.
Now apps
can use popular libraries like:
$ npm install react
express mongoose axios
Other
JavaScript package managers include:
● Yarn by Facebook - Faster installs
● pnpm - More disk space efficient
Step 6 - Install Build Tools
While optional,
automation tools like task runners
streamline workflows by handling repetitive tasks:
● Bundle final assets like CSS, JS files
● Refresh browser automatically on changes
● Optimize images, SVGs, fonts etc
● Run test suites before deployment
● Update version control
This
saves precious developer time and catches errors early.
Some
popular task automation tools for JavaScript projects:
Webpack
Extremely
versatile bundler for all types of frontend and backend projects:
$ npm install
webpack webpack-cli -D
Complex
configurations can get overwhelming.
Parcel
🚀
Zero config builds with caching and fast performance. Great for starting out:
$ npm install
parcel-bundler -D
Gulp
Uses
code over configs for task flows:
$ npm install gulp
gulp-cli -D
All
build pipelines involve an initial learning investment. But the long term
productivity gains are worth it.
Comments
Post a Comment