Multiple environments support (#88)

* Fixed proxy according to docker container

* Trying out multiple environments

* Change environment variables

* Add documentation for default values

* Added readme instructions

* Fix Dockerfile

* Added readme instructions

* Commit suggestions

* Trigger Build

* Invoked correct function call

* Fixed url 404 error

* Add environment variable to docker infra

Dockerfile

@@ -10,6 +10,7 @@ COPY pom.xml /build/
 # Copies the src directory into the build directory in the image.
 COPY src /build/src/
 
+# Copies the config directory into the build directory in the image.
 COPY config /build/config/
 
 # Set Workdir

Dockerfile.infra

@@ -15,6 +15,7 @@ WORKDIR /build
 COPY frontend/package* /build/
 RUN npm install
 COPY frontend/ /build/
+ENV REACT_APP_API_URL /
 RUN npm run build
 
 FROM openjdk:8-jre-alpine

README.md

@@ -33,6 +33,102 @@ Run the containers:
 docker-compose up
 ```
 
+### Run without docker
+
+#### Prerequisites
+
+a) [maven](https://maven.apache.org/install.html)
+
+b) [npm](https://docs.npmjs.com/downloading-and-installing-node-js-and-npm) 
+
+You can run the backend spring boot server from the root directory using:
+```
+mvn spring-boot:run
+```
+
+You can run the front end using the following:
+```
+cd frontend/
+npm install
+npm start
+```
+
+## Environment Variable configuration
+
+We currently have two environment variables 
+
+a) REACT_APP_API_URL: This variable points to the base API_URL to which the service makes calls to.If you decide to run the backend on another port this variable should be set. The default value is set to `http://localhost:8080`
+
+b) REACT_APP_GITHUB_COMMUNITY_URL: This variable points to the URL at which you would like to store your community configurations on github. It needs to be in the format of:
+`https://api.github.com/repos/{repo-owner}/{repo-name}/contents/{path-to-folder}`
+
+The default configuration is: 
+
+`https://api.github.com/repos/sladyn98/custom-distribution-service-community-configurations/contents/configurations`
+
+
+## How to change ports and run without Docker
+
+In order to change the ports on which spring-boot runs you need to execute the following command. For example if you need to run the spring boot server on port 8081 these are the commands you would want to run.
+
+* For UNIX
+```
+SERVER_PORT=8081 mvn spring-boot:run
+```
+
+Once you have started the spring boot server the next thing is to configure the front-end environment file so that the react server knows where to find the backend server.
+
+* The file that needs to be changed is the `.env` inside the frontend folder.
+
+* Inside this file this line needs  to be changed `REACT_APP_API_URL=INSERT_NEW_PORT_HERE`
+for eg: If the backend is running on port 8081
+```
+REACT_APP_API_URL=http://localhost:8081
+```
+
+## How to change ports and run with Docker
+
+In order to change the docker port the following file need to changed
+
+* Inside the docker-compose.yml the line: 
+
+```
+ports:
+      - "8080:8080" # Forward the exposed port 8080 on the container to port 8080 on the host machine
+```
+
+needs to be changed to the port you want to run it at.
+
+Eg: The port on the left indicates the port that needs to be exposed on the host machine, so it needs to be changed according to our requirement. So in order to run on port 8081 we need to make the following change.
+```
+ ports:
+      - "8081:8080"
+```
+
+Once you have started the spring boot server the next thing is to configure the front-end environment file so that the react server knows where to find the backend server.
+
+* The file that needs to be changed is the `.env.docker` inside the frontend folder.
+
+* Inside this file this line needs  to be changed `REACT_APP_API_URL=INSERT_NEW_PORT_HERE`
+for eg: If the backend is running on port 8081
+```
+REACT_APP_API_URL=http://localhost:8081
+```
+
+## How to change Community-Configurations URL
+
+### For Docker Environment
+
+* The file that needs to be changed is the `.env.docker` inside the frontend folder.
+
+* Inside this file this line needs to be changed `REACT_APP_GITHUB_COMMUNITY_URL=ENTER_URL_HERE`
+
+### For Non-Docker Environment
+
+* The file that needs to be changed is the `.env` inside the frontend folder.
+
+* Inside this file this line needs to be changed `REACT_APP_GITHUB_COMMUNITY_URL=ENTER_URL_HERE`
+
 ## Documentation
 
 You can find more documentation about how to use the service here:

frontend/.env

@@ -1 +1,2 @@
 REACT_APP_GITHUB_COMMUNITY_URL=https://api.github.com/repos/sladyn98/custom-distribution-service-community-configurations/contents/configurations
+REACT_APP_API_URL=http://localhost:8080

frontend/.env.docker

@@ -0,0 +1,2 @@
+REACT_APP_API_URL=http://localhost:8080
+REACT_APP_GITHUB_COMMUNITY_URL=https://api.github.com/repos/sladyn98/custom-distribution-service-community-configurations/contents/configurations

frontend/Dockerfile

@@ -19,4 +19,4 @@ COPY . .
 EXPOSE 3000
 
 # Finally runs the application
-CMD [ "npm", "start" ]
+CMD [ "npm", "run", "start:docker" ]

frontend/package.json

@@ -8,6 +8,7 @@
     "@testing-library/user-event": "^7.1.2",
     "axios": "^0.19.2",
     "bootstrap": "^4.5.0",
+    "env-cmd": "^10.1.0",
     "node-sass": "^4.14.1",
     "prismjs": "^1.20.0",
     "react": "^16.13.1",
@@ -20,13 +21,13 @@
   },
   "scripts": {
     "start": "react-scripts start",
+    "start:docker": "env-cmd -f .env.docker react-scripts start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "lint": "eslint --ext .ts,.js --ignore-path .gitignore .",
     "lint:fix": "eslint --fix --ext .ts,.js --ignore-path .gitignore ."
   },
-  "proxy": "http://app-server:8080",
   "eslintConfig": {
     "extends": "react-app"
   },

frontend/src/components/CommunityConfiguration/communityConfigLayout.js

@@ -14,7 +14,17 @@ class communityConfigLayout extends React.Component {
     }
 
     async componentDidMount() {
-        const response = await fetch(process.env.REACT_APP_GITHUB_COMMUNITY_URL);
+
+        // Use the default GITHUB_API_URL
+        let GITHUB_API_URL = "https://api.github.com/repos/sladyn98/custom-distribution-service-community-configurations/contents/configurations"
+
+        // If environment variable has been set it will override the default
+        if (process.env.REACT_APP_GITHUB_COMMUNITY_URL) {
+            console.log("Environment variable has been set")
+            GITHUB_API_URL = process.env.REACT_APP_GITHUB_COMMUNITY_URL
+        }
+
+        const response = await fetch(GITHUB_API_URL);
         const body = await response.json();
         this.setState({data: body})
     }

frontend/src/components/CommunityConfiguration/configurationCard.js

@@ -15,16 +15,27 @@ class configurationCard extends React.Component {
         super(props)
     }
 
-
     async viewDetails(configName) {
         console.log(configName)
-        const response = await fetch('https://raw.githubusercontent.com/sladyn98/custom-distribution-service-community-configurations/master/configurations/' + configName);
+        let urlSplit = this.getCommunityConfigURL().split('/')
+        const response = await fetch('https://raw.githubusercontent.com/' + urlSplit[4] + '/' + urlSplit[5] + '/master/configurations/' + configName);
         const body = await response.text();
         localStorage.setItem("packageConfigYAML", body)
         // Once the fetch call is achieved naviagte to the editor page.
         window.location.assign("/generatePackage")
     }
 
+    getCommunityConfigURL() {
+        // Use the default GITHUB_API_URL
+        let GITHUB_API_URL = "https://api.github.com/repos/sladyn98/custom-distribution-service-community-configurations/contents/configurations"
+        // If environment variable has been set it will override the default
+        if (process.env.REACT_APP_GITHUB_COMMUNITY_URL) {
+            console.log("Environment variable has been set")
+            GITHUB_API_URL = process.env.REACT_APP_GITHUB_COMMUNITY_URL
+        }
+        return GITHUB_API_URL
+    }
+
     render() {
         return(
             <div>

frontend/src/components/PackageGeneration/Editor.js

@@ -25,6 +25,21 @@ function saveData(blob, fileName) {
   window.URL.revokeObjectURL(url);
 }
 
+function getAPIURL () {
+  // Use the default API_URL
+  console.log("We are calling this function")
+  let API_URL = "http://localhost:8080"
+
+  // If environment variable has been set it will override the default
+  if (process.env.REACT_APP_API_URL) {
+      console.log("Environment variable has been set")
+      API_URL = process.env.REACT_APP_API_URL
+  }
+  console.log(process.env.REACT_APP_API_URL)
+  console.log(API_URL)
+  return API_URL
+}
+
 class editor extends React.Component {
 
    state = { 
@@ -33,7 +48,7 @@ class editor extends React.Component {
      description: '',
      isLoading: true
     }
-
+    
    componentDidMount() {
     this.setTitle()
     this.setDescription()
@@ -57,7 +72,7 @@ class editor extends React.Component {
 
   downloadWarfile() {
     var xhr = new XMLHttpRequest();
-    xhr.open("POST", 'http://localhost:8080/package/downloadWarPackage', true);
+    xhr.open("POST", getAPIURL() + '/package/downloadWarPackage', true);
     xhr.responseType = "blob";
     xhr.onload = function () {
       if(xhr.status == 404) {
@@ -71,14 +86,16 @@ class editor extends React.Component {
 
    downloadPackagerConfig() {
     var xhr = new XMLHttpRequest();
-    xhr.open("POST", '/package/downloadPackageConfiguration', true);
+    xhr.open("POST", getAPIURL() + '/package/downloadPackageConfiguration', true);
     xhr.responseType = "blob";
     xhr.onload = function () {
         saveData(this.response, 'casc.yml');
     };
     xhr.send(localStorage.getItem("packageConfigYAML"));
    }
 
+
+
    render()  {
     const packageJSON = JSON.parse(localStorage.getItem("packageConfigJSON"))
 

frontend/src/components/layouts/CardLayout.js

@@ -21,7 +21,15 @@ class CardLayout extends React.Component {
     }
 
     async componentDidMount() {
-        const response = await fetch('/api/plugin/getPluginList');
+        // Use the default API_URL
+        let API_URL = "http://localhost:8080"
+
+        // If environment variable has been set it will override the default
+        if (process.env.REACT_APP_API_URL) {
+            console.log("Environment variable has been set")
+            API_URL = process.env.REACT_APP_API_URL
+        }
+        const response = await fetch(API_URL + '/api/plugin/getPluginList');
         const body = await response.json();
         const mainBody = body["plugins"]
         this.setState({ plugins: mainBody, isLoading: false});

frontend/src/components/modal.js

@@ -65,7 +65,17 @@ class ModalExample extends React.Component {
     submitConfiguration = async () => {
         console.log("Submitting configuration")
         this.setState({isLoading:true})
-        const apiURL = "/package/getPackageConfiguration";
+
+        // Use the default API_URL
+        let API_URL = "http://localhost:8080"
+
+        // If environment variable has been set it will override the default
+        if (process.env.REACT_APP_API_URL) {
+            console.log("Environment variable has been set")
+            API_URL = process.env.REACT_APP_API_URL
+        }
+
+        const apiURL = API_URL + "/package/getPackageConfiguration";
         fetch(apiURL, {
         method: 'POST',
         headers: {