Learn in 
You might have seen a lot of articles explaining how to proxy your backend APIs on development environment. All those articles stop there and you need to struggle yourself to get the same configuration working on your production. You often would have failed because same config would not work or sometimes figured out yourself spending your weekend over just configuring the APIs. We know this pain !! This is not just another article like others, so hang on.
Take a cup of coffee and enjoy reading through this simple step by step tutorial. We promise, we will save your weekend from getting ruined :)
In this tutorial, We will explain you how to configure your backend APIs on both development and production environments on three most famous servers: Apache HTTP Server, Nginx and Tomcat.
We have configured react router and API Proxy configured on Create React App (CRA) scaffolding application. If you are struggling to configure React Router in your application, refer to this easy step by step tutorial. Create React App - React Router Setup. We used the same application configured in this tutorial and extended it to configure the API Proxy.
First we need to access a REST API. For this we will be using axios library, so go ahead and install it.
npm install axiosNow, create a component called Dashboard and add the code as below. This component will just fetches the data and displays as a table.
loading...
Create a helper class that has the actual axios call to the API,
loading...
Thats all for the application. We will now see how to configure this API endpoint URL and make our application working. You can find source of the working application at the end. Check "Download Source" section.
Configuring API proxy in development environment is dependent on your CRA version. You can find your version in
package.json. Check version of react-scripts.1. For react-scripts version 0.2.3 and higher :
We can configure proxy for these versions in
package.json itself using proxy property. changeOrigin is used if domains are different. Otherwise you might get a CORS error. Finally, You can add all your headers, if any, under headers property.loading...
2. For react-scripts version 2.0.0 and higher :
For these versions, apart from the above
proxy property option, we can now also move all proxy configurations into a separate file named setupProxy.js. Note that although proxy property works, it can accept only a string. If its an object use setupProxy.js instead. To recognize this file, we need to install an npm module as :npm install http-proxy-middlewareCreate a file named
setupProxy.js in src folder and add your proxy configurations in it.loading...
You can also add your headers either using
headers property or using a function called on the event onProxyReq.This is all about Development configuration. Now lets look at Production configuration. Before that, lets create a production build using,
npm run buildThis build will be deployed to the servers in the following sections.
Now, let us see how to configure the API proxy on production servers. Apache and Nginx configurations are straight forward. Tomcat configuration is a bit different. We will see how, when we discuss about it.
1. Enable the following modules in httpd.conf :
LoadModule proxy_module modules/mod_proxy.soLoadModule proxy_http_module modules/mod_proxy_http.soLoadModule ssl_module modules/mod_ssl.so - If not already enabledLoadModule rewrite_module modules/mod_rewrite.so2. Add the following configuration in httpd.conf file
loading...
As you can see, the Directory tag takes care of the server side routing and ProxyPass directives takes care of the API proxying. If you are not sure what this is, head over to this tutorial React Router Configuration - Apache Http Server, Nginx, Tomcat
Now, navigate to the home page of
/react-proxy-config and make sure you are seeing the data from your API.
1. Add the following in nginx.conf :
The first section is used for proxying the API while the second section is used for server side routing.
loading...
Tomcat configuration is a bit different than other two servers. Tomcat cannot proxy requests on its own. It can only Rewrite the URLs. So, we will take help of Apache Http Server and setup a Reverse Proxy Configuration.
Deploy your application to
webapps folder of tomcat and add the below configuration in Apache httpd.conf file.loading...
Remember, You need to navigate to your apache URL and check if its properly redirected to the Tomcat.
http://localhost/react-proxy-config/Thats all folks !! Happy coding. If you feel this helped you, keep supporting us by or or below or on the articles on social media.
