Build a changelog viewer for Git repos

To build a changelog viewer for Git repositories, you can use a combination of tools and libraries to automate the extraction of commit history and display it in a user-friendly way. Below is an outline of how to build a changelog viewer for a Git repository in a web application using Node.js, Express, and Git-related libraries.

Steps:

Set up the Project:
- Create a new directory for your project.
- Initialize a new Node.js project with npm init.
- Install necessary dependencies:
```
bash
npm install express simple-git ejs
```
- express will be used to serve the web application.
- simple-git is a simple Node.js interface for Git to interact with repositories.
- ejs is a templating engine for rendering views.

Create Project Structure:

pgsql
changelog-viewer/
├── public/
│   └── style.css
├── views/
│   └── index.ejs
├── app.js
└── .git/

app.js – Setting Up the Server and Git Interaction:

This is the core of your application. It will use the simple-git library to interact with the Git repository and fetch the commit history.

js
const express = require('express');
const simpleGit = require('simple-git');
const path = require('path');
const app = express();

const git = simpleGit(); // Initialize simple-git for current repository

// Serve static files like CSS
app.use(express.static(path.join(__dirname, 'public')));

// Set the view engine to EJS
app.set('view engine', 'ejs');

// Route for the home page
app.get('/', async (req, res) => {
  try {
    // Get the log of commits from the Git repository
    const log = await git.log();

    // Prepare commit data for rendering
    const commits = log.all.map(commit => ({
      hash: commit.hash,
      date: commit.date,
      message: commit.message,
      author: commit.author_name
    }));

    // Render the changelog view
    res.render('index', { commits });
  } catch (error) {
    console.error('Error fetching Git log:', error);
    res.status(500).send('Internal Server Error');
  }
});

// Start the server
const port = process.env.PORT || 3000;
app.listen(port, () => {
  console.log(`Changelog viewer running at http://localhost:${port}`);
});

index.ejs – Displaying the Changelog:

The EJS file will iterate over the commit data passed from the backend and display the changelog.

html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Changelog Viewer</title>
  <link rel="stylesheet" href="/style.css">
</head>
<body>
  <div class="container">
    <h1>Changelog</h1>
    <ul class="changelog">
      <% commits.forEach(commit => { %>
        <li class="commit">
          <div class="commit-header">
            <span class="author"><%= commit.author %></span>
            <span class="date"><%= commit.date %></span>
          </div>
          <div class="commit-message">
            <strong><%= commit.message %></strong>
          </div>
          <div class="commit-hash">
            <small><%= commit.hash %></small>
          </div>
        </li>
      <% }) %>
    </ul>
  </div>
</body>
</html>

style.css – Basic Styling for the Changelog:

Create a simple CSS file to style the changelog viewer.

css
body {
  font-family: Arial, sans-serif;
  background-color: #f9f9f9;
  margin: 0;
  padding: 0;
}

.container {
  width: 80%;
  margin: 0 auto;
  padding: 20px;
  background-color: #fff;
  border-radius: 8px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

h1 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 2em;
}

.changelog {
  list-style-type: none;
  padding: 0;
}

.commit {
  border-bottom: 1px solid #ddd;
  padding: 15px 0;
}

.commit-header {
  display: flex;
  justify-content: space-between;
  font-size: 0.9em;
  color: #555;
}

.commit-message {
  margin-top: 10px;
  font-size: 1.1em;
}

.commit-hash {
  margin-top: 5px;
  font-size: 0.85em;
  color: #777;
}

.commit-header .author {
  font-weight: bold;
}

.commit-header .date {
  font-style: italic;
}

Running the Application:

To start the server and view the changelog, run the following command in your terminal:
```
bash
node app.js
```
Now, go to http://localhost:3000 in your browser to view the changelog of the Git repository.

Customizing the Changelog Viewer:

Filtering Commits: You can add query parameters to filter commits by date, author, or message.
Commit Details: You can also link each commit hash to a detailed page that shows the diffs and changes made in that commit.
Pagination: If the repository has a long commit history, you might want to paginate the changelog to avoid long load times.
Authentication: If the repository is private, you can add authentication to access the changelog data.

Conclusion:

This basic changelog viewer setup provides a clean, simple way to display Git commit history on a web interface. You can customize it further based on the specific needs of your project, such as filtering commits, adding detailed commit views, or integrating with other services.

Share this Page your favorite way: Click any app below to share.

See all the ways to share this page

Steps:

Customizing the Changelog Viewer:

Conclusion:

Check Out Our Newest Posts we wrote about

Why your ML system design must support partial retraining

Why your ML pipeline must detect missing or stale features

Why your ML feedback loop must consider label quality

Why your ML deployment plan must include fallback logic