To wrap up everything Iโve learned about Express.js, EJS, and middleware, I decided to build a mini project: a blog site! This isnโt your typical blog โ thereโs no database involved (yet!), so posts disappear once the server is restarted. But it was a fantastic way to apply what Iโve been learning, and I picked up a few new things along the way. ๐
Project Overview
The goal of this project was to create a blog web application using Node.js, Express.js, and EJS. This app allows users to create, view, update, and delete blog posts. Since I didnโt focus on styling this time (so please donโt judge me ๐ ), my main effort went into making the functionality work.
Hereโs a quick breakdown of the features:
- Post Creation: Users can create new blog posts.
- Post Viewing: The home page displays all created posts.
- Post Update/Delete: Users can edit or delete any existing post.
How I Built the Blog Project
Letโs dive into the process of building this project:
1. Project Initialization
I started by setting up a basic Node.js project:
- Initialized the project with
npm init
. - Installed the necessary dependencies:
express
,ejs
, andbody-parser
.
2. Project Structure
Hereโs the project structure I used:
my-blog
โโโ public
โ โโโ styles.css # (no fancy styles here, just plain functionality)
โโโ views
โ โโโ create.ejs # Form for creating new posts
โ โโโ index.ejs # Displays all posts
โโโ app.js # Main application file
โโโ package.json
3. Server Setup
In app.js
, I set up the Express server and configured EJS as the templating engine:
const express = require('express');
const path = require('path');
const app = express();
// Middleware for parsing form data
app.use(express.urlencoded({ extended: true }));
app.use(express.json());
app.use(express.static(path.join(path.dirname(''), 'public')));
// Set EJS as the templating engine
app.set('view engine', 'ejs');
app.set('views', path.join(path.dirname(''), 'views'));
4. Creating Routes
Next, I set up the following routes to handle the main functionality:
-
Home Route (
/
): Displays all blog posts. -
Create Route (
/create
): Renders the form for adding a new blog post. -
Delete Route (
/delete
): Removes a specific blog post. -
Update Route (
/update
): Allows users to update a specific post.
Hereโs how the routes work:
let posts = [];
// Display all posts
app.get('/', (req, res) => {
res.render('index', { posts });
});
// Show form to create a post
app.get('/create', (req, res) => {
res.render('create');
});
// Add a new post
app.post('/create', (req, res) => {
const { title, content } = req.body;
posts.push({ title, content });
res.redirect('/');
});
// Delete a post
app.post('/delete', (req, res) => {
const { index } = req.body;
posts.splice(index, 1); // Removes the post at the specified index
res.redirect('/');
});
// Update an existing post
app.post('/update', (req, res) => {
const { index, title, content } = req.body;
posts[index] = { title, content }; // Updates the post
res.redirect('/');
});
What I Learned from This Project
- Setting EJS as the Templating Engine: I figured out how to configure Express to use EJS for all my templates:
app.set('view engine', 'ejs');
app.set('views', path.join(path.dirname(''), 'views'));
This tells Express to automatically look for .ejs
files inside the views
folder whenever I render a template.
-
Using
splice()
for Array Manipulation: Thesplice()
function became my best friend for updating and deleting posts from theposts
array. Hereโs how I used it to remove a post at a specific index:
posts.splice(index, 1);
Itโs super handy when working with arrays in JavaScript, especially when you need to remove or replace elements.
Challenges and Fun Moments
-
Styling? Whatโs That?
- As I mentioned earlier, I put zero effort into the styling. The focus here was on making everything work! So, if you look at the code, you wonโt see a beautifully styled site. But functionality first, right? ๐
-
Figuring Out Route Logic:
- At first, I struggled a bit with setting up the update and delete routes. But after a few tries , I got it working .
-
Form Parsing:
- Setting up middleware to handle form submissions was something new for me. Using
body-parser
made handling form data a breeze. It parses both URL-encoded and JSON data.
- Setting up middleware to handle form submissions was something new for me. Using
The Final Result
The blog app is a simple yet functional tool that allows users to:
- Create new blog posts,
- View all posts on the home page,
- Edit or delete posts as needed.
Since thereโs no database, all the posts are stored in-memory, which means they disappear once the server is restarted. Itโs a good starting point, and later, Iโll add a database to make the posts persist!
You can check out the full code here: GitHub - Blog Project
Wrapping Up
This project helped me solidify my understanding of Express.js, EJS, and middleware. Itโs not a fancy project, but it was a fun way to put my learnings into practice and create something functional.
Here are some key takeaways:
- Setting up EJS as a templating engine is easy and makes dynamic content generation straightforward.
- Using routes to handle create, update, and delete operations was a great way to learn about HTTP methods.
-
splice()
is a handy function for manipulating arrays when working with posts or data.
If you're also learning Express, EJS, or middleware, I highly recommend trying out small projects like this. Youโll learn a ton by building something practical!
Whatโs Next?
- Iโll probably add a database like MongoDB next, so the blog posts persist between sessions. But for now, Iโm happy with what Iโve built.
If you have any questions or thoughts, feel free to drop a comment below! Letโs keep learning and building together! ๐