DEV Community

Cover image for Your First Backend Application using Node.js
Programming with Shahan
Programming with Shahan

Posted on • Updated on

Your First Backend Application using Node.js

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 🏗️

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
Enter fullscreen mode Exit fullscreen mode

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

   npm init
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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/
Enter fullscreen mode Exit fullscreen mode

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}`);
   });
Enter fullscreen mode Exit fullscreen mode

3. Test It: Run your server by typing:

   node server.js
Enter fullscreen mode Exit fullscreen mode

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!');
   });
Enter fullscreen mode Exit fullscreen mode

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');
   });
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

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
Enter fullscreen mode Exit fullscreen mode

Now, instead of node server.js, run:

   nodemon server.js
Enter fullscreen mode Exit fullscreen mode

Output🍌:

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

Hello, Express.js Server!
Enter fullscreen mode Exit fullscreen mode

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

This is the about page
Enter fullscreen mode Exit fullscreen mode

✅🔥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._

Image of backend developer roadmap

This roadmap:

  • 🛤️ Provides a clear path to avoid confusion.
  • 🎯 Helps you stay motivated by outlining where to start and end.
  • 📚 Follows a structured plan, similar to a school syllabus.
  • 📅 Organizes your learning with weekly goals for tools and languages.
  • ⏳ Ensures completion in 6 months, covering everything you need.
  • 👀 Features a beautiful design for easy navigation.

order backend development roadmap


Thanks for reading this article. Make sure to follow me on 𝕏 for the latest updates.

Read more: skills to become a backend developer in 6 months (roadmap)

Top comments (1)

Collapse
 
darkstarvue profile image
DarkStarVue

This is so amazingly simple. Checking your roadmap out!