Build a Minimal Node.js Express Server with Vanilla JavaScript Front‑End
Computer Science
Build a Minimal Node.js Express Server with Vanilla JavaScript Front‑End
Build a Minimal Node.js Express Server with Vanilla JavaScript Front‑End
A focused, hands‑on course that takes your existing HTML/CSS knowledge and guides you to a working Express server that serves static pages, renders dynamic content with EJS, and provides a tiny JSON API consumed by vanilla JavaScript.
What you learn by building this
- Set up a Node.js project and install Express
- Serve static HTML and CSS files from an Express server
- Add server‑side rendering using the EJS template engine
- Create a simple JSON API endpoint
- Fetch API data with vanilla JavaScript and update the DOM
Learning Journey
Project Setup & Basic Express Server
2 lessonsCreate the Node environment, initialise npm, and launch a minimal Express server that replies to a request.
Serve Static Assets and Reuse Your HTML/CSS
2 lessonsConfigure Express to serve static files and bring in the HTML/CSS you already built.
Add Server‑Side Rendering with EJS
2 lessonsIntroduce a lightweight template engine to render dynamic data from the server.
Create a Tiny API and Consume It with Vanilla JS
3 lessonsExpose JSON data via an endpoint and fetch it from the front‑end without any frameworks.
Public lesson
Install Node.js and initialise the project
You’ve already built a semantic HTML project and practiced extracting React components. Now you’ll prepare the workspace where the React app will live.
Tasks
Open a terminal and run:
node --version
npm --version
node --version
npm --version
You should see two version numbers, such as v22.x.x and 10.x.x.
If either command says it is not recognized or cannot be found, install the current LTS version of Node.js from nodejs.org, then close and reopen your terminal and run the two checks again.
Do not continue until both commands show version numbers.
Tasks
Move to the place where you keep your coding projects. Then create and enter a folder for this app:
mkdir react-fullstack-app
cd react-fullstack-app
mkdir react-fullstack-app
cd react-fullstack-app
Tasks
Check that you are inside the new folder:
pwd
pwd
On Windows PowerShell, use this instead if pwd does not work:
Get-Location
Get-Location
The displayed path should end with react-fullstack-app.
Tasks
Run:
npm init -y
npm init -y
This creates the first project file, package.json.
Tasks
Open that file in your editor and check that it contains project information such as:
- a
"name"based on the folder - a
"version" - a
"scripts"section - a
"license"
At this point, you have an npm project, but no React code or dependencies yet.
Tasks
Run:
git --version
git --version
You should see a Git version number.
If Git is not installed, install it from git-scm.com, reopen the terminal, and run the check again.
Tasks
Now initialize Git in the project folder:
git init
git init
Check what Git sees:
git status
git status
You should see package.json listed as an untracked file.
Git cannot commit a physically empty folder, so package.json is the small foundation we commit now.
Tasks
Run:
git add package.json
git commit -m "Initialize project"
git add package.json
git commit -m "Initialize project"
If Git asks for your name and email, configure them with your own details, then repeat the commit:
git config --global user.name "Your Name"
git config --global user.email "you@example.com"
git config --global user.name "Your Name"
git config --global user.email "you@example.com"
Replace both values before running those commands.
Tasks
Run:
git status
git log -1 --oneline
git status
git log -1 --oneline
Check for both results:
git statussays the working tree is clean.git logshows a commit whose message isInitialize project.
Your project is ready when the folder contains package.json and Git reports a clean working tree.
Course Outline
4 modules · 9 lessons
Project Setup & Basic Express Server
Serve Static Assets and Reuse Your HTML/CSS
Add Server‑Side Rendering with EJS
Create a Tiny API and Consume It with Vanilla JS
Learn by building your own version.
Remix this public project to open the workspace, follow the guided build, and let the AI mentor teach you through the work instead of doing it for you.