In this blog, we'll create a simple web app that fetches Wikipedia articles using Node.js. We'll use Express for the server, TypeScript for type safety, and Axios to make HTTP requests to the Wikipedia API. We'll also create a basic HTML page to display the fetched articles.
Step 1: Setting Up the Project
First, create a new directory for your project and navigate into it:
mkdir wikipedia-fetcher
cd wikipedia-fetcher
Initialize a new Node.js project:
npm init -y
Install the necessary dependencies:
npm install express axios
npm install --save-dev typescript @types/node @types/express ts-node
Create a tsconfig.json file in the root directory for TypeScript configuration:
{
"compilerOptions": {
"target": "ES6",
"module": "commonjs",
"outDir": "./dist",
"rootDir": "./src",
"strict": true,
"esModuleInterop": true
}
}
Step 2: Setting Up Express Server
Create a src directory and inside it, create an index.ts file:
In src/index.ts, set up a basic Express server:
import express from 'express';
import axios from 'axios';
const app = express();
const PORT = 3000;
app.use(express.static('public'));
app.get('/', (req, res) => {
res.sendFile(__dirname + '/public/index.html');
});
app.get('/api/wiki', async (req, res) => {
const { query } = req.query;
if (!query) {
return res.status(400).send('Query parameter is required');
}
try {
const response = await axios.get(`https://en.wikipedia.org/api/rest_v1/page/summary/${query}`);
res.json(response.data);
} catch (error) {
res.status(500).send('Error fetching Wikipedia article');
}
});
app.listen(PORT, () => {
console.log(`Server is running on http://localhost:${PORT}`);
});
Step 3: Creating the HTML Page
Create a public directory in the root directory and inside it, create an index.html file:
In public/index.html, add the following basic HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Wikipedia Article Fetcher</title>
</head>
<body>
<h1>Wikipedia Article Fetcher</h1>
<input type="text" id="searchQuery" placeholder="Enter search term">
<button onclick="fetchArticle()">Fetch Article</button>
<div id="articleContent">
<h2 id="articleTitle"></h2>
<p id="articleExtract"></p>
<p><strong>Last Updated:</strong> <span id="articleLastUpdated"></span></p>
<p><strong>Page ID:</strong> <span id="articlePageID"></span></p>
<p><strong>Length:</strong> <span id="articleLength"></span> characters</p>
<p><a id="desktopLink" href="" target="_blank">Read more on Wikipedia (Desktop)</a></p>
<p><a id="mobileLink" href="" target="_blank">Read more on Wikipedia (Mobile)</a></p>
</div>
<script>
async function fetchArticle() {
const query = document.getElementById('searchQuery').value;
const response = await fetch(`/api/wiki?query=${encodeURIComponent(query)}`);
const data = await response.json();
document.getElementById('articleTitle').innerText = data.title;
document.getElementById('articleExtract').innerText = data.extract;
document.getElementById('articleLastUpdated').innerText = new Date(data.last_updated).toLocaleString();
document.getElementById('articlePageID').innerText = data.pageid;
document.getElementById('articleLength').innerText = data.length;
document.getElementById('desktopLink').href = data.content_urls.desktop.page;
document.getElementById('mobileLink').href = data.content_urls.mobile.page;
}
</script>
</body>
</html>
Step 4: Running the Application
To run the application, add the following script to your package.json:
"scripts": {
"start": "ts-node src/index.ts"
}
Now, start the server:
npm start
Open your browser and navigate to http://localhost:3000. You should see a simple form where you can enter a search term to fetch Wikipedia articles.
Project Structure
wikipedia-fetcher/
├── node_modules/
├── public/
│ └── index.html
├── src/
│ └── index.ts
├── .gitignore
├── package.json
├── tsconfig.json
└── README.md
Conclusion
In this post, we learned how to fetch and display Wikipedia articles using the MediaWiki API. This is just the beginning, and there's a lot more you can explore on your own. Here are some ideas for further exploration:
- Search Suggestions: Implement a feature that provides search suggestions as the user types.
- Error Handling: Improve error handling to provide more user-friendly messages.
- Styling: Enhance the styling of the HTML page using CSS.
- Pagination: Add pagination to handle multiple search results.
- Caching: Implement caching to reduce the number of API calls for frequently searched terms.
- Advanced Queries: Explore more advanced queries using the MediaWiki API. You can find more information here.
Let me know if you have any questions!
Thanks for reading!
PO.
Top comments (0)