How to use custom domain for Serverless app with React frontend? - reactjs

I finished my Udacity Cloud Developer nanodegree and I want to make a custom domain to showcase on my portfolio.
The stack I use includes: Api Gateway, Lambda, DynamoDB, Nodejs, S3 and Serverless framework. Frontend is : React.
However, Im stuck on comprehending how to deploy the full app, with React frontend?
Something like: anc.com would navigate to my app. I found many solutions mentioning about using serverless-domain-manager.
But what about my React front end? I read some solutions saying to deploy static web using S3.
But my app currently has S3 to store the uploaded images.
If I deploy my frontend with S3, do I have to make 2 S3 buckets?
Currently, I have to use 2 terminals, SLS deploy for backend, and npm run start to run the front end at localhost.
My github code:
https://github.com/ploratran/DogLookBook

The team at Serverless has also released a tool called components, one of which looks like its perfect for what you want to do; it automatically handles everything on the cloud to get your React files hosted and a domain assigned too: https://github.com/serverless-components/website

Related

How do I deploy a monolithic Django/React app?

I’m trying to find a way to deploy my app that uses Django on the backend and React front end, and also uses the Spotify API.
The project is based on this tutorial by Tech With Tim
I’ve seen some tutorials that suggest splitting it up and deploying them as two apps, where the backend proxies API requests to the backend as necessary, however since my React app is served with Django, I don’t think this method is conducive to how my app is set up. I've tried to deploy with Heroku but I haven't been successful. I'm not sure if its relevant, but I used webpack.
Here's my folder structure:
Any help? I’d be much obliged.

Create a aws Amplify app from source code

I have done one of the tutorial for aws amplify (the todo app). When it was done I had no more need for it so I deleted the application from the cloud.
Then one though hit me. If I have the source code locally (or hypothetically in git) for my amplify application, can't I somehow recreate the app in the cloud again from the source? if I understood it completely it is supposed to be infrastructure-as-code.
Currently, Amplify CLI doesn't support this.
Amplify is not an Infrastructure as Code.
From the AWS Documentation:
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. With Amplify, you can configure app backends and connect your app in minutes, deploy static web apps in a few clicks, and easily manage app content outside the AWS console.
Even if it's not supported, apparently there is some way to add services to the newly created Amplify from the existing Amplify backend.
https://github.com/aws-amplify/amplify-cli/issues/3505#issuecomment-597897873

How to Deploy Django Rest Framework and React on AWS

I am very new to deploy Django and AWS. So now I would like to deploy my separate project (drf + react) to AWS.
So How can I deploy the separate project to AWS?
EC2 vs Elastic BeanStalk which one is better for that kind of environment?
I already search for one day but I found nothing useful information and found the similar thing but I don't understand like that=>
Deploying Separate React Frontend and Django DRF API
You asked a difficult question. I think I can make it bit easy for you.
First let's look at the differences in the options.
Serving the front end app
Option1: Django to serve react app
In this option, the Django app will serve your app in a route for e.g /app/. Basically the route /app will load react app's index.html. it's that simple.
In order for this to work, you need to build your react app using npm run build and copy the files to Django's static folder. good so far?
One of the benefits option 1 gives, option 2 doesn't is, you can use the same domain for backend and frontend for e.g www.example.com.
Option 2: deploy front end in S3
You still need to build the react app using npm run build, but you will not copy that to Django, in other words, you don't want to Django to serve your front end app, you want s3 to serve the static website. this method requires a separate subdomain or domain to host the react app.
Thats is the only difference between the options. Your frontend app will make api calls to the Django api, thats same for both options.My preferred option is option 2 to reduce complexity.
Deployment
I would pick elasticbeanstalk because it's easy to start with. You can do everything in the elasticbeanstalk console from load balancer to SSL, Healthcheck, Changing EC2 Keypair for EC2 Instance etc. Deployment is very easy. It supports multiple environments, You can use one AWS account for your test and production environments.

deploying a React app that uses a Flask backend

I am trying to deploy a React app that uses a flask backend.
I've never done this, so I would like to clarify some stuff.
Do we first have to deploy the flask backend somewhere and make the React frontend call that API instead of localhost?
If so, do we have to separately deploy the frontend after doing this?
What is the brief flow of this process?
Thanks
I think this goes towards preferences and common practices, but if it was up to me I would deploy the backend first and make sure the fronted works before I deploy that too. It is not very uncommon to have a separate frontend and backend team, which results in separate deploys, but this is usually coordinated so that you can do simultaneous deploy if there are breaking changes.

Deploying a React App to AWS

I have a website using express/ react which consist of two separate parts.
1- API app (express server)
2- Website (react app)
I was fiddling around with AWS to deploy my app and figured out few options. So far the best option for the API is to use Elastic Beanstalk. It works well and I had no issues with it.
The confusing part is the react app. I have deployed it once as Elastic Beanstalk and once as S3 bucket. Both worked with some challenges ( easier was the S3)
I want to ask if anyone has been in the same scenario and have any recommendations?
In my experience it is better (for the sake of better scalability) to split the API server and CDN for bundled React App. You can use the CloudFront as CDN for the App and EC2 as API.

Resources