Serverless — Frontend

Develop a serverless frontend application.

Serverless — Frontend

There are many options available to develop a serverless frontend application. In this article, we are going to

• Create a Vite-based frontend React application.
• Create the serverless frontend stack and integrate the backend Serverless Stack (SST) application with the frontend application.
• Refactor our project to use Yarn workspaces.
• Use a generator to generate the GraphQL client code.
• Integrate a test framework with our frontend application.

This article is part of the Serverless for Beginners series.

The source code can be found in this repository.

Getting Started

React Typescript Project

For our frontend application, we are going to use Vite and the react-ts template.

# yarn create vite frontend --template react-ts
# cd frontend
# yarn && yarn dev

The commands create a Vite React project and start the application at port 3000.

A Vite React Application

A Vite React Application

Notes:

• Alternatively, we can still use the Create React App.
• Check out Why Vite.
• There are Javascript/Typescript templates for vanilla, vue, react, preact, lit, and svelte.

Project Layout

Our project layout should look similar to the below screenshot. We create the frontend application in its folder.

Project Layout

Serverless Frontend Stack