Get rid of node-sass. Ability to run UI using proxy(#1099)

* Get rid of node-sass

* Add an ability to run app using proxy

kafka-ui-react-app/README.md

@@ -14,13 +14,6 @@ UI for Apache Kafka management
 
 ## Getting started
 
-Have to be run from root directory.
-
-Start UI for Apache Kafka with your Kafka clusters:
-```sh
-docker-compose -f ./docker/kafka-ui.yaml up
-```
-
 Go to react app folder
 ```sh
 cd ./kafka-ui-react-app
@@ -41,7 +34,32 @@ Generate API clients from OpenAPI document
 npm run gen:sources
 ```
 
-Start application
+## Start application
+### Proxying API Requests in Development
+
+Create or update existing `.env.local` file with
+```
+HTTPS=true # if needed
+DEV_PROXY= https://api.server # your API server
+```
+
+Run the application
+```sh
+npm start
+```
+
+### Docker way
+
+Have to be run from root directory.
+
+Start UI for Apache Kafka with your Kafka clusters:
+```sh
+docker-compose -f ./docker/kafka-ui.yaml up
+```
+
+Make sure that none of the `.env*` files contain `DEV_PROXY` variable
+
+Run the application
 ```sh
 npm start
 ```

kafka-ui-react-app/package.json

@@ -36,6 +36,7 @@
     "redux": "^4.1.1",
     "redux-thunk": "^2.3.0",
     "reselect": "^4.0.0",
+    "sass": "^1.43.4",
     "typesafe-actions": "^5.1.0",
     "use-debounce": "^7.0.0",
     "uuid": "^8.3.1",
@@ -111,10 +112,10 @@
     "esprint": "^3.1.0",
     "fetch-mock-jest": "^1.5.1",
     "history": "^5.0.0",
+    "http-proxy-middleware": "^2.0.1",
     "husky": "^7.0.1",
     "jest-sonar-reporter": "^2.0.0",
     "lint-staged": "^11.1.2",
-    "node-sass": "5.0.0",
     "prettier": "^2.3.1",
     "react-scripts": "4.0.3",
     "react-test-renderer": "^17.0.2",
@@ -127,7 +128,6 @@
     "node": "14.17.1",
     "npm": "6.14.13"
   },
-  "proxy": "http://localhost:8080",
   "jest": {
     "snapshotSerializers": [
       "enzyme-to-json/serializer"

kafka-ui-react-app/src/setupProxy.js

@@ -0,0 +1,14 @@
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const { createProxyMiddleware } = require('http-proxy-middleware');
+
+module.exports = (app) => {
+  if (process.env.DEV_PROXY) {
+    app.use(
+      '/api',
+      createProxyMiddleware({
+        target: process.env.DEV_PROXY,
+        changeOrigin: true,
+      })
+    );
+  }
+};