Backend deployment using Express and Json databases in React Projects

When building React projects, having a robust backend is essential for handling data processing, authentication, and other server-side functionalities. In this blog post, we will explore how to deploy a backend using Express, a popular Node.js framework. By leveraging Express, you can seamlessly integrate server-side logic into your React projects, allowing for a smoother user experience. So let's dive into the world of backend deployment using Express in React projects!

Express and Node

Before we get started, let's briefly discuss Express and Node.js. Express is a fast and minimalist web application framework for Node.js, providing a simple and flexible way to build web applications and APIs. Node.js is an open-source, cross-platform JavaScript runtime environment that allows you to execute JavaScript code outside of a browser. Together, Express and Node.js form a powerful combination for developing server-side applications.

Express and JSON Databases (Configuration)

Express integrates well with various databases, including JSON-based databases. JSON databases are lightweight and ideal for small to medium-sized projects. You can store data in JSON files or use libraries like json-server or lowdb to handle the database operations. These databases are easy to configure and provide a great way to get started with backend development in React projects.

Logic Business Rules (Controllers and Routers)

In Express, you can structure your backend code using controllers and routers. Controllers are responsible for handling specific logic related to routes or API endpoints, such as processing requests, interacting with the database, and sending responses. Routers define the routes for your server and map them to their respective controllers. This separation of concerns allows for better code organization and maintainability.

Detailed guide for Backend development using Express and JSON databases

Step 1: Set up the project

• Create a new directory for your project.
• Navigate to the project directory in your terminal.
• Initialize a new Node.js project using the npm init command.
• Install the necessary packages, such as Express and jsonfile, using the command npm install express jsonfile.

Step 2: Create the Express server

• Create a new file, e.g., index.js, in the project directory.
• Open the index.js file and require the required modules: Express and jsonfile.
• Define the port number on which your server will run.
• Set up the basic route handling:
• Enable JSON request parsing using the express.json() middleware.
• Define your routes.

Step 3: Create endpoints to interact with the JSON database

• Decide on the endpoints you want to create for managing your pages (e.g.,rooms and bookings).
• Implement routes for handling GET, POST, PUT, and DELETE requests for these endpoints.
• Read the database JSON file using jsonfile.readFileSync().
• Use the appropriate route handler to perform the desired operations on the data (e.g., add, update, delete).

Step 4: Start the server

• Save the server.js file.
• Run the command node server.js in your terminal to start the server.
• Verify that the server is running by checking the console output for a message indicating the server is listening on the specified port.

Some Code

Let's take a look at some code examples to illustrate how Express can be used in React projects.

Example 1: Setting up a basic Express server

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

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

app.listen(3000, () => {
  console.log('Server started on port 3000');
});

Example 2: Using controllers and routers

// UserController.js
exports.getUser = (req, res) => {
  // Logic to fetch user data from the database
  res.json({ name: 'John Doe', age: 25 });
};

// userRoutes.js
const express = require('express');
const router = express.Router();
const userController = require('./UserController');

router.get('/user', userController.getUser);

module.exports = router;

Example of index.js used for backend in a real project

See github links below

const express = require('express');
const cors = require('cors');


const app = express();
const PORT = 3009;

app.use(express.json());
app.use(cors());

// Define your routes here

const RoomsRouter = require('./routers/RoomsRouter');
const BookingRouter = require('./routers/BookingRouter');

app.use('/api', RoomsRouter);
app.use('/api', BookingRouter);

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

Important references

Here are some important links related to the technologies discussed in this post:

React:

1. React Official Website: https://reactjs.org/
2. React Documentation: https://reactjs.org/docs/
3. React Router (for handling client-side routing): https://reactrouter.com/
4. React Context API (for managing global state): https://reactjs.org/docs/context.html
5. React Hooks (for managing state and side effects): https://reactjs.org/docs/hooks-intro.html

npm (Node Package Manager):

1. npm Official Website: https://www.npmjs.com/
2. npm Documentation: https://docs.npmjs.com/
3. Search for Packages on npm: https://www.npmjs.com/search

Node.js:

1. Node.js Official Website: https://nodejs.org/
2. Node.js Documentation: https://nodejs.org/en/docs/
3. Node.js Package Registry (for finding Node.js packages): https://www.npmjs.com/

Express:

1. Express Official Website: https://expressjs.com/
2. Express Documentation: https://expressjs.com/en/4x/api.html
3. Express Middleware (for extending Express functionality): https://expressjs.com/en/guide/using-middleware.html
4. Express Router (for creating modular route handlers): https://expressjs.com/en/guide/routing.html

These links will provide you with comprehensive documentation, examples, and resources to further explore and enhance your knowledge of these technologies.

React Project Development using these technologies

Frontend : https://react-frontend-omega.vercel.app/

Frontend Repository:

https://github.com/sebassd/react-frontend

Backend Repository:

https://github.com/sebassd/backend-react

This technologie was used for a project developed in the FULL Stack Web Development career by Flatiron School

Hoping this post has been useful to your project!