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 (
    <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: '[e-mail]',
  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!