Generating a zero-dependencies frontend client for your Platformatic application

One of Platformatic’s key goals is to remove all friction in backend development– including by making it more straightforward for most people to consume REST APIs from the frontend.

With this goal in mind, today, today we are launching a new client generator to generate a fully-typed client with no dependencies. It is based on fetch, so it runs on every JavaScript runtime.

This work was done in partnership with my friend Stefano Magni, who sent in a fantastic contribution (#1043)!

This new generator leverages REST APIs, the bread and butter of every developer. Given that Platformatic comes with the automatic generation of an OpenAPI specification for your API, we can generate a type-safe client with zero dependencies.

This new client pairs exceptionally well with both Platformatic DB and Platformatic Composer, allowing you to call your API swiftly.

Platformatic CLI allows you to generate the front-end code to import in your front-end application to consume the Platformatic REST API with platformatic frontend <URL> ts.

Check out this guide to learn how to:

How to generate the front-end TypeScript code to consume the Platformatic app REST API.
Create React and Vue.js components that read, create, and update an entity.
Import the new component in your front-end application.

Below is an example of the new generated client in action using React:

import { useEffect, useState } from 'react'

// getMovies, createMovie, and updateMovie are all functions automatically generated by Platformatic
// in the `api.ts` module.
import { getMovies, createMovie, updateMovie, setBaseUrl } from './api'

setBaseUrl('http://127.0.0.1:3042') // configure this according to your needs

export function PlatformaticPlayground() {
  const [movies, setMovies] = useState<Awaited<ReturnType<typeof getMovies>>>([])
  const [newMovie, setNewMovie] = useState<Awaited<ReturnType<typeof createMovie>>>()

  async function onCreateMovie() {
    const newMovie = await createMovie({ title: 'Harry Potter' })
    setNewMovie(newMovie)
  }

  async function onUpdateMovie() {
    if (!newMovie || !newMovie.id) return

    const updatedMovie = await updateMovie({ id: newMovie.id, title: 'The Lord of the Rings' })
    setNewMovie(updatedMovie)
  }

  useEffect(() => {
    async function fetchMovies() {
      const movies = await getMovies({})
      setMovies(movies)
    }

    fetchMovies()
  }, [])

  return (
    <>
      <h2>Movies</h2>

      {movies.length === 0 ? (
        <div>No movies yet</div>
      ) : (
        <ul>
          {movies.map((movie) => (
            <li key={movie.id}>{movie.title}</li>
          ))}
        </ul>
      )}

      <button onClick={onCreateMovie}>Create movie</button>
      <button onClick={onUpdateMovie}>Update movie</button>

      {newMovie && <div>Title: {newMovie.title}</div>}
    </>
  )
}