Building a Web App with RESTHeart in 10 minutes!

Effortless Web Development with RESTHeart and MongoDB

In today’s fast-paced development world, simplicity and speed are crucial. RESTHeart offers developers a streamlined, no-fuss way to build powerful backends using MongoDB, thanks to its built-in REST API. Let’s take a look at how easy it is to create a simple messaging web app using RESTHeart as the backend. You can also explore the live demo of the web app here and play with the code on CodePen!

Overview of the WebApp

This web app allows users to post and view messages. The frontend is built using Alpine.js and Pico.css, while the backend leverages RESTHeart’s capabilities to interact with MongoDB. Here’s the core functionality:

• Post messages: Users can submit messages through a simple form.
• View messages: The app retrieves messages from the MongoDB backend and displays them.

Backend code: 0 lines. RESTHeart handles it all 🚀

Frontend code: HTML: 67 lines, CSS: 45 lines and JavaScript: 16 lines 🚀

NOTE: For simplicity, this demo web app does not include authentication and authorization mechanisms. However, RESTHeart fully supports these features out of the box, without requiring you to write any additional code. RESTHeart’s security framework handles authentication and authorization effortlessly, enabling you to protect your data and control access. To learn how to implement security in your own projects, check out the detailed tutorial at RESTHeart Security Tutorial.

The Backend: RESTHeart’s Magic

RESTHeart acts as a bridge between your MongoDB instance and your frontend, exposing a RESTful API out of the box. Without needing to write any backend code or complex database queries, you can directly access, query, and manipulate MongoDB data via HTTP.

In this app, we interact with RESTHeart’s API using standard fetch calls in JavaScript. The data exchange is simple and direct:

const fetchDocs = (page) =>
  fetch(
    encodeURI(`https://demo.restheart.org/messages?page=${page}&pagesize=8&filter={"from":{"$exists":true},"message":{"$exists":true}}`)
  ).then((response) => response.json());

This line of code fetches messages stored in MongoDB through RESTHeart. The MongoDB collection is queried directly using RESTHeart’s built-in support for filtering and pagination.

Posting a New Message

When a user submits a message, the app sends the data to RESTHeart using the POST method:

const post = (from, message) =>
  fetch("https://demo.restheart.org/messages", {
    method: "post",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json"
    },
    body: JSON.stringify({ from, message })
  });

RESTHeart handles the MongoDB insertion without requiring custom server logic, making it extremely convenient for developers to focus on the frontend experience.

The Frontend: Simplicity with Alpine.js and Pico.css

Alpine.js, a lightweight JavaScript framework, allows us to manage state and DOM interactions. In this web app, it controls the page navigation, the form modal, and the display of messages.

Here’s how we use Alpine.js to handle pagination:

<div class="d-flex text-center">
  <a href="#" class="no-decoration" @click="if (page > 1) docs = await fetchDocs(--page)">
    <h5>&lt;</h5>
  </a>
  <h5 x-text="page"></h5>
  <a href="#" class="no-decoration" @click="docs = await fetchDocs(++page)">
    <h5>&gt;</h5>
  </a>
</div>

The styling is kept simple with Pico.css, which allows the app to have a clean and modern UI without the need for extensive CSS writing.

Why RESTHeart?

RESTHeart simplifies MongoDB development by abstracting away the complexity of backend infrastructure. Here are a few reasons why it’s the ideal choice for developers:

• No backend code: You don’t need to write any server-side logic. RESTHeart handles the CRUD operations with MongoDB automatically.
• Built-in REST, GraphQL and Websocket APIs: With RESTHeart, your MongoDB data is instantly accessible through a robust and secure API.
• Scalability: RESTHeart is designed to handle production environments and scales easily with your application’s needs.
• Open source: RESTHeart is free to use and has a strong community behind it, offering support and continuous improvements.

Conclusion

RESTHeart makes it incredibly easy to create applications backed by MongoDB, allowing developers to focus on the frontend while trusting RESTHeart to handle database interactions seamlessly. In this demo app, we see just how little code is needed to create a functional messaging platform thanks to RESTHeart’s powerful yet easy-to-use API.

Whether you’re building a simple web app or a complex enterprise solution, RESTHeart can drastically reduce your development time and effort. Try out the demo web app online here and experience the simplicity of backend development with RESTHeart!