Your First Backend Application using Node.js

#javascript #webdev #node #beginners

Are you learning web development and confused about how to start a Node.js project? Don’t worry, I’ve got you! I’ll guide you through creating your first backend with Node.js and Express.js in just 5 steps.

🗝️5 Key Steps:

Step 1: Set Up the Project
Step 2: Organize Your Folders
Step 3: Create the server.js File
Step 4: Build Routes
Step 5: Run Your Backend

Step 1: Set Up the Project 🏗️

1. Install Node.js and npm: Download and install Node.js from the official website. It comes with npm (Node Package Manager), which helps you manage packages.

2. Create a Project Folder: Make a folder for your project. Open the terminal (or command prompt) and type:

   mkdir my-node-project
   cd my-node-project

3. Initialize Your Project: Inside the folder, set up a new Node.js project by typing:

   npm init

This will create a package.json file where all your project info and dependencies are stored. Just press Enter for each question if you’re unsure.

4. Install Express.js: Express.js is a framework that makes building a backend easier. Install it by typing:

   npm install express

Step 2: Organize Your Folders 📂

Keeping things organized is important! Here’s how you can structure your project:

server.js: This is where we write the main server code.
routes/: Store route files here (where you handle web requests).
controllers/: Store code that manages the logic for routes.
models/: Store database models if you are using a database (not needed now).

Example folder structure:

my-node-project/
├── routes/
├── server.js
├── package.json
└── node_modules/

Step 3: Create the server.js File 🌥️

1. Create the File: Inside your project folder, create a file named server.js. This will be the entry point of your app.

2. Write Your First Node.js Server:

   const express = require('express'); // Importing express
   const app = express(); // Creating an express app

   // Create a route that sends a response when visiting the homepage
   app.get('/', (req, res) => {
     res.send('<h1>Hello, Express.js Server!</h1>');
   });

   // Set up the server to listen on port 3000
   const port = 3000;
   app.listen(port, () => {
     console.log(`Server is running on port ${port}`);
   });

3. Test It: Run your server by typing:

   node server.js

Now, open your web browser and go to http://localhost:3000. You should see “Hello, Express.js Server!” on the screen!

Step 4: Build Routes 📍

Routes define how your server responds to different URL requests.

1. Create a Route: In the server.js file, you already have one route:

   app.get('/', (req, res) => {
     res.send('Hello, Express.js Server!');
   });

2. Add More Routes: Let’s add some more routes:

   app.get('/about', (req, res) => {
     res.send('This is the about page');
   });

   app.get('/contact', (req, res) => {
     res.send('This is the contact page');
   });

3. Test Your Routes: After saving, go to your browser and visit these URLs:

http://localhost:3000/ – should show "Hello, Express.js Server!"
http://localhost:3000/about – should show "This is the about page"
http://localhost:3000/contact – should show "This is the contact page"

Step 5: Run Your Backend 😀👏

To keep your server running and test changes:

1. Start Your Server: Run your server again:

   node server.js

2. Test it: You can visit the URLs in your browser or use a tool like Postman to send requests.

3. Keep Your Server Updated: You can install nodemon, which automatically restarts the server when you change the code:

   npm install -g nodemon

Now, instead of node server.js, run:

   nodemon server.js

Output🍌:

When you visit http://localhost:3000/, you'll see:

Hello, Express.js Server!

When you visit http://localhost:3000/about, you'll see:

This is the about page

✅🔥Recommendation:

Use this Printable Backend Developer Notion Template to Track Your Progress!

Beginner developers often struggle with choosing the right tech stack which lead them to wasted time and motivation loss. Thus, I created a beautifully design, very easy to follow 6-month backend developer roadmap in Notion so that you can track your progress and stick with your goals._