Create a New React.js App

We are now ready to work on our frontend. So far we’ve built and deployed our backend API and infrastructure. We are now going to build a web app that connects to our backend.

We are going to create a single page app using React.js. We’ll use the Vite project to set everything up.

Create a New React App

Run the following command in the packages/ directory.

$ npm create vite@latest frontend -- --template react-ts

This will create your new project in the frontend/ directory.

Let’s update the name of the package in the packages/frontend/package.json. Replace this:

- "name": "frontend",
+ "name": "@notes/frontend",

Make sure to use the name of your app instead of notes.

Now install the dependencies.

$ cd frontend
$ npm install

This should take a second to run.

We also need to make a small change to our Vite config to bundle our frontend.

Add the following below the plugins: [react()], line in packages/frontend/vite.config.ts.

build: {
  // NOTE: Needed when deploying
  chunkSizeWarningLimit: 800,
},

Add the React App to SST

We are going to be deploying our React app to AWS. To do that we’ll be using the SST StaticSite component.

Create a new file in infra/web.ts and add the following.

import { api } from "./api";
import { bucket } from "./storage";
import { userPool, identityPool, userPoolClient } from "./auth";

const region = aws.getRegionOutput().name;

export const frontend = new sst.aws.StaticSite("Frontend", {
  path: "packages/frontend",
  build: {
    output: "dist",
    command: "npm run build",
  },
  environment: {
    VITE_REGION: region,
    VITE_API_URL: api.url,
    VITE_BUCKET: bucket.name,
    VITE_USER_POOL_ID: userPool.id,
    VITE_IDENTITY_POOL_ID: identityPool.id,
    VITE_USER_POOL_CLIENT_ID: userPoolClient.id,
  },
});

We are doing a couple of things of note here:

1. We are pointing our StaticSite component to the packages/frontend/ directory where our React app is.
2. We are passing in the outputs from our other components as environment variables in Vite. This means that we won’t have to hard code them in our React app. The VITE_* prefix is a convention Vite uses to say that we want to access these in our frontend code.

Adding to the app

Let’s add this to our config.

Add this below the await import("./infra/api"); line in your sst.config.ts.

await import("./infra/web");

Deploy Our Changes

If you switch over to your terminal, you will notice that your changes are being deployed.

+  Complete
   Api: https://5bv7x0iuga.execute-api.us-east-1.amazonaws.com
   Frontend: https://d1wyq46yoha2b6.cloudfront.net
   ...

Starting the React App

The sst dev CLI will automatically start our React frontend by running npm run dev. It also passes in the environment variables that we have configured above.

You can click on Frontend in the sidebar or navigate to it.

This should show where your frontend is running locally.

VITE v5.3.4  ready in 104 ms

➜  Local:   http://127.0.0.1:5173/
➜  Network: use --host to expose
➜  press h + enter to show help

If you head to that URL in your browser you should see.

Change the Title

Let’s quickly change the title of our note taking app.

Open up packages/frontend/index.html and edit the title tag to the following:

<title>Scratch - A simple note taking app</title>

Now we are ready to build our frontend! We are going to start by creating our app icon and updating the favicons.