Oluwagbenga Fagbola
Build & Deploy Next.js & FastAPI Application with AWS Amplify.

Build & Deploy Next.js & FastAPI Application with AWS Amplify.

Oluwagbenga Fagbola's photo
Oluwagbenga Fagbola
·

3 min read

Table of contents

Hey Guys 🤩,

So a few weeks back, I was tasked with building the infrastructure of a React Next.js Application interfacing with a Fast-API(python) backend service using AWS Amplify.

I did quite a deep dive into AWS Amplify and got to know the solutions it provided, and how it enables Frontend Developers and pretty much Engineers, Technicians, etc. to build web and native mobile apps faster. So let me give you a brief summation followed by a birds-eye view of how I got things implemented.

Amplify Studio

You can conder it to be the entire package that provides you with a visual interface for creating back-end and cloud-connected front-end user interfaces.

  • Amplify CLI

    This service helps configure and maintain your application back-end service such as setting up authentication, storage & APIs.

  • Amplify Libraries

    This constitutes libraries that help you access your back-end services effortlessly.

  • Open source UI-Component

    helps you build cloud-connected components faster for both web and mobile applications.

  • Amplify Hosting

    This comes with an out-of-the-box CI/CD pipeline to test and release your application seamlessly.

Benefits of using Amplify hosting

  1. Highly performant:- globally distributed on AWS Cloudfront CDN makes your app operate fast with low latency adaptability.

  2. Much Reliable:- AWS amplify is a managed service. That is a PaaS, hence no upgrade, and requires little to no manual input needed.

  3. Highly Secure:- since it's a managed service, as long as you are mindful of how and where you store your passwords, secret key, etc. you can sleep with your two eyes closed.

  4. Cost-effective:- you literally pay for what you use. and technically it's practically a serverless environment.

  5. Scalable:- I know you get the just. But just in case, Amplify automatically help you scale your application based on traffic.

  6. Low Operational overhead:- (practically after pushing your code, most functionalities are being handled for you hence low operation at your end)

Features of Amplify hosting

  1. Git repositories integration (regardless of your versioning control choice, it can read from it).

  2. CI/CD (continuous integration, deployment & testing to ensure code durability before releasing your app).

  3. Preview branches (you can run other branches (i.e test/dev branch) and run it in parallel with your main branch b4 pushing to production).

  4. CDN (AWS has a global presence for you to leverage with the amazon cloud front).

  5. SSL & Domain Name (easily add your Domain name and have SSL Certificate provisioning taken care of for you alongside DNS).

  6. Integration well with other Amplify services such as authentication API, etc...

Implementation

So let's dive through the Front-end part of things in this tutorial and the Fast-API in the next chapter.

Prerequisites

  1. Install the Amplify CLI.

  2. AWS Account.

  3. Node.js 16 and Next.js 13 are installed on your machine.

  4. Experience with JavaScript, working in the terminal, and using Git.

Create our project

npx create-next-app amplify-nextjs-fast --javascript --no-eslint

Cd into the amplify-nextjs-fast project created and Initialize the project with Amplify

cd amplify-nextjs-fast

Integrating FastAPI

amplify init -y

Note

We can leverage Amplify backend Services to speed up development such as (APIs, Authentication, Storage, Analytics, and Functions). But I would work you through my process with FastApi in my next episode.

Kindly stay tuned 👏🏻.

AWSAWS AmplifyReactNext.jsFastAPI