How to Deploy Django Rest Framework and React on AWS - reactjs

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.

Related

How to deploy Django + React project to hosting platform?

I used Django as backend and React as frontend.
I want to know how to deploy this project to hosting platform such as heroku, netlify, etc.
Can I deploy this project to one domain?
Or should I have to use two doamins - one for Django and one for React?
Were you able to find the answer to this?
You will need to deploy two separate apps. I presume, you have been making axios/fetch calls between the frontend and backend on localhost? It will work just like that, except instead of localhost, the calls go to where ever the backend is deployed.
Now deploying is a beast of its own. Good luck!

How to deploy next.js frontend and separated express backend

I'm developing an app that contains next.js as a frontend and separated backend server running on express. I'm wondering about production deploy and costs, I did some research but I'm not sure what's the best way to do it.
My folder structure is following. I have separated packages.json on the frontend and separated on the backend. Two apps also run on different port. Also I'm doing SSR on the frontend.
Next.js already includes a server like express. API Routes allow you to build a backend deployed along with the rest of the next application.
API Routes live in the /pages/api folder.
Think longterm. If in the future, it'll need to be scaled to accommodate traffic or have must separate domains then separating the backend from the frontend is the best way to go. This way each team can focus on their part without messing up the organization of the entire project. Also you have a clean interface for your clients (frontend, CLI and SDK). If not then having the backend in NextJS should be fine.

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

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

How to strapi + react fullstack app on one server?

I want set up a fullstack app with strapi and react. All tutorials i've seen say to deploy frontend on netlify and backend to something like heroku. Is there a posibility to deploy full app at one hosting?
I mean user entering website will get react app and backend will be running at onother port on the same hosing
You can host both the front end(react) and backend(strapi) on heroku.
they can be hosted as two different individual apps running on different dynos and they can even be hosted as a single app together.
see this answer:
How to deploy Strapi backend and ReactJS frontend to a single Heroku app
You definitely can deploy both on the same server, the question is whether you should do that.
What if your system has another client, like mobile app? Or what if you have more than one API server, and several databases (e.g. mongo and redis)? You don't want to put all of them on a single server, do you? By deploying them separately you can benefit from horizontal scaling, i.e. you upgrade your hosting plan on particular server whenever it needs more resources, without affecting another nodes. Divide and rule!
If you still want to deploy React and back-end on the same server, the better place for that would be something like DigitalOcean. On single droplet you can place as many servers as you want and configure them to launch on different ports.

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.

Resources