Is there a way to connect a Nodejs backend with AWS Amplify as a Front End - node.js

I have made a web Application using React as Front End and Nodejs as the backend service.
I am trying to host the App on AWS using AWS amplify for Front End and connecting the API service with my already created Nodejs API service.
Is there a way to configure the AWS Amplify with an already existing Nodejs application.

I'm assuming you already have the nodejs apis deployed somewhere and you are already accessing it in react. If that's the case then you may not need to change anything in react and just add amplify hosting. It should continue to use same api without any issue.
https://docs.aws.amazon.com/amplify/latest/userguide/getting-started.html

Related

Node backend deployed to AWS S3 bucket - what is the end point URL for back end

I have a react app stored on an AWS S3 bucket and it seems to be working fine.
I have an RDS database that is up and running and I have the end point for it.
I have a node app that is running express and everything needed to take a request from the front end and "place" the data in the RDS database using that end point.
My question is - When the node app is deployed to the S3 bucket, what URL do I use in the front end to call the node app back end in the S3 bucket?
We have a similar setup at my work and the end point for calling the back end (S3 bucket with Node) from the front end is something like ...
https://xxxxxxxxx.execute-api.us-east-2.amazonaws.com/dev
https://xxxxxxxxx.execute-api.us-east-2.amazonaws.com/prod
I am not sure if I need to set up an api gateway or something to facilitate the routing of the call?
As mentioned in the comment, AWS s3 are for just static content. So you can only deploy a static websites on AWS s3 but not the nodejs app, as it will need node as a runtime.
If you want to replicate, then as mentioned its must be behind API gateway. so you need to understand the nderlying deployment resources which can be lambda, ecs or ec2. API gateway just route your traffic to the deployment.
AWS API Gateway
If you are just trying to run your backend with a few steps then AWS EC2 or AWS lightsail is the quicker option.
Ec2:
With EC2 you will need to configure and install each and everything for example nodejs runtime, npm etc
lightsail:
In lightsail you just need to select the node version and that's it.
Here are few docs that can help you to deploy your app using lightsale, lightsale instance come with nodejs version and does not need any installation, you just need to copy your code to the instance and start.
Once you able to deploy the app either on ec2 or lightsale, you just to copy the public IP from lightsale or ec2 and use that IP in the frontend app.
deploy-nodejs-app-in-aws-lightsail
amazon-lightsail-quick-start-guide-nodejs
deploy-node-js-server-on-aws-lightsail

Unable to call Elastic beanstalk APIs via amplify

I am new to AWS. I have my node/express.js backend hosted on the Elastic beanstalk and it's working as per expectation. The express.js APIs communicate with the AWS RDS MySql database and send response accordingly. I have integrated the APIs calls in the React frontend and it is working fine locally. Now I have deployed the React frontend on the amplify and React app is hosted there now. But the API calls to elastic beanstalk are failing on the Amplify with the response "TypeError: Failed to fetch". I have also analyzed the Elastic beanstalk logs but could not find anything there. I wanna know why API calls are working perfectly locally but not on the amplify?
I think the issue is that Elastic Beanstalk requires that the communnication protocol has to be the same for both sender and receiver. So, the solution is to use either HTTP or HTTPS for both Front-End and Back-End.

Can we implement frontend and backend separately on AWS Elastic beanstalk?

I have frontend and backend both are using nodejs. Frontend is exposed and every request for api goes through the proxy module in the frontend, and both frontend and backend communicate on different modes.
Is there a way to deploy the above module, using code pipeline onto the Elastic Beanstalk platform ?
Why not deploy the front end on Amplify AWS?
AWS Amplify is a set of tools and services that can be used together or on their own, to help front-end web and mobile developers build scalable full stack applications, powered by AWS.
You just need to link your Repo and select your branch and everything will be deployed and generate also a random free domain or you can set your domain from the domain management section

React application should directly communicate with cognito or better to have backend Service in between

My front end application is in react JS. And my APIs built using serverless framework are authorized using AWS cognito. My question is which is better option?
Use aws-amplify in react JS and communicate with cognito directly.
Have a backend serivice in node JS which will actully communicate with cognito.
Better option and why?

Execution flow of React + Node.js application deployed on AWS Cloudfront?

I am developing a web application in React with a Node.js back-end. I would like to host the images and static files built for the React application on Cloudfront. However, the React application relies on the Node.js server to obtain some changing data to populate the views.
I need to have a thorough understanding of the flow of the application in order to come up with a reasonable design. Here is what I think happens:
User enters URL in the browser
Client is directed to the closest Cloudfront edge location
Cloudfront serves the HTML and images to the browser
The React application bootstraps in the browser
An API call is made to the Node.js server, which returns the required data
The browser renders the React application.
Am I understanding this correctly? Is there a better way to architect my web application?
I am not able to find the information I require online and would appreciate any help!
Your architecture is correct.
Just to be clear, CloudFront is not hosting your files. CloudFront is a cache and will fetch your files from an Origin, typically an Amazon S3 bucket.
Using React && AWS Amplify, you can create a serverless architecture for this type of setup with minimal work. You can get started by following the instructions at https://aws-amplify.github.io/docs/
In a nutshel :
Install with:
npm install -g #aws-amplify/cli
$ amplify configure
Then in your project :
amplify init
amplify add api #this will create your API as AWS Lambda functions exposed through Amazon API Gateway)
amplify add hosting #this will create the Amazon S3 bucket for hosting and the cloudfront distribution)
amplify push #to create all this on your AWS account for you
If you search for 'aws amplify react' you will easily find a dozen blog posting showing you how to get started. There are so many I can not recommend one in particular.

Resources