Book Image

AWS CDK in Practice

By : Mark Avdi, Leo Lam
Book Image

AWS CDK in Practice

By: Mark Avdi, Leo Lam

Overview of this book

As cloud applications are becoming more complex, multiple tools and services have emerged to cater to the challenges of running reliable solutions. Although infrastructure as code, containers, and orchestration tools, such as Kubernetes, have proved to be efficient in solving these challenges, AWS CDK represents a paradigm shift in building easily developed, extended, and maintained applications. With AWS CDK in Practice, you’ll start by setting up basic day-to-day infrastructure while understanding the new prospects that CDK offers. You’ll learn how to set up pipelines for building CDK applications on the cloud that are long-lasting, agile, and maintainable. You’ll also gain practical knowledge of container-based and serverless application development. Furthermore, you’ll discover how to leverage AWS CDK to build cloud solutions using code instead of configuration files. Finally, you’ll explore current community best practices for solving production issues when dealing with CDK applications. By the end of this book, you’ll have practical knowledge of CDK, and you’ll be able to leverage the power of AWS with code that is simple to write and maintain using AWS CDK.
Table of Contents (17 chapters)
Part 1: An Introduction to AWS CDK
Part 2: Practical Cloud Development with AWS CDK
Part 3: Serverless Development with AWS CDK
Part 4: Advanced Architectural Concepts

Fixing the frontend code

The frontend is a standard React application. The application entry point is index.ts, which is located under the ./web/src directory. This, in turn, loads the App component. The App component holds the Header, SideBar, and Main components of our application. You can examine the rest of the code by yourself, but the bits we are interested in are within the Main component, which is located at /web/src/components/Main/index.ts. Open the file in your text editor and let’s examine what is happening with our frontend not being able to make the calls to our API. See the following extract of the file:

{ MainContainer } from './styles';
/* ----------
 * Add backend URL provided by the cdk deploy here!
 * ---------- */
const backend_url = 'http://localhost:3333/';
export const Main: React.FC = () => {
  /* ----------
   * States
   * ---------- */
  const [todos, setTodos] = useState...