Today, I explored the backend side of web development with JavaScript and Express.js. It was amazing to learn how to set up a server, handle routing, and deploy an app. Let me walk you through the highlights of my day with some simple examples
1. Setting Up Express.js
Express.js is a Node.js framework that simplifies server-side development. I started by installing Express and creating a basic app:
npm install express
Then I created a basic server:
const express = require('express');
const app = express(); // Sets up an Express app.
app.get('/', (req, res) => { // Defines a route (/) that responds with "Welcome to my first Express.js app!
res.send('Welcome to my first Express.js app!');
});
const PORT = 3000;
app.listen(PORT, () => { // Listens for incoming requests on port 3000.
console.log(`Server is running on localhost:${PORT}`);
});
2. Handling Requests with the GET Method
The GET method is used to retrieve data. Here’s how I created a simple route to handle a GET request:
app.get('/api/data', (req, res) => {
res.json({ message: 'Hello, this is your data!' });
});
Key points:
req: Represents the incoming request.res: Represents the outgoing response.
When accessing /api/data, the server responds with JSON data.
3. Using the listen Method
The listen method connects the server to the outside world by listening on a specified port.
const PORT = process.env.PORT || 3000; // to set the port dynamically
app.listen(PORT, () => {
console.log(`Server is running on localhost:${PORT}`);
});
4. Storing Sensitive Data in .env with dotenv
To keep sensitive data (like port numbers, API keys, or database URLs) safe, I used the dotenv package. This package allows us to store such data in a .env file and access it in our code securely.
Installing dotenv Creating a .env File:
npm install dotenv // on Terminal
PORT\=3000 // paste in .env File
Using the .env File in Code:
After installing dotenv, I configured it in my code by adding the following at the top of my server.js file:
require('dotenv').config();
// Then, I accessed the environment variable like this:
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on localhost:${PORT}`);
});
5. Deploying the Application
After building the project, I deployed it:
1. GitHub: Hosted the codebase to make it version-controlled and accessible.
2. Render: Deployed the server app live. Render made it easy to bring the backend online with just a few steps.
How the OverAll code Looks Like
require('dotenv').config();
const express = require('express');
const app = express();
// Basic GET route
app.get('/', (req, res) => {
res.send('Hello, Express.js is live!');
});
// Another route with JSON response
app.get('/api/data', (req, res) => {
res.json({ message: 'This is your data!' });
});
// Listen on the port from .env
const PORT = process.env.PORT || 3000;
app.listen(PORT, () => {
console.log(`Server is running on localhost:${PORT}`);
});
Thank You
Thank You for reading! Stay connected for more updates on my full-stack journey. 🚀