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

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 ( FeathersJS Users {users.map((user) => ( {user.email} ))} ); } 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!

Feb 16, 2025 - 17:12

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!