Express Static-Site Tutorial (techelkan EP 01)

518 words, 3 min read
Last updated on

Express Static-Site Tutorial

Originally written as the “EP 01 / The making of techelkan” video script. Kept here as a straight reference for the first Node + Express setup.

Why a personal site?

  • I want to learn how to build web apps like Reddit or Google Calendar.
  • I don’t have any experience building web apps or even web sites.
  • I could use a no-code website but I’m curious to understand the code that makes up the magic.
  • Understanding the code will give better control over functionality later.
  • A personal website will likely be a lifelong build, so set objectives:
    • An awesome landing page
    • A spot to put projects
    • An about-me section
    • A cool button (see huly.io for inspiration)

Lesson learned the hard way: got stuck for an hour trying to run server.js because I hadn’t saved the file in VS Code. Turn on autosave, or save before you run.

Glossary

TermDefinition
Node.jsLets you run JS outside the browser, on your computer. JS normally only works inside the web browser.
npmNode Package Manager — like an app store for developers with tools & libraries.
ToolsSomething that helps you build/run code (e.g., Prettier is a code formatter).
Library / PackageA collection of pre-written code (e.g., Express is a library of server code).
ExpressHelps you create a web server or API easily.
DependenciesTools/libraries your project relies on to work. If you’re using Express, it’s a dependency. Listed in package.json. If someone downloads your project and runs npm install, it installs all the dependencies for them. (Like mods in Minecraft.)
BASH (Bourne Again SHell)A type of command-line shell. You type commands in text instead of clicking with a mouse. Use it to make folders, find folders, run scripts. On Mac it’s the Terminal. On Windows you have to download Git Bash.

1. Install core tools

  1. Node.js (macOS installer) — then check node and npm versions in terminal.
  2. VS Code + essential extensions: ESLint, Prettier, Live Server.
  3. Git (Mac has it by default).

2. Create project folders

In the terminal:

mkdir elkan-ai     # creates a folder elkan-ai
cd elkan-ai        # cd into the folder
npm init -y        # creates a package.json
npm install Express   # my package for web development

In VS Code, create these folders.

Original page had a screenshot here.

File / FolderDescription
node_modulesThe folder with installed dependencies.
public/Holds my frontend files — HTML, CSS, JS.
index.htmlMain webpage loaded when someone visits the app.
style.cssStylesheet to make my HTML look cool.
script.jsJS code for interactivity on the page.
.gitignoreTells Git to ignore certain files (like node_modules).
package.jsonThe project’s brain — holds essential info about it. If you added Express, it shows up here. Someone wanting to work on my project can run npm install and the listed dependencies get installed into node_modules.
package-lock.jsonAuto-generated. Locks the exact versions of dependencies.
server.jsBackend server (using Express).

3. Write code into server.js (and SAVE)

const express = require("express")
const app = express()
const port = 3000
app.use(express.static("public"))
app.listen(port, () => { console.log(`🌐 Server running at http://localhost:${port}`); });

4. Run the server

node server.js
# It should show: 🌐 Server running at http://localhost:3000

See next