Home > front end >  Deploying React Frontend Express Backend on AWS Amplify with Lambda Functions
Deploying React Frontend Express Backend on AWS Amplify with Lambda Functions

Time:02-23

Disclaimer: I'm not a native speaker, so sorry in advance if my language is not fluent or I make some mistakes while explaining :)

Hi, I have quite a few question regarding deployment to the web of a Full Stack App.

Introduction

I developed a Full-Stack App consisting of a React Frontend and an Express Backend ( MongoDB for storing Data). All of this is coded in Typescript.

I started looking for ways to host this app, and I found the most recommended one is AWS Amplify (I know I could spin up an EC2 instance, but from what I read the cost difference is quite significant). Anyhow, I'd like to stay with AWS since the domain I'm going to host the app on is configured on AWS and that would save me quite some time.

What I tried

I tried setting up a Amplify app through the Amplify CLI.

All went quite smooth (except typescript types for the AWS functions, probably will have to ask another question on that), but the problems came when i wanted to add my backend.

When i ran amplify add api, the CLI added a template api folder in my directory. Furthermore, these template files are in JS, and if I try to change them to Typescript everything breaks down.

My Questions

I have quite a few questions regarding AWS Amplify and Lambda for the backend:

Backend through AWS Lambda

  1. I can't wrap my head around serverless functions. How do I push my existing Express Backend on AWS Lambda without having to rewrite it completely? Is it even Possible?
  2. Can't I have a github repo where only my backend code is stored, and have it synced with aws lambda?

Frontend with Amplify

  1. My frontend currently communicates with the backend through Axios requests: I have an api route (/api/...) where I make post requests and data is sent back. Will I have to change this if I start to use AWS Lambda?
  2. Given I manage to have frontend and backend in two different repos, how do I go about connecting the two? Should I look into API Gateway?

Thanks in advance to who will take time to answer all these questions, sorry but I'm quite a noob when it comes to AWS :(

CodePudding user response:

Backend through AWS Lambda

serverless-express NPM package will help you to migrate your existing express based backend to AWS Lambda. If you are using Amplify you can create separate backend project and use the amplify generated 'aws-export.js' configuration file in you front-end project.

Ref:

https://docs.amplify.aws/cli/restapi/restapi/#create-a-rest-api

https://docs.amplify.aws/cli/project/monorepo/

Frontend with Amplify

You can continue using Axios library or You can use aws-amplify packge. You don't have to change route of the backend code, if you configure AWS API resources and stage properly

Ref:

https://docs.amplify.aws/cli/restapi/restapi/#create-a-rest-api

https://docs.amplify.aws/lib/restapi/fetch/q/platform/js/

  • Related