HowTo-Blog
← Back to Blog
JavaScript & Node.js: Beginner's Blog Tutorial
JavaScript & Node.js

JavaScript & Node.js: Beginner's Blog Tutorial

28 January 202642 min read8234 words
Tags#JavaScript & Node.js

JavaScript & Node.js: Beginner's Blog Tutorial

JavaScript runs everywhere: browsers, servers, mobile apps, even desktop. Node.js brings JS to the backend, letting you build full-stack apps with one language.

Perfect for frontend devs adding backend skills or total beginners.

Why JavaScript & Node.js in 2026?

  • One language: Frontend + backend = faster hiring

  • Jobs: $110K+ average salary

  • Ecosystem: npm has 2M+ packages

  • Performance: Node.js powers Netflix, Uber, PayPal

Setup (5 Minutes)

  1. Install Node.js: nodejs.org (LTS version 24.x)

  2. Verify: node -v + npm -v

  3. New project:

    bash
    mkdir my-api && cd my-api
npm init -y
npm install express

JavaScript Essentials (Practice in Console)

Open browser → F12 → Console:

javascript
// Modern ES6+ syntax
const users = [
  { id: 1, name: "Sara", email: "sara@test.com" }
];

// Arrow functions
const getUser = id => users.find(u => u.id === id);
console.log(getUser(1)); // { id: 1, name: "Sara", ... }

// Destructuring
const { name, email } = getUser(1);
console.log(name); // "Sara"

// Async/await
async function fetchData() {
  const response = await fetch('/api/users');
  const data = await response.json();
  return data;
}

Node.js Server (10 Lines)

server.js:

javascript
const express = require('express');
const app = express();
app.use(express.json());

const users = [{ id: 1, name: 'Sara' }];

// GET /api/users
app.get('/api/users', (req, res) => res.json(users));

// GET /api/users/1  
app.get('/api/users/:id', (req, res) => {
  const user = users.find(u => u.id === +req.params.id);
  user ? res.json(user) : res.status(404).json({ error: 'Not found' });
});

// POST /api/users
app.post('/api/users', (req, res) => {
  const newUser = { id: users.length + 1, ...req.body };
  users.push(newUser);
  res.status(201).json(newUser);
});

app.listen(3000, () => console.log('Server: localhost:3000'));

Test it:

bash
node server.js
curl http://localhost:3000/api/users
curl -X POST -H "Content-Type: application/json" -d '{"name":"Mike"}' http://localhost:3000/api/users

Project: Todo API with SQLite

Install: npm install express sqlite3 cors

Complete app (app.js):

javascript
const express = require('express');
const sqlite3 = require('sqlite3').verbose();
const cors = require('cors');

const app = express();
app.use(cors());
app.use(express.json());

const db = new sqlite3.Database(':memory:');
db.run(`CREATE TABLE todos (id INTEGER PRIMARY KEY, text TEXT, done BOOLEAN)`);

app.get('/api/todos', (req, res) => {
  db.all('SELECT * FROM todos', (err, rows) => res.json(rows));
});

app.post('/api/todos', (req, res) => {
  db.run('INSERT INTO todos (text, done) VALUES (?, 0)', [req.body.text], function(err) {
    res.json({ id: this.lastID, text: req.body.text, done: false });
  });
});

app.listen(3000, () => console.log('Todo API ready!'));

Test: Visit localhost:3000/api/todos in browser!

Essential Patterns

Middleware chain:

javascript
app.use(express.json());           // Parse JSON
app.use(cors());                   // Enable frontend calls
app.use('/api', authMiddleware);   // Protect routes

Error handling:

javascript
app.use((err, req, res, next) => {
  res.status(500).json({ error: err.message });
});

Environment variables:

bash
# .env
PORT=3000
DB_PATH=./data.db

javascript
require('dotenv').config();
app.listen(process.env.PORT || 3000);

File Uploads & Static Files

javascript
const multer = require('multer');
const upload = multer({ dest: 'uploads/' });

app.post('/api/upload', upload.single('file'), (req, res) => {
  res.json({ file: req.file, message: 'Upload success' });
});

app.use(express.static('public')); // Serve images/CSS

Production Deployment (Render.com)

Procfile:

text
web: node app.js

package.json:

json
{
  "scripts": { "start": "node app.js" }
}

Deploy:

  1. render.com → New Web Service → Connect GitHub

  2. Build: npm install | Start: npm start

  3. Live URL: yourapp.onrender.com

Common Errors & Solutions

ErrorFix
Cannot GET /apiDefine the route: app.get('/api', ...)
listen EADDRINUSEChange port: app.listen(3001)
Module not foundnpm install package-name
CORS errorAdd app.use(cors())

Code Templates

Express boilerplate:

javascript
const express = require('express');
const app = express();
app.use(express.json());
app.use(cors());

app.get('/', (req, res) => res.json({ status: 'OK' }));
app.listen(3000);

CRUD routes:

javascript
// GET /api/items
app.get('/api/items', (req, res) => { /* list */ });

// GET /api/items/1  
app.get('/api/items/:id', (req, res) => { /* one */ });

// POST /api/items
app.post('/api/items', (req, res) => { /* create */ });

// PUT /api/items/1
app.put('/api/items/:id', (req, res) => { /* update */ });

// DELETE /api/items/1
app.delete('/api/items/:id', (req, res) => { /* delete */ });

Next Steps & Challenges

  1. Add authentication: npm install jsonwebtoken

  2. Frontend: React + fetch('/api/todos')

  3. Challenge: Build URL shortener API

  4. Deploy: Share your live demo link via our contact page!

Quick Reference

bash
npm install express cors sqlite3 dotenv multer
npm start
# Test: curl http://localhost:3000/api/todos

Portfolio project done: Copy → code → deploy → LinkedIn. 2 hours total.

Master these patterns → build anything. Share your deployed API URL via our contact page! 🚀

Comments

No comments yet. Be the first to share your thoughts.

Menu
JavaScript & Node.js: Beginner's Blog Tutorial