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.
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.