In the ever-evolving world of web development, having robust tools at our disposal can make a world of difference. Remult is one such tool, a CRUD (Create, Read, Update, Delete) framework designed specifically for Fullstack TypeScript developers. In this article, we’ll delve into the features and benefits of Remult and explore how it can streamline our development process.

What is Remult?

Remult is a powerful TypeScript framework that simplifies the creation of web applications with a focus on database operations. It provides a comprehensive set of tools and utilities to manage data and user interfaces effortlessly. With Remult, developers can efficiently build applications that interact with databases while maintaining type safety throughout the development process.

Key Features of Remult

1. Type Safety: TypeScript is known for its type safety, and Remult leverages this by providing strong type checking for database operations. This means we can catch potential bugs at compile time rather than runtime.
2. CRUD Operations: Remult abstracts the complexities of database operations, making it easy to create, read, update, and delete records. It supports multiple databases, making it flexible for various project requirements.
3. User Interface Components: Remult comes with a set of UI components that are easy to integrate into our web application. These components are designed to work seamlessly with the underlying data structure.
4. Authentication and Authorization: Security is a top priority in web development, and Remult offers built-in authentication and authorization mechanisms to safeguard your application’s data.
5. Extensibility: Remult is highly extensible, allowing us to customize and extend its functionality to meet the specific needs of our project.

Getting Started with Remult

To get started with Remult, we’ll need to install it using npm or yarn. Once installed, we can initialize a new Remult project and start defining our data models and user interfaces. The framework provides clear documentation and examples to guide us through the process.

Install required packages

We need Express to serve our app’s API, and, of course, Remult. For development, we’ll use tsx to run the API server

npm i express remult
npm i --save-dev @types/express tsx

Create the API server project

The starter API server TypeScript project contains a single module that initializes Express, and begins listening for API requests.

Let’s open our IDE and add the following entry to the compilerOptions section of the tsconfig.json file to enable the use of Synthetic Default Imports and ES Module Interop in the app.

// tsconfig.json

{
...
  "compilerOptions": {
    ...
    "allowSyntheticDefaultImports": true,
    "esModuleInterop": true,
   ...
  }
...
}

• Let’ s create a server folder under the src/ folder created by Angular cli.
• let’s create an index.ts file in the src/server/ folder with the following code:

// src/server/index.ts

import express from "express"

const app = express()

app.listen(3002, () => console.log("Server started"))

Bootstrap Remult in the back-end

Remult is loaded in the back-end as an Express middleware.

• Create an api.ts file in the src/server/ folder with the following code:

// src/server/api.ts

import { remultExpress } from "remult/remult-express"

export const api = remultExpress()

• Add the highlighted code lines to register the middleware in the main server module index.ts.

// src/server/index.ts

import express from "express"
import { api } from "./api"

const app = express()
app.use(api)

app.listen(3002, () => console.log("Server started"))

Proxy API requests from Angular DevServer to the API server

the API server will be listening on http://localhost:3002, while the Angular dev server is served from the default http://localhost:4200.

We’ll use the proxy feature of Angular dev server to divert all calls for http://localhost:4200/api to our dev API server.

Let’s create a file proxy.conf.json in the root folder, with the following contents:

// proxy.conf.json

{
  "/api": {
    "target": "http://localhost:3002",
    "secure": false
  }
}

Run the app

Let us add 2 scripts : the first called dev that will run the angular dev server with the proxy configuration we’ve set

and a second script called dev-node to run the api.

// package.json

"dev": "ng serve --proxy-config proxy.conf.json --open",
"dev-node": "tsx watch src/server",

Open a terminal and start the angular dev server.

npm run dev

Let’s open another terminal and start the node server

npm run dev-node

The server is now running and listening on port 3002. tsx is watching for file changes and will restart the server when code changes are saved.

The default Angular app main screen should be displayed on the regular port – 4200. Open it in the browser at http://localhost:4200/.

Conclusion

Remult is a game-changer for Fullstack TypeScript developers. It combines the power of TypeScript with a robust set of tools for database interaction, making it easier than ever to build scalable and secure web applications.

It offers us a type-safe, efficient, and extensible solution for CRUD operations in Fullstack TypeScript applications.