Build a Serverless React App with Midway FaaS: Step‑by‑Step Guide

Many developers have asked for a front‑end example that works with Midway FaaS, and this article provides exactly that.

Repository: https://github.com/midwayjs/midway-faas

Midway FaaS not only offers capabilities on the function side but also integrates a smooth experience for the front‑end. Combining front‑end code with FaaS results in a lightweight solution that is easier to coordinate thanks to the nature of functions.

Unified Development

Unified development means front‑end and back‑end code are built, debugged, tested, and deployed within a single project, simplifying the workflow.

Front‑end and back‑end development, debugging, and publishing become simpler.

High‑density function deployment saves machine resources.

Less effort is needed for operations and maintenance.

We demonstrate this integration using React.

Getting Started

First, install the Midway FaaS CLI tool: $ npm i @midwayjs/faas-cli -g Use the f create command and select the faas-react template. After confirming the prompts, the example project is downloaded.

Local Development and Debugging

The example code is generated from create‑react‑app and includes a Midway FaaS‑specific unified structure. The project tree looks like this:

react_xxx
├── README.md
├── f.yml                # function configuration file
├── package.json
├── public
│   ├── favicon.ico
│   ├── index.html
│   ├── logo192.png
│   ├── logo512.png
│   ├── manifest.json
│   └── robots.txt
├── src                  # React source code
│   ├── App.test.tsx
│   ├── App.tsx
│   ├── Detail.tsx
│   ├── Home.tsx
│   ├── Layout.tsx
│   ├── List.tsx
│   ├── apis            # function code directory
│   │   ├── config
│   │   │   └── config.default.ts
│   │   ├── configuration.ts
│   │   └── index.ts
│   ├── common.css
│   ├── home.css
│   ├── index.css
│   ├── index.tsx
│   ├── layout.css
│   ├── logo.svg
│   ├── react-app-env.d.ts
│   ├── serviceWorker.ts
│   ├── setupProxy.js   # custom webpack dev server
│   └── setupTests.ts
└── tsconfig.json        # TypeScript configuration

4 directories, 29 files

The function code resides in src/apis and can be invoked as API endpoints. After installing dependencies ( npm install) you can start the project locally: npm run dev The development server automatically calls the functions to fetch data and renders the result at http://127.0.0.1:3000/ .

Three HTTP interfaces are defined; each request triggers a corresponding function. Functions are implemented as class methods, allowing you to return HTML, files, set response headers, or configure Koa middleware. Lifecycle hooks let you initialize connections, load dependencies, and inject environment‑specific configurations.

Deployment

Before deploying to the cloud, build the front‑end assets: npm run build The compiled files are placed in the build directory, which Midway FaaS automatically serves.

Deploy with: f deploy By default this publishes to Alibaba Cloud, but Midway FaaS also supports other cloud providers. After binding a domain, the application is accessible online.

Conclusion

Congratulations! You now have a streamlined workflow that boosts productivity by unifying front‑end and serverless function development. Explore more examples in the repository and give the project a star.