Creating a React Typescript Tailwind Front End application in AWS with CDK on S3 and CloudFront

A React Tailwind CSS Typescript deployed with AWS CDK onto S3 & CloudFront

This article will show how to create a responsive React application using the Tailwind CSS Framework. It will be deployed using AWS CDK to an S3 bucket with CloudFront. This will also lay out how to make restful calls for a basic frontend that will make RESTful API calls.

A complete walk-through will be presented from getting the code set up and deploying in an AWS environment. Even if you only need a portion of this for your own needs, you should be able to reference the material present for that which concerns you:

• React/Tailwind CSS
• Responsive Design
• RESTful Front end integration
• CDK Infrastructure as Code
• AWS Deployment with CDK
• Use of AWS Services such as S3 and CloudFront

The BlogCentral.com React Tailwind Typescript application

Prerequisites

You will need to have Node, Python, AWS CLI and AWS CDK installed on your computer.

python --version
aws --version
cdk --version
node -v

GitHub Repository

All code for this article can be found at https://github.com/collin-smith/react-cdk/

CDK Infrastructure Project Setup (CDK)

We will now create the Python CDK Project that we will use as our Infrastructure as Code to deploy the React Tailwind application to our AWS environment.

cd c:\projects
mkdir react-cdk
cd react-cdk
cdk init app --language python
source .venv/bin/activate
.venv\Scripts\activate.bat
python -m pip install --upgrade pip
python -m pip install -r requirements.txt

Now your basic CDK project has been set up.

Visual Studio Setup

We will use Visual Studio Code as our Source Code Editor for this project. You can use others but it is pretty decent and it is free.

The key file to note here is C:\projects\react-cdk\react_cdk\react_cdk_stack.py

This is your CDK Stack code that will be executed to deploy your React application to the AWS environment.

Creating the React application

Now we will create the basic React Typescript application

cd c:\projects\react-cdk
npx create-react-app reactapp --template typescript
cd c:\projects\react-cdk\reactapp
npm install react-router-dom

Then you should be able to just run the React application in it’s folder

cd c:\projects\react-cdk\reactapp
npm start

You will likely see the default React application at http://localhost:3000

Now we have the basic Typescript React application in place.

Backend Endpoints with JSON-SERVER

For this article we will taking a simple approach to what the RESTful backend endpoints will be. We will be using Json-server to create some endpoints that will update a text file containing the data.

Install json-server

npm install json-server

Create the db.json file at C:\projects\react-cdk\reactapp\data\db.json

Run the json-server

In a new command prompt run the following

cd c:\projects\react-cdk\reactapp
npx json-server --watch data/db.json --port 8000

You should now see that the backend RESTful commands can be executed and you can test with http://localhost:8000/blogs as follows

Tailwind CSS Setup

We will now install TailwindCSS framework using the following Tailwind instructions.

cd c:\projects\react-cdk\reactapp
npm install -D tailwindcss
npx tailwindcss init

The tailwind.config.js file for this project has been updated as can be seen in https://github.com/collin-smith/react-cdk/blob/main/reactapp/tailwind.config.js. It should be stored in the main folder of the reactapp. It has been updated to apply to tsx or Typescript files as well.

For the purposes of this project the tailwind.config.js will hold the configuration of certain palette colors and a custom font that will be used for the project.

The src/input.css file will contain the additional configuration information including how to import custom fonts and certain styles that you wish to centralize for your application

When developing you can dynamically generate the src/output.css file to incorporate information from tailwind.config.js and src/input.css to create a css file for your application to use.

You can enable this by opening a new terminal and executing the following commands:

cd c:\projects\react-cdk\reactapp
npx tailwindcss -i ./src/input.css -o ./src/output.css --watch

You should see that whenever the configuration files are updated then the src.output.css file is updated as well.

React Project Setup (Frontend)

You should install the following libraries for this project as well

cd c:\projects\react-cdk\reactapp
npm install react-router-dom

With all the basic setup we can now start building out the front end application using React, Typescript and Tailwind together.

The React files you will need to add to this project are the following:

• C:\projects\react-cdk\reactapp\src\components\BlogList.tsx
• C:\projects\react-cdk\reactapp\src\components\Navigation.tsx
• C:\projects\react-cdk\reactapp\src\hooks\useFetch.tsx
• C:\projects\react-cdk\reactapp\src\interfaces\Blog.tsx
• C:\projects\react-cdk\reactapp\src\pages\AddBlog.tsx
• C:\projects\react-cdk\reactapp\src\pages\EditBlog.tsx
• C:\projects\react-cdk\reactapp\src\pages\Home.tsx
• C:\projects\react-cdk\reactapp\src\pages\ViewBlog.tsx
• C:\projects\react-cdk\reactapp\src\App.tsx

These files can all be found at https://github.com/collin-smith/react-cdk/tree/main/reactapp/src

Running the application locally

Now when running the application you should see the following screen and its functionality should be quite evident as you explore http://localhost:3000/

Visual Studio Code Extension

A useful extension for your Tailwind work in Visual Studio is the “Tailwind CSS IntelliSense” extension. I would recommend it if you are using Visual Code.

Build React App for Deployment

The application is running currently in C:\projects\react-cdk\reactapp but you will need to build the React application for deployment to the C:\projects\react-cdk\reactapp\build folder.

cd C:\projects\react-cdk\reactapp
npm run build

After this is completed, the C:\projects\react-cdk\reactapp\build folder will contain new files to be deployed based on the C:\projects\react-cdk\react_cdk\react_cdk_stack.py CDK Stack file.

Deployment

Caveat: This will deploy it to test it out but the backend will work as this is done with json-server for your local machine only as that is where the backend endpoints are running. This article is to demonstrate how to setup a React Tailwind application and deploy it.

Once you have set up the project successfully you can now try to deploy this to your AWS account and see it running.

• * Ensure you have your console set up with the proper credentials for your AWS account and region set up before attempting to deploy
• ** I would also double check that the bucket you are configuring to deploy in react_cdk_stack.py does not already exist or you might have a conflict when trying to deploy

Reviewing the CDK Stack file

react_cdk_stack.py

This will show you how the React Tailwind application you built above will be deployed into the AWS environment to an S3 bucket and creating a CloudFront distribution.

Executing the CDK Bootstrap command

cd C:\projects\react-cdk
cdk bootstrap

cdk synth

cdk deploy

For this application we will use the CloudFront Url.

It appears to be successfully deployed and is even using the json-server endpoints that are the backend as your local machine has access to them.

But if you press on the “Add Blog” link you will seen an error such as

To rectify this you should configure a custom error response for the CloudFront distribution.

CloudFront configuration

Additionally you should configure your CloudFront distribution according to the following StackOverFlow post.

Go to your Cloud Front Distribution in the AWS Console, press the Error Pages tab and press “Create custom error response” and configure as the following

This “404 Not Found” error should now be resolved for the application

Now this will work on your local machine as you have access to the backend application endpoints provided by json-server on localhost which is your local machine.

You can now test the Add Blog link

And you should see that the Blog is successfully saved and displayed on the home page.

Cleaning up

Now to clean up the resources you should actually empty the S3 bucket and delete it that holds the react application. CDK does not really do this for you. Remember that S3 Buckets must be unique per region.

Once you have done that you can then destroy the stack and associated resources with the following CDK command:

cdk destroy

Next steps

We have covered a fair bit in this article covering how to build out a Typescript React Tailwind CSS front end application from scratch that interacts with REST back end endpoints.

The next logical step is to deploy hosted endpoints that are not local to your desktop and integrate them with your front end application.

With this article it is hoped that you can leverage this for your own purposes as you see fit.