TypeScript Tutorial: Building a Simple Web-Based Code Search Engine

Written by

learnmodernjavascript

in

In the vast digital landscape, the ability to quickly and efficiently search through code is a superpower. Whether you’re a seasoned developer navigating a complex codebase or a newcomer trying to understand a new project, the ability to find specific functions, variables, or code snippets can save you countless hours. Imagine the frustration of sifting through hundreds of files, manually searching for a particular piece of code. This is where a code search engine comes into play. In this tutorial, we will build a simple web-based code search engine using TypeScript, designed to help you navigate your projects with ease and efficiency.

Why Build a Code Search Engine?

While IDEs and code editors offer built-in search functionalities, a dedicated web-based code search engine provides several advantages:

  • Accessibility: Accessible from any device with a web browser, making it easy to search your code from anywhere.
  • Collaboration: Facilitates collaboration by allowing team members to easily search and share code snippets.
  • Customization: Offers the flexibility to customize the search engine to suit your specific needs, such as adding support for different file types or advanced search filters.
  • Learning: Building a code search engine is a fantastic way to learn about data structures, algorithms, and web development principles.

This tutorial will guide you through the process of building a functional code search engine, step-by-step. We’ll cover everything from setting up the project to implementing the core search functionality and deploying the application. By the end of this tutorial, you’ll have a fully functional code search engine that you can use to search your own projects.

Prerequisites

Before we begin, make sure you have the following installed:

  • Node.js and npm: We’ll use Node.js and npm (Node Package Manager) to manage our project dependencies and run our development server. You can download them from https://nodejs.org/.
  • TypeScript: We’ll be using TypeScript for this project. You can install it globally using npm: npm install -g typescript.
  • A code editor: Any code editor will work, but we recommend Visual Studio Code (VS Code) for its excellent TypeScript support.

Project Setup

Let’s start by setting up our project:

  1. Create a project directory: Create a new directory for your project, for example, code-search-engine.
  2. Initialize npm: Navigate to your project directory in your terminal and run npm init -y to initialize a new npm project. This will create a package.json file.
  3. Install dependencies: We’ll need a few dependencies:
    • typescript: For TypeScript compilation.
    • express: A web framework for our server.
    • ts-node: To run TypeScript files directly.
    • cors: For handling Cross-Origin Resource Sharing (CORS).

    Run the following command in your terminal:

    npm install typescript express ts-node cors --save
  4. Create TypeScript configuration: Create a tsconfig.json file in your project root. This file tells the TypeScript compiler how to compile your code. You can generate a basic one by running npx tsc --init. You can then customize it. Here’s a basic configuration:

    {
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs",
    "outDir": "./dist",
    "esModuleInterop": true,
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*"]
}
  5. Create project structure: Create the following directory structure: 
    
 code-search-engine/
 ├── src/
 │   ├── index.ts
 │   └── data/
 │       └── sample-code.ts
 ├── tsconfig.json
 ├── package.json
 └── .gitignore
    • src/index.ts: This will be our main server file.
    • src/data/sample-code.ts: This will contain the sample code we’ll search.

Writing the Server-Side Code (Backend)

Now, let’s write the server-side code using TypeScript. Open src/index.ts and add the following code:

import express, { Request, Response } from 'express';
import cors from 'cors';
import { searchCode } from './search';

const app = express();
const port = process.env.PORT || 3000;

app.use(cors()); // Enable CORS for all origins
app.use(express.json()); // For parsing JSON request bodies

// Define a route for searching code
app.post('/search', async (req: Request, res: Response) => {
  const searchTerm = req.body.searchTerm;

  if (!searchTerm) {
    return res.status(400).json({ error: 'Search term is required' });
  }

  try {
    const results = await searchCode(searchTerm);
    res.json(results);
  } catch (error) {
    console.error('Search error:', error);
    res.status(500).json({ error: 'Internal server error' });
  }
});

app.listen(port, () => {
  console.log(`Server is running on port ${port}`);
});

Explanation:

  • Import statements: We import necessary modules: express (for the web server), cors (for handling CORS), and our searchCode function.
  • Express app setup: We create an Express app and set the port.
  • Middleware: We use cors() middleware to enable CORS and express.json() to parse JSON request bodies.
  • Search route: We define a POST route at /search. This route expects a JSON body with a searchTerm property.
  • Error handling: We include basic error handling to catch and respond to errors.
  • Server start: We start the server and listen on the specified port.

Create a search.ts file in your src directory and add the following code:

import { sampleCode } from './data/sample-code';

// Function to simulate code searching
export async function searchCode(searchTerm: string): Promise {
  return new Promise((resolve) => {
    // Simulate a delay
    setTimeout(() => {
      const results = sampleCode.filter(code => code.toLowerCase().includes(searchTerm.toLowerCase()));
      resolve(results);
    }, 500); // Simulate some processing time
  });
}

Explanation:

  • Import sample code: Imports the sample code from sample-code.ts.
  • searchCode function: This is the core function that performs the search.
  • Filter: Uses the filter method to find code snippets that contain the search term (case-insensitive).
  • Simulate delay: Includes a 500ms delay to simulate network latency or processing time.

Create a sample-code.ts file in your src/data directory and add some sample code snippets:


export const sampleCode: string[] = [
  'function add(a: number, b: number): number { return a + b; }', 
  'const subtract = (a: number, b: number): number => a - b;',
  '// This is a comment about addition', 
  'console.log('Hello, TypeScript!');',
  'class Greeter { greeting: string; constructor(message: string) { this.greeting = message; } greet() { return 'Hello, ' + this.greeting; } }',
  '// Example of a for loop',
  'for (let i = 0; i < 10; i++) { console.log(i); }',
  'function multiply(x: number, y: number): number { return x * y; }'
];

This file contains an array of strings, each representing a code snippet. This is where the search engine will look for the search term.

Writing the Client-Side Code (Frontend)

Now, let’s create a simple HTML, CSS, and JavaScript (with TypeScript) frontend to interact with our search engine. Create an index.html file in your project root and add the following code:





  
  
  <title>Code Search Engine</title>
  


  <div class="container">
    <h1>Code Search Engine</h1>
    
    <button id="searchButton">Search</button>
    <div id="searchResults"></div>
  </div>

This is a basic HTML structure with a title, a search input field, a search button, and a div to display the search results. It also links to a CSS file (style.css) and a JavaScript file (script.js), which we’ll create next.

Create a style.css file in your project root and add some basic styling:


body {
  font-family: sans-serif;
  margin: 0;
  padding: 0;
  background-color: #f4f4f4;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
}

.container {
  background-color: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  text-align: center;
  width: 80%;
  max-width: 600px;
}

h1 {
  color: #333;
}

input[type="text"] {
  width: 100%;
  padding: 10px;
  margin: 10px 0;
  border: 1px solid #ddd;
  border-radius: 4px;
  box-sizing: border-box;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
}

button:hover {
  background-color: #3e8e41;
}

#searchResults {
  margin-top: 20px;
  text-align: left;
}

.result {
  padding: 10px;
  border: 1px solid #eee;
  border-radius: 4px;
  margin-bottom: 10px;
  background-color: #f9f9f9;
}

This CSS provides basic styling for the HTML elements.

Create a script.ts file in your project root and add the following code:


const searchInput = document.getElementById('searchInput') as HTMLInputElement;
const searchButton = document.getElementById('searchButton') as HTMLButtonElement;
const searchResults = document.getElementById('searchResults') as HTMLDivElement;

searchButton.addEventListener('click', async () => {
  const searchTerm = searchInput.value;

  if (!searchTerm) {
    alert('Please enter a search term.');
    return;
  }

  try {
    const response = await fetch('http://localhost:3000/search', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify({ searchTerm })
    });

    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }

    const data: string[] = await response.json();

    searchResults.innerHTML = '';
    if (data.length === 0) {
      searchResults.innerHTML = '<p>No results found.</p>';
    } else {
      data.forEach(result => {
        const resultElement = document.createElement('div');
        resultElement.classList.add('result');
        resultElement.textContent = result;
        searchResults.appendChild(resultElement);
      });
    }
  } catch (error) {
    console.error('Fetch error:', error);
    searchResults.innerHTML = '<p>An error occurred while searching.</p>';
  }
});

Explanation:

  • Get elements: The code gets references to the search input, search button, and search results div.
  • Event listener: An event listener is added to the search button. When the button is clicked, the following happens:
    • Gets the search term from the input field.
    • Validates that a search term was entered.
    • Sends a POST request to the /search endpoint of our server.
    • Handles the response, parsing the JSON data (the search results).
    • Displays the results in the searchResults div.
    • Includes error handling for network errors and empty search results.

Running the Application

Now that we have both the backend and frontend set up, let’s run the application:

  1. Compile the TypeScript files: In your terminal, run npm run build. This will compile the TypeScript files and generate the JavaScript files in the dist directory.
  2. Start the server: In your terminal, run npx ts-node src/index.ts. This will start the server on port 3000 (or the port specified in your environment variables).
  3. Open the frontend: Open index.html in your web browser.
  4. Search: Enter a search term in the input field and click the “Search” button. You should see the matching code snippets displayed below.

Common Mistakes and How to Fix Them

Here are some common mistakes and how to fix them:

  • CORS issues: If you see errors related to CORS (Cross-Origin Resource Sharing), make sure your server is configured to allow requests from your frontend’s origin. The cors() middleware in the backend should handle this, but double-check that your browser isn’t blocking the requests.
  • Incorrect paths: Double-check the paths in your import statements and in the script tag in your index.html to ensure they are correct.
  • Typo errors: TypeScript helps prevent typo errors, but carefully review your code for typos, especially in variable names and function calls.
  • Server not running: Make sure your server is running before you try to search. Check the terminal where you started the server for any error messages.
  • Network errors: Use your browser’s developer tools (Network tab) to inspect network requests and responses. This can help you identify issues with the API calls.

Enhancements and Next Steps

This is a basic code search engine. Here are some ways you can enhance it:

  • Implement a more robust search algorithm: Currently, the search uses a simple includes method. You could implement a more advanced search algorithm, like regular expressions, to support more complex search queries.
  • Index files: Instead of searching through a hardcoded array of strings, you could index files from a directory.
  • Add support for different file types: Extend the search to support different file types (e.g., .js, .jsx, .py).
  • Implement pagination: If you have a large number of search results, implement pagination to display them in a more manageable way.
  • Add syntax highlighting: Integrate a library like Prism.js or highlight.js to provide syntax highlighting for the code snippets.
  • Improve the UI/UX: Enhance the user interface with features like auto-suggestions, search filters, and a more visually appealing design.
  • Add a file upload feature: Allow users to upload files to search through.
  • Use a database: Store code snippets in a database for more efficient searching and storage.

Summary / Key Takeaways

In this tutorial, we successfully built a basic but functional code search engine using TypeScript, Express.js, and a bit of HTML, CSS, and JavaScript. We covered the essential steps, from project setup and server-side implementation to frontend design and integration. We explored how to handle HTTP requests, process data, and display search results. We also looked at common pitfalls and potential enhancements. Building this search engine provides a solid foundation for understanding web development principles, TypeScript, and the power of efficient code navigation. You can adapt and extend this project to meet your specific needs, improving your productivity and your ability to understand and work with code.

This project is more than just a tool; it’s a stepping stone. As you continue to build and refine it, you’ll not only enhance your ability to find code but also deepen your understanding of software development principles. You can now use your newly created search engine to explore existing projects, learn new coding techniques, and collaborate with your peers more effectively.

More posts