Build a SaaS App with a Full-Stack React and AWS
Tags: aws, cloud, react, frontend
Published: 2021-10-07 16:09:29

---
title: Build a SaaS App with a Full-Stack React and AWS
published: true
description: A full-stack React application with a Serverless backend hosted on AWS. Build high-scalable applications without managing servers.
tags: aws, cloud, react, frontend
cover_image: https://gen.postmage.com/generate/2442b225-4afe-41be-a292-41e0a429ff5c/5880ddef-7cc1-4e3b-a5ac-66861e1c77f9/image.png?url=https://creativedesignsguru.com/building-saas-full-stack-react-aws/
canonical_url: https://creativedesignsguru.com/building-saas-full-stack-react-aws/
---

In this article, you'll be able to build a **full-stack React SaaS app** using a **Serverless REST API backend**. You'll deploy the frontend and the backend on your AWS account.

## React Frontend

### Run the frontend locally

First, we'll start to build the frontend in React. Currently, one of the most powerful React frameworks is Next JS.

I always start my React projects with the <a href="https://github.com/ixartz/Next-js-Boilerplate" target="_blank" rel="noopener noreferrer">Next JS Boilerplate</a>. A starter template for writing high-quality code with **preconfigured ESLint and TypeScript**. It also includes code formatter with Prettier, styling with Tailwind CSS and Visual Studio Code integration.

After forking and git cloning the **Next JS Boilerplate** project, you can run the following command:

```shell
npm install
npm run dev
```

Open `http://localhost:3000` with your favorite browser, you should get this result:

![Next JS Boilerplate Template screenshot](https://creativedesignsguru.com/assets/images/themes/next-js-boilerplate.png)

### Deploy the React Frontend

After making sure it works locally, you can deploy your **React application on AWS**. There is an Amplify Hosting service perfect for this use case. It helps to host your frontend on AWS.

Before deploying the React Frontend, you need to replace the `build` command in `package.json` file with the following code:

```js
"build": "next build && next export",
```

Connect your AWS account and browse to <a href="https://console.aws.amazon.com/amplify/home" target="_blank" rel="noopener noreferrer">AWS Amplify</a>. Scroll to the bottom and click on the `Get Started` button located in the `Host your web app` section:

![Amplify hosting git wizard](https://creativedesignsguru.com/assets/images/themes/amplify-hosting-git-repo.png)

Select the Git service provider and choose the correct repository to deploy:

Then, you go to the end of the setup process and click the `Save and deploy` button:

![Amplify hosting deployment summary](https://creativedesignsguru.com/assets/images/themes/amplify-hosting-review-summary.png)

AWS Amplify kicks start the deployment. After a couple of minutes, when all the steps turn green, your frontend is accessible on the `amplifyapp.com` domain.

It should look exactly the same as in the local environment.

## Serverless Backend

### Run the Backend locally

In this section, we'll handle the Backend **REST API using Serverless Framework** provided by Serverless Inc. I built another boilerplate code but this time for Backend, you can find it on GitHub at <a href="https://github.com/ixartz/Serverless-Boilerplate-Express-TypeScript" target="_blank" rel="noopener noreferrer">Serverless TypeScript Boilerplate</a>.

**Serverless TypeScript Boilerplate** is configured with the `dotenv` package and local support. So, you can run it in development mode on your local computer. The boilerplate was built with **developer-first experience** with ESLint, Prettier and Husky.

After forking and git cloning the <a href="https://github.com/ixartz/Serverless-Boilerplate-Express-TypeScript" target="_blank" rel="noopener noreferrer">Serverless TypeScript Boilerplate</a> project, you can run the following command:

```shell
npm install
npm run dev
```

You can now test if everything works correctly by running this command:

```shell
curl http://localhost:4000
```

It should return a classic `Hello world` in JSON format.

Now, you can start making some changes in the boilerplate code by replacing the `Hello world` message in your `src/handler.ts` file by:

```ts
res.json({
  title: 'Page title',
})
```

### Deploy the Serverless Backend

After making the necessary changes, we are now ready to deploy the code on AWS Lambda with the following command line:

```shell
npm run deploy-prod
```

It'll take some time to package your backend code and **deploy it on your AWS account**. At the end of the deployment, the console will print out the backend endpoint in the following format `https://XXXXXXXXX.execute-api.us-east-1.amazonaws.com/`.

You can use any HTTP client to test the endpoint. For example, you can run:

```shell
curl https://XXXXXXXXX.execute-api.us-east-1.amazonaws.com/
```

You should get the following message: `{"title":"Page title"}`

## Integration between React and Backend

After deploying the frontend and the backend, it's time to connect the two. You'll be able to call the **REST API from the React application** and retrieve information.

You need to start installing **data fetching** React Hook in the frontend:

```shell
npm install swr
```

Then, you need to define a `swr` global configuration in your `_app.tsx` file by adding:

```tsx
...
import { SWRConfig } from 'swr';
...
const MyApp = ({ Component, pageProps }: AppProps) => (
  <SWRConfig
    value={{
      fetcher: (resource, init) =>
        fetch(resource, init).then((res) => res.json()),
    }}
  >
    <Component {...pageProps} />
  </SWRConfig>
);
```

In your `index.tsx` file, you can replace the whole file by:

```tsx
import useSWR from 'swr';

const Index = () => {
  const { data } = useSWR(
    'https://XXXXXXXXX.execute-api.us-east-1.amazonaws.com'
  );

  if (!data) return <div>loading...</div>;

  return <>Name: {data.title}</>;
};

export default Index;
```

You are ready to deploy automatically your React code on AWS Amplify with `git commit` and `git push`. Here is the result:

## Going further

Your React frontend and the REST backend are now working and deployed on your AWS account. To build **fully working SaaS products**, you need also to implement authentication, recurring payment, landing page, user dashboard, form handling, error handling, CRUD operation, database, etc. Instead of building everything yourself from scratch, **start your SaaS business faster** with a [React SaaS Template](https://nextlessjs.com) and focus on the things that make your product unique.

[![Next JS SaaS Boilerplate Starter](https://creativedesignsguru.com/assets/images/themes/nextless-react-saas-boilerplate.png)](https://nextlessjs.com)