Web Development with

Node.js, Wrangler,
GitHub & Pages.dev

A Complete Step-by-Step Guide
02

What We'll Cover

Foundation

  • Introduction to Node.js
  • Installing & Setting Up Node
  • Understanding Wrangler
  • GitHub Basics
  • Deploying with Pages.dev

Practice & Resources

  • Version Control with Git
  • Project Deployment Steps
  • Best Practices
  • Helpful Resources
  • Getting Help & Community
03

What is Node.js?

Node.js is a JavaScript runtime built on Chrome's V8 engine that lets you run JavaScript on the server side.

Server-Side JS

Run JavaScript outside browsers

Fast & Scalable

Build high-performance applications

NPM Ecosystem

Access millions of packages

04 Step 1

Installing Node.js

Visit nodejs.org

  1. Open your web browser
  2. Navigate to https://nodejs.org
  3. Choose the LTS (Long Term Support) version
  4. Download the installer for your operating system

Pro Tip

Always choose LTS version for stability and long-term support!

05 Step 2

Installing Node.js

Run the Installer

  1. Double-click the downloaded installer file
  2. Follow the installation wizard
  3. Accept the license agreement
  4. Keep default settings (recommended)
  5. Click 'Install' and wait for completion
06 Step 3

Verifying Installation

Open Terminal/Command Prompt

  • Windows: Press Win + R, type 'cmd', press Enter
  • Mac: Press Cmd + Space, type 'terminal'
  • Linux: Press Ctrl + Alt + T

Run These Commands

node --version
npm --version

You should see version numbers for both!

07

What is Wrangler?

Wrangler is Cloudflare's command-line tool for managing and deploying Workers and Pages applications.

Build & Test

Develop locally before deploying

Deploy

Push code to Cloudflare's edge

Manage

Monitor and update applications

08

Installing Wrangler

Installation Command

Open your terminal and run:

npm install -g wrangler

What's happening?

  • The -g flag installs Wrangler globally
  • You can now use 'wrangler' commands anywhere
  • Verify with: wrangler --version

Pro Tip

If you get permission errors, try running with administrator privileges!

09

Connecting Wrangler to Cloudflare

Step 1: Login

wrangler login

This opens your browser for authentication

Step 2: Authorize

  1. Browser opens automatically
  2. Sign in to your Cloudflare account
  3. Click 'Authorize Wrangler'
  4. Return to terminal - you're connected!
10

What is GitHub?

Version Control & Collaboration Platform

A platform for hosting and collaborating on code using Git version control

Version Control

Track changes over time

Collaboration

Work with teams globally

Code Hosting

Store code in the cloud

11

Creating a GitHub Account

Sign Up Steps

  1. Visit https://github.com
  2. Click 'Sign Up' in the top right corner
  3. Enter your email address
  4. Create a strong password
  5. Choose a unique username
  6. Verify your account via email

Security First!

Enable two-factor authentication (2FA) for extra security

12

Installing Git

Download Git

  • Visit https://git-scm.com
  • Click 'Download for [Your OS]'
  • Run the installer
  • Use default settings

Verify Installation

git --version

You should see the Git version number

13

Configuring Git

Set Your Identity

Configure your name:

git config --global user.name "Your Name"

Configure your email:

git config --global user.email "your.email@example.com"

Important!

Use the same email address as your GitHub account

14

Creating a GitHub Repository

  1. Click the + icon in top right of GitHub
  2. Select 'New repository'
  3. Enter a repository name (e.g., 'my-website')
  4. Add a description (optional)
  5. Choose Public or Private /
  6. Check 'Add a README file'
  7. Click 'Create repository'
15

Cloning Your Repository

Get the Repository URL

  1. Go to your repository on GitHub
  2. Click the green 'Code' button
  3. Copy the HTTPS URL

Clone to Your Computer

Open terminal and run:

git clone [URL]

Replace [URL] with the copied URL

16

What is Cloudflare Pages?

Lightning-Fast Deployment Platform

Deploy static websites and full-stack applications at the edge

⚡ Fast

Global CDN distribution

🔄 Auto Deploy

Deploys from GitHub automatically

💰 Free

Generous free tier

17

Connecting Pages to GitHub

  1. Go to https://pages.cloudflare.com
  2. Sign in with your Cloudflare account
  3. Click 'Create a project'
  4. Choose 'Connect to Git'
  5. Authorize Cloudflare to access GitHub
  6. Select your repository
  7. Click 'Begin setup'
18

Configuring Build Settings

Common Frameworks

  • React: npm run build → build/
  • Vue: npm run build → dist/
  • Next.js: Auto-detected

Static HTML Site

Build command: (leave empty)

Build output: /

19

Deploying Your Site

Save and Deploy! 🚀

  1. Review your settings
  2. Click 'Save and Deploy'
  3. Wait for the build to complete (usually 1-3 minutes)
  4. Your site is live! 🎉

Congratulations!

Your website is now live on the internet!

20

Git Workflow Basics

1. Add Changes

git add .

Stages all changes

2. Commit

git commit -m "message"

Saves changes locally

3. Push

git push

Uploads to GitHub

21

Making Updates to Your Site

The Update Cycle

  1. Make changes to your files locally
  2. Stage changes: git add .
  3. Commit: git commit -m "description"
  4. Push to GitHub: git push
  5. Pages.dev automatically rebuilds and deploys! ⚡

It's Magic!

Every push triggers an automatic deployment. No manual work needed!

22

Direct Deploy with Wrangler

Quick Deploy Command

For static sites:

wrangler pages deploy [directory]

Example:

wrangler pages deploy ./dist

When to use?

Perfect for quick deployments without committing to Git

Best Practice

Use Git workflow for production, Wrangler for testing

23

Best Practices

Git Commits

  • Write clear commit messages
  • Commit often, push regularly
  • Use present tense
  • Be descriptive but concise

Project Organization

  • Keep a clean folder structure
  • Use .gitignore for node_modules
  • Add a README.md file
  • Document your code
24

Frontend Resources

Webflow Made in Webflow

Inspiration gallery of beautiful websites

webflow.com/made-in-webflow/front-end

CSS Grid Generator

Visual CSS Grid layout tool

cssgrid-generator.netlify.app

CSS Grid Generator IO

Another great grid tool with templates

cssgridgenerator.io

Color Hunt

Beautiful color palette inspiration

colorhunt.co
25

More Learning Resources

MDN Web Docs

Comprehensive web development documentation

developer.mozilla.org

freeCodeCamp

Free interactive coding tutorials

freecodecamp.org

CSS-Tricks

Guides, tutorials, and tips for CSS

css-tricks.com

W3Schools

Tutorials and references for web technologies

w3schools.com
26

Official Documentation

Node.js Documentation

Official Node.js guides and API documentation

nodejs.org/docs

Cloudflare Docs

Wrangler and Pages documentation

developers.cloudflare.com

GitHub Docs

Complete GitHub and Git guides

docs.github.com

NPM Documentation

Package manager reference

docs.npmjs.com
27

Community & Help

Stack Overflow

Q&A for programming problems

stackoverflow.com

Dev.to

Developer community and articles

dev.to

Discord Communities

Real-time help from developers

Search for tech-specific servers

GitHub Discussions

Project-specific help forums

Check repo's Discussions tab
28

Troubleshooting Tips

Common Issues

  • Node not recognized?
    Restart terminal after install
  • Git push rejected?
    Pull changes first: git pull
  • Build failing?
    Check build command and output folder

Quick Fixes

  • Clear cache: npm cache clean --force
  • Reinstall: Delete node_modules, run npm install
  • Check versions: node -v, npm -v
29

Quick Command Reference

Git Commands

git add .
git commit -m 'message'
git push
git pull
git status

Node & Wrangler

node --version
npm install [package]
wrangler login
wrangler pages deploy

You're Ready to Build!

Start creating amazing web projects

Happy Coding! 🚀

1 / 30
← Previous | → Next | Home First | End Last | ? Toggle Help