Build a Node.js Interactive Web-Based Simple Code Beautifier

Written by

javascriptdebugged

in

In the world of web development, clean and readable code is king. It’s not just about making your code work; it’s about making it understandable, maintainable, and collaborative. Imagine working on a project with a team, or returning to a project after months away. Without proper formatting, your code can quickly become a tangled mess, making it difficult to debug, update, and understand. This is where code beautifiers come in. They automatically format your code, making it easier to read and preventing frustrating errors caused by poor indentation or spacing. In this tutorial, we’ll build a simple, interactive code beautifier using Node.js, allowing you to clean up your code directly in your browser.

Why Build a Code Beautifier?

As developers, we spend a significant amount of time reading and writing code. Code that is neatly formatted saves us time and frustration. It helps us:

  • Improve Readability: Well-formatted code is easier to scan and understand.
  • Reduce Errors: Consistent formatting minimizes the chance of making mistakes.
  • Enhance Collaboration: When everyone on a team uses the same formatting style, it makes collaboration smoother.
  • Boost Productivity: Less time is spent deciphering code, and more time is spent building features.

Building a code beautifier is a great learning experience. It gives you a deeper understanding of how code is structured and how tools can automate repetitive tasks. Plus, it’s a useful utility that you can use every day!

Prerequisites

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

  • Node.js and npm: You can download them from nodejs.org.
  • A text editor or IDE: Such as Visual Studio Code, Sublime Text, or Atom.
  • Basic knowledge of HTML, CSS, and JavaScript: This tutorial is geared toward beginners, but some familiarity with these technologies will be helpful.

Project Setup

Let’s get started by setting up our project directory and installing the necessary dependencies. Open your terminal or command prompt and follow these steps:

  1. Create a Project Directory: Create a new directory for your project, for example, code-beautifier.
  2. Navigate to the Directory: Use the cd command to navigate into your newly created directory.
  3. Initialize npm: Run npm init -y to create a package.json file. This file will manage our project’s dependencies.
  4. Install Dependencies: We’ll be using the following dependencies:
    • express: A Node.js web application framework.
    • js-beautify: A JavaScript beautifier.
    • body-parser: Middleware to parse request bodies.

    To install these dependencies, run: npm install express js-beautify body-parser

Project Structure

Our project will have the following structure:

code-beautifier/
├── node_modules/
├── public/
│   ├── index.html
│   ├── style.css
│   └── script.js
├── app.js
└── package.json
  • node_modules/: This directory will contain the installed npm packages.
  • public/: This directory will hold our HTML, CSS, and JavaScript files.
  • public/index.html: The main HTML file for our application.
  • public/style.css: Our CSS file for styling.
  • public/script.js: Our JavaScript file for client-side logic.
  • app.js: The main server-side JavaScript file.
  • package.json: Contains project metadata and dependencies.

Creating the Server (app.js)

Let’s start by creating our server using Express. Open app.js and add the following code:

// app.js
const express = require('express');
const bodyParser = require('body-parser');
const beautify = require('js-beautify').js;
const path = require('path');

const app = express();
const port = 3000;

app.use(express.static(path.join(__dirname, 'public')));
app.use(bodyParser.urlencoded({ extended: true }));

app.post('/beautify', (req, res) => {
  const code = req.body.code;
  const beautifiedCode = beautify(code, {
    indent_size: 2,
    space_before_conditional: true,
    preserve_newlines: true,
  });
  res.json({ beautifiedCode: beautifiedCode });
});

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

Let’s break down this code:

  • We import the necessary modules: express, body-parser, js-beautify, and path.
  • We create an Express application instance and define a port number.
  • app.use(express.static(path.join(__dirname, 'public'))); serves static files (HTML, CSS, JavaScript) from the public directory.
  • app.use(bodyParser.urlencoded({ extended: true })); parses URL-encoded request bodies. This is needed to parse the code we’ll send from the client.
  • We define a POST route /beautify. This route will handle the beautification process.
  • Inside the /beautify route:
    • We extract the code from the request body.
    • We use js-beautify to beautify the code with some basic options.
    • We send the beautified code back to the client as a JSON response.
  • Finally, we start the server and listen on the specified port.

Creating the HTML (index.html)

Now, let’s create the HTML file for our code beautifier. Create a file named index.html inside the public directory and add the following code:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Code Beautifier</title>
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <div class="container">
    <h1>Code Beautifier</h1>
    <div class="input-container">
      <label for="code-input">Enter Your Code:</label>
      <textarea id="code-input" rows="10" cols="80"></textarea>
    </div>
    <button id="beautify-button">Beautify</button>
    <div class="output-container">
      <label for="code-output">Beautified Code:</label>
      <textarea id="code-output" rows="10" cols="80" readonly></textarea>
    </div>
  </div>
  <script src="script.js"></script>
</body>
</html>

Here’s what this HTML does:

  • It defines the basic structure of the page, including the title and a link to our CSS file.
  • It contains a container div to hold all the content.
  • It has an input area (textarea with the id code-input) where the user will enter their code.
  • It has a button (button with the id beautify-button) that, when clicked, will trigger the beautification.
  • It has an output area (textarea with the id code-output) where the beautified code will be displayed. The readonly attribute prevents the user from editing the output.
  • It includes a link to our JavaScript file (script.js).

Styling with CSS (style.css)

Let’s add some basic styling to make our code beautifier look better. Create a file named style.css inside the public directory and add the following code:

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);
  width: 80%;
  max-width: 900px;
}

h1 {
  text-align: center;
  color: #333;
}

.input-container, .output-container {
  margin-bottom: 20px;
}

label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

textarea {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  font-family: monospace;
  resize: vertical;
}

button {
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 16px;
  display: block;
  margin: 0 auto;
}

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

This CSS provides basic styling for the page, including:

  • Setting the font and background color for the body.
  • Styling the container, input, and output areas.
  • Styling the button to make it visually appealing.

Adding Client-Side JavaScript (script.js)

Now, let’s write the JavaScript code that will handle the user interaction. Create a file named script.js inside the public directory and add the following code:

// script.js
const codeInput = document.getElementById('code-input');
const beautifyButton = document.getElementById('beautify-button');
const codeOutput = document.getElementById('code-output');

beautifyButton.addEventListener('click', () => {
  const code = codeInput.value;

  fetch('/beautify', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/x-www-form-urlencoded',
    },
    body: `code=${encodeURIComponent(code)}`,
  })
  .then(response => response.json())
  .then(data => {
    codeOutput.value = data.beautifiedCode;
  })
  .catch(error => {
    console.error('Error:', error);
    codeOutput.value = 'Error beautifying code.';
  });
});

Here’s a breakdown of the JavaScript code:

  • We get references to the input textarea, the beautify button, and the output textarea using their IDs.
  • We add an event listener to the beautify button. When the button is clicked, the code inside the listener is executed.
  • Inside the event listener:
    • We get the code from the input textarea.
    • We use the fetch API to send a POST request to the /beautify endpoint on our server.
    • We set the Content-Type header to application/x-www-form-urlencoded because we’re sending data in the URL-encoded format.
    • We encode the code using encodeURIComponent to ensure that any special characters are properly handled.
    • We parse the JSON response from the server, which contains the beautified code.
    • We set the value of the output textarea to the beautified code.
    • If there’s an error during the process, we log the error to the console and display an error message in the output textarea.

Running the Application

Now that we’ve written all the code, let’s run our application. Open your terminal or command prompt, navigate to your project directory, and run the following command:

node app.js

This will start the server and you should see the message “Server listening on port 3000” in your terminal. Open your web browser and go to http://localhost:3000. You should see your code beautifier. Paste some code into the input area, click the “Beautify” button, and see the beautified code in the output area!

Common Mistakes and Troubleshooting

Here are some common mistakes and how to fix them:

  • Server Not Running: Make sure your Node.js server (app.js) is running. If you make changes to the server-side code, you’ll need to restart the server for the changes to take effect.
  • Incorrect File Paths: Double-check the file paths in your HTML (<script src="script.js"> and <link rel="stylesheet" href="style.css">) to ensure they are correct relative to the HTML file.
  • CORS Errors: If you encounter CORS (Cross-Origin Resource Sharing) errors, it means the browser is blocking the request because the server and the client are on different origins. In this simple example, they are on the same origin (localhost:3000), so you should not see this error. If you deploy this to different domains, you’ll need to configure CORS on your server.
  • Typographical Errors: Carefully check your code for typos, especially in the HTML element IDs (used by JavaScript) and the names of the CSS classes and properties.
  • Incorrect Dependencies: Make sure you have installed all the necessary dependencies using npm install. If you are missing a dependency, run npm install <package-name>.
  • Console Errors: Use your browser’s developer console (usually opened by pressing F12) to check for JavaScript errors. These errors can provide valuable clues about what’s going wrong.

Customizing the Beautifier

The js-beautify library offers many options for customizing the beautification process. You can experiment with different options to suit your preferences. Here are some examples:

const beautifiedCode = beautify(code, {
  indent_size: 4, // Indent with 4 spaces
  space_before_conditional: false, // Don't add space before conditional statements
  preserve_newlines: false, // Remove extra newlines
  wrap_line_length: 120, // Wrap lines after 120 characters
  end_with_newline: true, // Ensure the file ends with a newline
});

You can adjust these options in your app.js file to fine-tune the formatting.

Key Takeaways

  • We built a simple, interactive code beautifier using Node.js, Express, and js-beautify.
  • We learned how to set up a Node.js server, handle HTTP requests, and serve static files.
  • We used the js-beautify library to format JavaScript code.
  • We created an HTML interface with input and output areas.
  • We used JavaScript to send the code to the server, receive the beautified code, and display it.
  • We understood the importance of code readability and maintainability.

FAQ

  1. Can I use this beautifier for languages other than JavaScript?
    While the js-beautify library is primarily for JavaScript, there are similar libraries for other languages. You would need to use a different library for languages like HTML, CSS, Python, etc.
  2. How can I deploy this code beautifier online?
    You can deploy your application to platforms like Heroku, Netlify, or AWS. You’ll need to choose a platform, set up a deployment pipeline, and configure your application to run on the platform.
  3. What if I want to beautify other file types, like HTML or CSS?
    You would need to install and use different beautifier libraries that are specifically designed for those file types. For example, for HTML, you could use html-beautify. For CSS, you could use css-beautify. You would then need to modify your server-side code to call the appropriate beautification functions based on the file type.
  4. How can I add more features to my code beautifier?
    You could add features such as:

    • Support for different programming languages.
    • Customizable formatting options (e.g., indentation size, line length).
    • Syntax highlighting.
    • A file upload feature.
    • Saving and loading code snippets.

Building this simple code beautifier provides a foundation for more complex tools. By understanding the core concepts of server-side development with Node.js, and client-side interaction with JavaScript, you can adapt this project to fit your specific needs or explore other related projects. The ability to automatically format your code is a valuable skill for any developer, and this tutorial provides a practical starting point for building your own tools that streamline your workflow.

More posts