Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
react-amazing-proxy
Advanced tools
Readme
The npm package react-amazing proxy is an amazing proxy for use with create-react-app. It:
The built in proxy in create-react-app does not let Server Sent Events and web sockets through by default - and it is very problematic/impossible to get this to work even if you change its settings.
Here is a schematic of how it works. It opens a "hole" through the react-dev-server for whatever api routes you specify, so that requests can reach your api server:
This means you have two servers running but yours frontend code only talks to the react-dev-server that proxies the api routes to your api server.
Unfortunately the built in proxy buffers and compresses data in a way that makes Server Sent Events not work and it does not listen to the protocol upgrade requests a web socket needs to make in order to work.
There is no set strategy for how to switch from development to production and serve a production build of your React app:
Both solutions are possible, but there is no easy "switch to production" flag built in.
This is not a big issue, but you will have to start the react-dev-server and your api-server from separate windows in your terminal, or add an npm script using concurrently or a similar tool in order to start both servers with one command.
React-amazing-proxy starts a server devoted to one thing - to be a really good proxy that can handle all types of requests including Server Sent Events and web sockets.
It automatically starts up your api server and the react-development-server. You run three servers, but with on simple command - npm start.
By writing npm start build you switch to perform a production build and serve this build instead of using the dev server. It still proxies your api server - thus no code versioning is needed on your server when you go to production.
It automatically watches your api server source code and restarts it on changes, much like nodemon.
Important: react-amazing-proxy is meant for use in a create-react-app project so if you haven't done so already create your project:
npx create-react-app name-of-my-new-project
Then install react-amazing-proxy:
npm i react-amazing-proxy
A file called proxy-settings.js is created in your project root folder:
module.exports = {
// run react-dev-server (true) or serve build (false)
dev: true,
// whether to open the react site in a browser at start
openInBrowser: true,
// path to your own backend api
// (set to empty string if yo don't have an internal JS-based api)
pathToAPI: './api/index',
// the host for your backend api
// set to another machine if your api is not local
hostForAPI: 'localhost',
// the ports
ports: {
// where you want to run the 'joint' proxied server
main: 3000,
// where you want to run the react-dev-server
react: 3456,
// where you serve your api (make sure to serve it on that port)
api: 3001
},
// a path to an optional script to run after builds
postBuildScript: './postBuildScript.js',
// a function that should return true if the backend-api
// is to handle the request (add your own logic here as needed)
handleWithAPI(url) {
return url.indexOf('/api/') === 0;
}
};
If you don't want to edit the settings you:
The react-amazing-proxy server is highly configurable. By changing the proxy-settings.js file you can:
react-amazing-proxy changes the npm start command, so now you can write:
🙂 That's simple. Add a index.js file at the root of your project with the following content:
require('react-amazing-proxy')();
Run your project with pm2:
pm2 start index.js --name my-fine-app
This will run the build version, but you could change it to running the dev server (if you want to check debug output in pm2 logs):
require('react-amazing-proxy')({ dev: true });
pm2 restart my-fine-app
🙂 Just remove all those partial fixes: Remove old proxies by not having a proxy setting in package.json and not having a setupProxy.js-file in src. Remove your own npm start scripts using concurrently (or similar tools). And you don't need nodemon to listen to changes to your backend server anymore. Think "clean as the day I created my project from react-create-app" and you've got it! 🙂
🙂 Always use the latest one, there are no breaking changes, but we are still fixing minor bugs. For example in version 1.0.58 we introduced: gzip compressed serving of production builds and serving index.html on undefined routes during production. react-amazing-proxy is always improving.
🙂 No problem, just set pathToAPI to an empty string. react-amazing-proxy can still proxy to your api server, but you'll have to start it yourself.
🙂 No problem, just set pathToAPI to an empty string and hostForAPI to the host (ip or domain name). react-amazing-proxy can still proxy to your api server, but you'll have to start it yourself.
(Note for those with the API server on another machine: We currently do not accept https as a protocol for reaching your api server - ask us if you need this functionality. This does not mean your whole app can not be behind a https "wall". Just that the communication between the proxy and the api server can't.)
🙂 That's outside the scope of working with react-amazing-proxy - however, if you are developing using MERN (MongoDB, Express, React and Node.js) we would recommend a path of:
The whole process is pretty straightforward and can be done in minutes, however if it is your first time expect it to take a couple of hours.
Happy proxying!
FAQs
The npm package react-amazing proxy is an amazing proxy for use with create-react-app. It lets you use your own backend api, with web sockets and server sent events working, watches your backend api code for changes, and can switch to serve your productio
The npm package react-amazing-proxy receives a total of 9 weekly downloads. As such, react-amazing-proxy popularity was classified as not popular.
We found that react-amazing-proxy demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.