I have a yeoman web-application with AngularJS which works great! Now I want to do some Ajax request to the backend.
The yeoman application runs on localhost:9000 (I run it with grunt serve which gives me fast live reloads)
The backend spring application runs on localhost:8080 (I run this with mvn spring-boot:run)
What is the workflow for testing the frontend with the backend?
I can always copy the frontends build code to the backends public folder but its time consuming. Or I could do some cross domain Ajax attempts but not sure this is the right way to go either.
What is the fastest and easiest way to integrate the frontend with the backends API for testing?
it could be done with CORS managment like here:
Spring Cors doc
or
use grunt proxy, in your gruntfile.js add this after connect: markup (suppose backend runing on localhost:9292)
// The actual grunt server settings
connect: {
server: {
proxies: [
{
context: '/',
host: 'localhost:9292',
changeOrigin: true
}
]
},
...
see here http://fettblog.eu/blog/2013/09/20/using-grunt-connect-proxy/
I solved the Ajax cross-domain issue with proxy_pass.
Just set a virtualhost for your frontend, and add a proxy_pass to your backend.
In case you are using Nginx (Apache also support proxy_pass):
http://nginx.org/en/docs/http/ngx_http_proxy_module.html#proxy_pass
In your virtualhost file it should be something like this:
location /api/ {
proxy_pass http://localhost:9000;
}
Related
I've deployed an server-side rendering React app (bundled without CRA):
it has an express server for server-side rendering (listens to port 3000 or process.env.PORT)
it has an express server for the API that serves the frontend (listens to port 8080 or process.env.PORT)
On localhost, the frontend makes a request to http://localhost:8080/api to get the data, which works perfectly.
From my understanding, when the app is in production, the base API URL should be the app's URL (eg. https://myapp.herokuapp.com) instead of http://localhost:8080, so I added this change in my code:
if the app is in dev, the frontend calls http://localhost:8080/api
if the app is in prod, the frontend calls https://myapp.herokuapp.com/api(I added https://myapp.herokuapp.com/as a config var in Heroku)
However, it doesn't work. My app is deployed successfully to Heroku and the SSR renders correctly, but the API call fails. (I also tried https://myapp.herokuapp.com/api:3000 which fails)
What should be the API URL to call a local server when the app is in production?
thanks a lot!
Well, as far as I know Heroku doesn't allow multiple ports and you will not be able to open 3000 for web and 8080 for api.
You can serve both on the same port and route /api to the api.
I have worked on a project that uses similar approach and below is the code:
app.use('/api', router); // every api route is in the router
app.use(express.static(staticDir));
It is also deployed to heroku.
full repo if you wish to take a look - https://github.com/berkeli/breteau-dashboard/blob/main/server/utils/createServer.js
server{
listen 80 ;
listen [::]:80;
server_name test.demo.io;
root /home/ubuntu/SuperApp/build;
location / {
try_files $uri /index.html;
}
}
this is my nginx config file for frontend that is developed in react js.
I have also developed backed in express js.
Now how shall I deploy my express js backend code.?
Shall I keep these two projects separate and run the backend on port 3000 ? In that case, will I have to do additional things to connect my front end with this express js through apis? As both app are not running on same port?
Or shall I keep my front end in the express js static files and run the whole app from port 3000? but in that case how would I attach my current domain to the website as currently I haven't attach any port no like 3000 used.
Please help. I am new to this.
Front-end and back-end are two separate projects
you build the front-end adding api url as env var during the build process. you just deploy the static build result on Nginx server.
you run the api separately e.g on http://localhost:3000 using a command like npm start or node server.js depends on your back-end code
I'm investigating a way of deploying an Angular or React web application on Google Cloud using GCS, Load Balancer, and CDN.
I've set up the LB and the GCS using the urlRewrite, but since the LB does not allow full URL rewrite only pathPrefixRewrite, I cannot redirect all the requests to /index.html
I want to achieve the same functionality as firebase hosting where you can specify the rewrite rules
"rewrites": [
{
"source": "**",
"destination": "/index.html"
}
]
Another option will be to set the 404 page as index.html, but that will result in a 404 status code return by the server, which I don't like.
Is this possible with Load Balancer, because they are not supporting a full rewrite?
Google added rewrite engine in 2020 (see https://serverfault.com/questions/927143/how-to-manage-url-rewrites-with-a-gcp-load-balancer/1045214) and it is only capable pathPrefixRewrite (stripping fixed prefix).
For SPA you need variable suffix rewrite to index.html so you use Nginx or Firebase.
Or mentioned error handler in bucket's HTTP server (with a downside of HTTP code 404 for your virtual URLs):
gsutil web set -m index.html -e index.html gs://web-stage/
Full instructions to set SPA app is here: Google cloud load balancer create backend service for Firebase Hosting to serve microservices & frontend SPA from the same domain via load balancer?
Discussion of LB rewrite engine limitations:
How can I implement a .htaccess configuration in Firebase Hosting?
Google Cloud Load balancer URL Rewrite not working
https://www.reddit.com/r/googlecloud/comments/8zgg20/static_website_url_rewrite/
I have a Spring MVC application (jsp as a views) and i want to add react.js as a frontend. I have a couple of questions:
1. Where i should place my create-react-app folder or it doesn't matter.
2. Is there a way to run the application from maven (war) only. I mean that i know only one way to run application it is start backend from maven and start react.js from npm start. But this approach requires to use proxy or cors (or i'm wrong). I am using IntellijI IDEA and WebStorm.
project structure here
It doesn't matter
You are right that you should run it on different servers for spring and react.
You can proxy your api request to the backend to avoid CORS issue.
Copy this to your src/setupProxy.js in your create-react-app. More info here
const proxy = require("http-proxy-middleware");
module.exports = app => {
app.use(
proxy("/api", {
target: "http://jsonplaceholder.typicode.com",
pathRewrite: { "^/api": "" },
changeOrigin: true
})
);
};
Then you can proxy request to your backend using /api prefix. Example i can do something like fetch('/api/users') in my frontend react app
I am working on Angular 1 based web application.
I've deployed a web app with nginx , but couldn't deploy production server in my local env.
So, I want call API from the production server. For example,
I am using RestAngular to call API.
Restangular.all('api/user/profile').post(mUser)
This calls
localhost:8080/api/user/profile
because I've deployed a web app in localhost:8080.
I want to redirect requests which starts with "/API" to the production server, by config nginx properly.
So, in this case, it should call API server
http://devprod2api/api/user/profile
Other requests that don't start with "API" should go to:
http://localhost:8080/...
Is it something possible by config nginx properly? If possible, how can I do that?
I am not sure what you have tried, but this just needs a simple proxy_pass as far as I see. Add below to your nginx config and it should point all API to the other server. It assumes that a host entry is present for devprod2api
location /api/ {
proxy_pass http://devprod2api/api/;
}