How to Create a Project in Node.js?

Introduction

Node.js has gained immense popularity among developers due to its flexibility, scalability, and efficiency. Whether you're a seasoned developer or just starting out, creating a small project in Node.js can be a great way to learn and showcase your skills. In this article, we will guide you through the process of creating a small project using Node.js, helping you understand the fundamental concepts and best practices along the way.

What is Node.js?

Node.js is an open-source, server-side JavaScript runtime environment built on Chrome's V8 JavaScript engine. It allows developers to execute JavaScript code outside the browser, making it possible to build server-side applications and command-line tools using JavaScript. Node.js provides an event-driven, non-blocking I/O model, which means it is highly efficient and can handle a large number of concurrent connections without blocking the execution of other tasks. This makes it well-suited for building scalable and real-time applications.

Key Features of Node.js

1. JavaScript Runtime 

Node.js enables developers to write server-side applications using JavaScript, a popular and widely-used programming language known for its versatility.

2. Asynchronous and Event-Driven

Node.js uses an event-driven architecture, allowing it to handle multiple requests simultaneously without blocking the execution of other tasks. This asynchronous nature makes Node.js highly efficient and ideal for building real-time applications such as chat applications or streaming services.

3. V8 JavaScript Engine

Node.js utilizes the V8 JavaScript engine, developed by Google for the Chrome browser. V8 compiles JavaScript code to machine code, enabling fast execution and high-performance applications.

4. NPM (Node Package Manager)

Node.js comes with NPM, a powerful package manager that allows developers to easily manage and install third-party libraries and frameworks, enhancing development productivity.

5. Server-Side Development

Node.js is primarily used for server-side development, allowing developers to build web servers, RESTful APIs, microservices, and other server-side applications using JavaScript.

6. Extensive Package Ecosystem

Node.js has a vast ecosystem of open-source packages available through NPM. These packages provide a wide range of functionalities and modules, making it easier to build complex applications without reinventing the wheel.

7. Cross-Platform Compatibility

Node.js is cross-platform, which means it can be installed and run on various operating systems such as Windows, macOS, and Linux. This allows developers to write code once and deploy it on different platforms.

Prerequisites

Before creating any project in Node.js, make sure you have Node.js installed on your machine. You can download the latest version from the official Node.js website (https://nodejs.org). Once installed, you'll have access to the Node Package Manager (npm), which will be essential for managing dependencies.

Step 1. Initialize a New Project

To begin, open your terminal or command prompt and navigate to the directory where you want to create your project. Use the following command to initialize a new Node.js project:

 npm init

This command will prompt you to enter details such as the project name, version, description, entry point, and more. You can press enter to accept the default values or customize them as per your requirements.

Step 2. Install Dependencies

Most Node.js projects rely on external libraries or frameworks. To install these dependencies, you need to create a package.json file by running the following command:

npm install <package-name>

This command will download and install the Express.js package, saving it as a dependency in your package.json file.

Step 3. Set Up the Project Structure

Now that you have your project initialized and dependencies installed, it's time to set up the project structure. Create the necessary directories and files according to your project's needs. A common structure includes directories like src for source code and public for static files.

Create the following directories and files in your project

• views directory: contains the HTML views for your web application
• public directory: contains static files (CSS, images, etc.)
• index.js file: the main entry point for your application

Step 4. Create the Login Form

In the views directory, create a new HTML file called index.ejs Open the file and add the following code.

<!DOCTYPE html>
<html>
<head>
    <link rel="stylesheet" href="/index.css">
    <title>Login</title>
</head>
<body>
    <h1>Login</h1>
    <form action="/index" method="POST" onsubmit="return validateForm()">
        <div>
            <label for="email">Email:</label>
            <input type="text" id="email" name="email" required>
        </div>
        <div>
            <label for="password">Password:</label>
            <input type="password" id="password" name="password" required>
        </div>
        <button type="submit">Log In</button>
    </form>

    <script>
        function validateForm() {
            var email = document.getElementById('email').value;
            var password = document.getElementById('password').value;

            // Check if email and password are valid
            var validEmail = '[email protected]';
            var validPassword = '123';

            if (email === validEmail && password === validPassword) {
                // Valid credentials, allow form submission
                return true;
            } else {
                // Invalid credentials, show alert
                alert('Invalid email or password.');
                return false;
            }
        }
    </script>
</body>
</html>

Code Explanation

• The HTML structure is enclosed within the <html>, <head>, and <body> tags.
• The page displays a login form with the heading "Login" and two input fields: one for email and another for password.
• The form's action attribute is set to "/index", indicating that upon form submission, the data will be sent to the /index route for processing.
• The form's method attribute is set to "POST", indicating that the form data will be sent using the HTTP POST method.
• The submit event handler is attached to the form, calling the validateForm() JavaScript function when the form is submitted. If the function returns true, the form submission proceeds; otherwise, if it returns false, the form submission is prevented.
• The JavaScript function validateForm() is defined within the <script> tags. It retrieves the values of the email and password inputs and performs the validation.
• In this example, the function checks if the entered email and password match the hard-coded valid values: [email protected] for the email and 123 for the password.
• If the entered email and password match the valid values, the function returns true, allowing the form submission to proceed.
• If the entered email and password do not match the valid values, the function displays an alert message stating "Invalid email or password" and returns false, preventing the form submission.

In the views directory, create one new HTML file called dashboard.ejs. Open the file and add the following code.

<!DOCTYPE html>
<html>
<head>
    <title>Dashboard</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            padding: 20px;
            background-color:rgb(164, 134, 150) ;
        }
        h1 {
            text-align: center;
        }
    </style>
</head>
<body>
    <h1>Welcome to the Dashboard</h1>
    <form action="/dashboard" method="get"></form>
</body>
</html>

Code Explanation

• The HTML structure is enclosed within the <html>, <head>, and <body> tags.
• The page represents a simple dashboard view.
• The <title> element sets the title of the page to "Dashboard", which will be displayed in the browser's title bar or tab.
• The <style> section contains CSS code to define the styles for the page elements.
• The body selector sets the font family to Arial or a fallback sans-serif font, adds 20 pixels of padding around the body, and sets the background color to an RGB value of (164, 134, 150), which corresponds to a shade of pink.
• The h1 selector aligns the text of the heading to the center of the page.
• Inside the <body> section, there is an <h1> element displaying the heading "Welcome to the Dashboard".
• The <form> element is present, but it doesn't contain any form fields or submit buttons. It has an action attribute set to /dashboard and a method attribute set to "get". However, as the form is empty, it doesn't have any practical functionality in this code snippet.

Step 5. Set Up the Server and Routes

In the index.js file, add the following code to set up the Express server and define the routes.

const express = require('express');
const bcrypt = require('bcrypt');
const app = express();

app.set('view engine', 'ejs');

// Set up middleware to parse request bodies
app.use(express.urlencoded({ extended: false }));

// Serve static files from the public directory
app.use(express.static('./public'));

// Route to serve the login form
app.get('/', (req, res) => {
    res.render('index.ejs');
});

// Route to handle login form submission
app.post('/index', (req, res) => {
    const { email, password } = req.body;

    // Perform authentication here
    // For simplicity, we'll use hard-coded credentials
    const validEmail = '[email protected]';
    const validPassword = '123';

    if (email === validEmail && password === validPassword) {
        res.redirect('/dashboard');
    } else {
        res.send('Invalid Email or password.');
    }
});

app.get('/dashboard', (req, res) => {
    res.render('dashboard.ejs');
});

// Start the server
const port = 3000;
app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

 

const express = require('express');
const bcrypt = require('bcrypt');
const app = express();
app.set('view engine', 'ejs');

Code Explanation

• The code imports the required dependencies, including Express and bcrypt.
• The app.set('view engine', 'ejs') line configures the server to use EJS as the template engine for rendering views.

app.use(express.urlencoded({ extended: false }));

This line sets up middleware to parse the request bodies and make it accessible via req.body in your routes.

app.use(express.static('./public'));

This line serves as static files from the public directory, making them accessible on the server.

app.get('/', (req, res) => {
    res.render('index.ejs');
});

Code Explanation

• This route handles the GET request to the root URL ('/').
• It renders the index.ejs view using res.render(). The .ejs extension is automatically appended due to the configuration set earlier.

app.post('/index', (req, res) => {
    const { email, password } = req.body;

    // Perform authentication here
    // For simplicity, we'll use hard-coded credentials
    const validEmail = '[email protected]';
    const validPassword = '123';

    if (email === validEmail && password === validPassword) {
        res.redirect('/dashboard');
    } else {
        res.send('Invalid Email or password.');
    }
});

Code Explanation

• This route handles the POST request to the /index URL.
• It retrieves the email and password from the req.body.
• Performs authentication by comparing the entered credentials with hard-coded valid credentials.
• If the credentials match, it redirects the user to the /dashboard URL.
• If the credentials are invalid, it sends a response with the message "Invalid Email or password."

app.get('/dashboard', (req, res) => {
    res.render('dashboard.ejs');
});
This route handles the GET request to the /dashboard URL.
It renders the dashboard.ejs view using res.render().

const port = 3000;
app.listen(port, () => {
    console.log(`Server is running on http://localhost:${port}`);
});

Code Explanation

• This code starts the server and listens on port 3000.
• When the server starts, it logs a message to the console indicating the server is running.
• That's the explanation of the code you provided. It sets up a basic server, handles user authentication with hard-coded credentials, and renders views using EJS. You can customize the views and add more functionality as per your project requirements.

Step 6. Run Your Project

In your terminal, run the following command to start the server.

 node index.js

This command will start your application, and you'll be able to access it through your browser or an API testing tool like Postman. Open your browser and visit http://localhost:3000 to see the login form. You can enter "admin" for both the username and password (as per our hard-coded credentials) to see the success message.

Output

When you hit http://localhost:3000 this URL, you can see the login form.

When you enter the wrong email and password, show an alert message.

Then if you enter a valid email and password, you will go to the next page, which is the dashboard.

Conclusion

In this article, we've created a basic login form and user authentication system using Node.js. Remember, in a real-world scenario, you would typically integrate a database to store user credentials securely, use sessions or tokens for authentication, and implement additional security measures. However, this project provides a starting point for understanding the basic concepts of handling a login form and authenticating users in Node.js.we covered the essential steps involved, from initializing a new project to running it on your local machine. Remember to continue exploring and experimenting with different libraries and frameworks to enhance your Node.js skills.

FAQs

Q 1. What is Node.js?

Ans. Node.js is a JavaScript runtime built on Chrome's V8 JavaScript engine. It allows you to run JavaScript code outside of a web browser, enabling you to create server-side applications.

Q 2. How do I install Node.js?

Ans. You can download the Node.js installer from the official Node.js website (https://nodejs.org) and follow the installation instructions specific to your operating system.

Q 3. What is npm?

Ans. npm (Node Package Manager) is a package manager that comes bundled with Node.js. It allows you to install and manage third-party packages and libraries for your Node.js projects.

Q 4. How do I initialize a Node.js project?

Ans. To create a new Node.js project, open your terminal or command prompt, navigate to the desired directory, and run the following command.

npm init

This command initializes a new Node.js project and prompts you to enter some details like the project name, version, description, entry point, etc.

Q 5. What is package.json?

Ans. The package.json file is automatically generated when you run npm init to initialize a new Node.js project. It contains metadata about your project and its dependencies, scripts, and other configurations.

Q 6. How do I install Node.js packages?

Ans. You can install Node.js packages by running the following command in your project's directory.

npm install <package-name>

Replace <package-name> with the name of the package you want to install. You can also specify the version or other details to install a specific package version.

Q 7. How do I use installed packages in my Node.js project?

Ans. Once you install a package, you can import it into your Node.js files using the required statement. For example.

const express = require('express');

Q 8. How do I run a Node.js application?

Ans. If your project has an entry point file specified in package.json (usually index.js or app.js), you can run your Node.js application by executing the following command in your project's directory.

node <entry-file>

Replace <entry-file> with the name of your entry point file.