Building Your First Backend with Node.js

Alright, now that you’ve got your development environment all set up, let’s roll up our sleeves and dive into building your first backend using Node.js. This chapter is all about creating the engine that powers your app, which is the backend. Whether it’s handling data, processing requests, or communicating with a database, your backend is like the “brains” of your application.

In this chapter, we’re going to start simple by creating a basic Node.js backend. Think of it as your backend’s “Hello World.” You’ll learn how to set up a basic server, handle requests, and structure your code. By the end of this chapter, you’ll have a working server that can talk to your frontend (which you’ll build with React Native later on). Let’s dive in!

Step 1: What is a Backend, and Why Do You Need It?

Before we jump into coding, let’s quickly talk about what a backend is and why it’s important. When you’re building a mobile app (or any app, really), there are two main parts:

Frontend: This is what the user sees and interacts with. In our case, this will be built with React Native.
Backend: This is what happens behind the scenes. It handles things like processing user input, storing data, and managing business logic.

The frontend communicates with the backend to request information (like getting user data or saving a new post), and the backend processes that request and sends back a response. Think of the backend as the “server” part of your app that makes everything work.

Step 2: Setting Up a Basic Node.js Server

Now, let’s get hands-on and build your first backend. We’ll use Node.js for this, and to make things easier, we’ll also use a library called Express.js to handle things like routing (which we’ll talk about soon).

Installing Express.js

Express.js is a web framework for Node.js that makes it easier to build servers. To install it, navigate to your project folder in your terminal and run:

npm install express

This will install Express.js and add it to your project’s package.json file.

Creating Your First Server

Let’s create a simple server that listens for incoming requests and responds with a message. In your project folder, create a new file called server.js. Inside that file, write the following code:

const express = require('express'); // Import the Express library
const app = express(); // Create an Express app
const PORT = 3000; // Define the port where the server will listen

// Define a route for the home page
app.get('/', (req, res) => {
  res.send('Hello, welcome to your first backend!');
});

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

Here’s what’s happening in this code:

We import the express library and create an instance of an Express app.
We define a route for the homepage (/). A route is essentially a URL path that the server responds to. When someone visits http://localhost:3000/, the server will respond with “Hello, welcome to your first backend!”
Finally, we tell the server to listen on port 3000 and print a message in the terminal once it’s up and running.

Running Your Server

To start your server, go to your terminal and run:

node server.js

You should see the following message:

Server is running on http://localhost:3000

Now, open your browser and go to http://localhost:3000/. You should see the message “Hello, welcome to your first backend!”

Congratulations! You’ve just built your first Node.js server. 🎉

Step 3: Understanding Routes and HTTP Methods

A backend is all about handling different kinds of requests from the frontend, and that’s where routes and HTTP methods come in.

What are Routes?

Routes define the different URLs that your backend responds to. For example, you might have routes like:

/users: For getting a list of users
/posts: For getting a list of posts

You can think of routes as different “paths” or “doors” that lead to specific functions in your backend.

What are HTTP Methods?

HTTP methods define what kind of action the backend should take. The most common methods are:

GET: This is used to retrieve data. For example, when you visit a webpage, the browser sends a GET request to the server to get the page’s content.
POST: This is used to send data to the server. For example, when you submit a form on a website, a POST request is sent to the server with the form data.
PUT: This is used to update data on the server.
DELETE: This is used to delete data on the server.

Let’s add a few more routes and HTTP methods to our server.

Adding More Routes

In your server.js file, add the following code below the existing route:

// Route to get user data
app.get('/users', (req, res) => {
  res.send('Here is a list of users');
});

// Route to create a new user
app.post('/users', (req, res) => {
  res.send('User created!');
});

Here’s what we’ve added:

A GET route for /users that returns a message saying “Here is a list of users.”
A POST route for /users that returns a message saying “User created!”

Testing the New Routes

To test the new routes, you can either:

Open your browser and go to http://localhost:3000/users to test the GET route.
Use a tool like Postman to send a POST request to http://localhost:3000/users.

You’ll see the appropriate messages for each route.

Step 4: Handling Data with JSON

In the real world, your backend will need to handle and send data in a structured format. The most common format for this is JSON (JavaScript Object Notation). JSON is like a text-based way of representing data that can be easily read by both humans and machines.

Let’s modify our routes to send and receive JSON data.

Sending JSON Data

In your server.js file, modify the /users route to return a list of users as JSON:

// Route to get user data
app.get('/users', (req, res) => {
  const users = [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' },
  ];
  res.json(users); // Send the users array as JSON
});

Now, when you visit http://localhost:3000/users, you’ll see the following JSON data:

[
  {
    "id": 1,
    "name": "John Doe"
  },
  {
    "id": 2,
    "name": "Jane Doe"
  }
]

Receiving JSON Data

Next, let’s modify the /users POST route to accept and log user data sent from the frontend. First, you need to tell Express to handle JSON data by adding this line of code at the top of your file (just below the const app = express(); line):

app.use(express.json());

Now, modify the /users POST route to log the received data:

// Route to create a new user
app.post('/users', (req, res) => {
  const newUser = req.body; // Access the JSON data sent in the request
  console.log('New user:', newUser);
  res.send('User created!');
});

To test this, you can use Postman to send a POST request with JSON data. Here’s an example of the data you might send:

{
  "id": 3,
  "name": "Sam Smith"
}

When you send the request, the server will log the new user data in the terminal, and you’ll get a response saying “User created!”

Step 5: Structuring Your Backend

As your backend grows, you’ll want to organize your code in a way that makes it easy to manage. Right now, everything is in one file (server.js), but that’s not going to work for larger projects.

Creating a Routes Folder

Let’s create a new folder to organize our routes. In your project folder, create a new folder called routes, and inside that folder, create a file called users.js. This file will handle all user-related routes.

Move the user routes from server.js to users.js:

const express = require('express');
const router = express.Router();

// Route to get user data
router.get('/', (req, res) => {
  const users = [
    { id: 1, name: 'John Doe' },
    { id: 2, name: 'Jane Doe' },
  ];
  res.json(users);
});

// Route to create a new user
router.post('/', (req, res) => {
  const newUser = req.body;
  console.log('New user:', newUser);
  res.send('User created!');
});

module.exports = router;

Now, in server.js, import the routes and use them:

const express = require('express');
const app = express();
const PORT = 3000;

app.use(express.json());

// Import the user routes
const userRoutes = require('./routes/users');
app.use('/users', userRoutes);

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

With this structure, your code is cleaner and easier to maintain. Each part of your app (users, posts, etc.) will have its own file with its own routes.

Step 6: Next Steps

You’ve now got the basics of a Node.js backend! You’ve built a simple server, learned about routes and HTTP methods, handled JSON data, and organized your code. From here, you can expand your backend to include more features like database integration, authentication, and more.

In the next chapter, we’ll dive deeper into connecting your backend with your React Native app, so your frontend can start talking to your backend. The real magic happens when everything works together!

🚀

0x3d.Site