Full-Stack FeathersJS Setup with React, Node.js, Express, and MongoDB

Fahed Selmi — Sun, 16 Feb 2025 15:23:57 +0000

Full-Stack FeathersJS Setup with React, Node.js, Express, and MongoDB

FeathersJS is a lightweight framework for building real-time applications with REST and WebSocket APIs. In this guide, we'll walk through setting up a full-stack FeathersJS application with a React frontend, a Node.js + Express backend, and MongoDB as the database.

Prerequisites

Before we begin, make sure you have the following installed:

Node.js (v16 or later)
MongoDB (running locally or on a cloud service like MongoDB Atlas)
Yarn or npm

Setting Up the Backend (FeathersJS + Express + MongoDB)

Step 1: Initialize a Feathers App

First, let's create a FeathersJS application for the backend:

npx @feathersjs/cli generate app

Follow the prompts and choose the following options:

Transport: REST and WebSockets
Database: MongoDB
Authentication: Yes (choose JWT-based authentication)

Step 2: Configure MongoDB Connection

Install the MongoDB adapter:

yarn add @feathersjs/mongodb mongodb

Modify src/app.js to connect to MongoDB:

const { MongoClient } = require('mongodb');

const mongoClient = new MongoClient('mongodb://localhost:27017');
mongoClient.connect().then(() => {
  const db = mongoClient.db('feathers_app');
  app.set('mongoClient', db);
});

Step 3: Create a Service

To create a new service, run:

npx @feathersjs/cli generate service

Choose the following options:

Service Name: users
Database Adapter: MongoDB
Path: /users

Step 4: Configure Authentication

Enable authentication by modifying src/authentication.js:

app.configure(authentication({ secret: 'your-secret-key' }));

Then, restart your server:

yarn dev

Your backend is now running on http://localhost:3030.

Setting Up the Frontend (React + FeathersJS Client)

Step 1: Initialize a React App

npx create-react-app feathers-client
cd feathers-client

Step 2: Install Feathers Client

Inside your React app, install FeathersJS client dependencies:

yarn add @feathersjs/client axios

Step 3: Connect to FeathersJS Backend

Create a feathers.js file in src/:

import feathers from '@feathersjs/client';
import io from 'socket.io-client';

const socket = io('http://localhost:3030');
const client = feathers();
client.configure(feathers.socketio(socket));
client.configure(feathers.authentication());

export default client;

Step 4: Fetch Data from Feathers Service

Modify App.js to fetch users:

import { useEffect, useState } from 'react';
import client from './feathers';

function App() {
  const [users, setUsers] = useState([]);

  useEffect(() => {
    client.service('users').find().then((response) => {
      setUsers(response.data);
    });
  }, []);

  return (
    <div>
      <h1>FeathersJS Users</h1>
      <ul>
        {users.map((user) => (
          <li key={user._id}>{user.email}</li>
        ))}
      </ul>
    </div>
  );
}

export default App;

Step 5: Authentication with FeathersJS

Modify feathers.js to include authentication:

client.authenticate({
  strategy: 'local',
  email: 'test@example.com',
  password: 'password'
}).then(response => console.log('Authenticated!', response))
.catch(e => console.error('Authentication failed', e));

Running the Full-Stack Application

Start the backend:

yarn dev

Start the frontend:

yarn start

Now, your React frontend should be able to communicate with the FeathersJS backend, fetching users and handling authentication.

Conclusion

FeathersJS makes it easy to build real-time applications with REST and WebSocket support. In this guide, we set up a full-stack FeathersJS app using React, Node.js, Express, and MongoDB. You can extend this further by adding more services, integrating with authentication providers, or deploying the app.

What’s Next?

Secure your API with role-based access control (RBAC)
Deploy your app using Docker or a cloud provider
Extend the FeathersJS client to include user authentication flows

Have any questions or suggestions? Drop them in the comments below!

DEV Community: Fahed Selmi

Full-Stack FeathersJS Setup with React, Node.js, Express, and MongoDB