Facing problems to host react front end and connecting it to flask backend on azure cloud - reactjs

I have the code ready for deployment and it’s working perfectly on the local computer. Flask as the backend (localhost:5000) and React as the front end (localhost:3000). I could host the backend code sucessfully but when I tried to host the front end separately it’s not working After deployment it says Application
and when I check the logs it’s all good no problems or error shown over there.
I also need some idea on how to connect it in Azure cloud as I don’t have much experience. I tried the solutions provided in some of the older discussions here
I can’t use virtual application because the flask backend can only be hosted on linux on Azure.
I have been trying to solve it since days.
Any suggestion on how to deploy and connect both will be helpful.

Related

Run express server when react app runs on the web

I have a basic react app which makes a call to an express server. In my localhost i can run the server with the command nodemon server.js and then my react app successfully makes calls to the server (which sends emails, it all works fine)
The issues is i must run the server everytime i want to let my app contact my server, but when i will deploy my app to my web hosting, the client using the website cannot run the server, needless to say. So my question is what can i do to resolve this?
I've just started backend dev so go easy please. thanks
You will have to find a place to host your Node.js backend. There the service will continuously run and will be accessible from the internet. You could either rent a server or go with a serverless approach (like Netlify or countless other providers).

How to deploy a Flask+React application to Azure Web Service

I have been working on this app on my localhost, which has Flask as the backend (localhost:5000) and React as the front end (localhost:3000), and they have been communicating well. Now I am supposed to put it up online so that other ppl can see it as well - I didn't have much experience in Azure, but how can I deploy these two components(React&Flask) into one URL on Azure web app service? (Before I had some experience in using FTP to upload the 'build' folder to a "site/wwwroot" folder to put up a simple React app without any backend)
Newest
After testing, the python project is deployed in the webapp, the react project is deployed in the virtual application, and the normal node project is also deployed in the virtual application.
Deploy the flask python project to the windows environment, the normal deployment method will fail, please be sure to follow this blog document (third-party document) to operate, it works for me.
Running Flask app with HttpPlatformHandler in Azure App Services
The effect is shown in the figure. You can see that the normal node project can be accessed normally, but the react project is not. I think there are some bugs. (Has raised a support ticket to confirm)
The deployment method of virtual application is recommended to adopt the publishing method shown in the figure below.
Privious
It is recommended to choose windows when creating azure web app, because windows supports virtual application.
We can deploy flask app normally and deploy react app in virtual app.
Under normal circumstances, the process.env.port of the two webapps is the same and will not interfere with each other because of the virtual path.
Reference post:
1. Vue Frontend and Express backend on same Azure web app Service
2. Azure Front Door Is Not Maintaining Custom Domain in Browser

Pointing domain name to a reactjs app with a nodejs backend

I am trying to make a portfolio-building app on aws. I am using reactjs for the front end, lambda(nodejs) for the backend, and other various technologies like dynamodb and API Gateway. My question is, how do I get the react content served up every time someone goes to my domain name? Is it done through lambda? Do I need an ec2 instance? I am stuck on this and if someone can help me out I would really appreciate it. Thanks!
There are many approaches you could use to set this up, it depends on what type or architecture you are looking for. I prefer to use AWS lambda functions attached to the API gateway for backend How To Build Your First Serverless API with AWS Lambda and API Gateway, and for frontend host the react.js app in s3 through cloudfront. This setup means that your entire application is serverless and you will be hard pressed to make it out of the free tier on AWS. Here is a great blog article detailing how to set this up Deploying create-react-app to S3 and CloudFront
So where is your front end running?
It could be many locations:
EC2 instance
Elastic Beanstalk (either as a Node app, or as a Docker container)
ECS/EKS (with or without Fargate)
As a series of Lambdas (running behind an ALB)
Without knowing your application and experience of AWS services it's quite hard to advise exactly where you should host it. However, once you decide which one of these you are using you can points its target A record/CNAME at your domain name by editing the A record/CNAME in your hosting provider.

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.

Google Cloud Storage Client not working on dev appserver

I 'm building an AppEngine application that stores data in Google Cloud Storage. I use the Google Cloud Storage Client (GCS) library as suggested.
My app is working when deployed on AppEngine (reading/writing/listing objects) but I cannot make it work on the development server. The development server keeps returning error 404 and GCS raises NotFoundError. The dev-appserver is supposed to emulate the cloud storage functionality without any specific configurations etc. I see in the log files that the dev server is accepting requests at "/_ah/gcs" yet it seems that there is no handler for that url. I 've tried with version 1.8.5 and 1.8.6. Apart from my app, not even the demo app provided by Google works.
Is there something that I 'm missing here, e.g. a special configuration for the dev-appserver?
Sorry the following change was pushed out too early by mistake. It only works with 1.8.8 SDK. We are streamlining the release process of gcs client to align with SDK. Sorry
https://code.google.com/p/appengine-gcs-client/source/detail?r=125
Without this change, it works on 1.8.7 SDK.

Resources