Building Your First Application with Node.js, Express.js, HTML, and CSS
Welcome to our beginner’s guide to building a web application using Node.js, Express.js, HTML, and CSS. In this article, we will walk you through the basic steps to create a simple web application using these technologies. Let’s dive in!
Setting Up Your Environment
Before we start building our application, make sure you have Node.js and npm installed on your machine. You can download and install them from the official Node.js website. Once you have Node.js and npm installed, you can create a new directory for your project and run the following command to initialize a new Node.js project:
npm init -y
Installing Express.js
Next, we need to install the Express.js framework, which will help us create our web application. Run the following command to install Express.js:
npm install express
Creating Your Application
Now that we have Node.js and Express.js set up, let’s create our application. Create a new file called app.js in your project directory and add the following code:
const express = require('express');
const app = express();
app.get('/', (req, res) => {
res.send('Hello, world!');
});
app.listen(3000, () => {
console.log('Server is running on port 3000');
});
This simple Express.js application responds with “Hello, world!” when you visit the root URL (http://localhost:3000) in your browser. Now let’s add some HTML and CSS to make our application more visually appealing.
Adding HTML and CSS
Create a new file called index.html in your project directory and add the following HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello, World!</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h1>Hello, World!</h1>
<p>This is a simple web application built with Node.js, Express.js, HTML, and CSS.</p>
</body>
</html>
Next, create a new file called styles.css in your project directory and add some basic CSS to style our HTML page:
body {
font-family: Arial, sans-serif;
background-color: #f4f4f4;
padding: 20px;
}
h1 {
color: #333;
}
p {
color: #666;
line-height: 1.6;
}
Running Your Application
Once you have your HTML, CSS, and JavaScript files in place, you can start your Express.js server by running the following command in your terminal:
node app.js
Visit http://localhost:3000 in your browser, and you should see your “Hello, World!” message styled with your custom CSS. Congratulations, you have just built and deployed your first web application using Node.js, Express.js, HTML, and CSS!
We hope this beginner’s guide has provided you with a solid foundation for building web applications with these technologies. Happy coding!
