From f8ea520727a0ae1820d2b8bf53e9fc0399231dec Mon Sep 17 00:00:00 2001 From: Sladyn Date: Mon, 31 Aug 2020 23:12:56 +0530 Subject: [PATCH] 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 | 1 + Dockerfile.infra | 1 + README.md | 96 +++++++++++++++++++ frontend/.env | 1 + frontend/.env.docker | 2 + frontend/Dockerfile | 2 +- frontend/package-lock.json | 52 ++++++++++ frontend/package.json | 3 +- .../communityConfigLayout.js | 12 ++- .../configurationCard.js | 15 ++- .../components/PackageGeneration/Editor.js | 23 ++++- frontend/src/components/layouts/CardLayout.js | 10 +- frontend/src/components/modal.js | 12 ++- 13 files changed, 220 insertions(+), 10 deletions(-) create mode 100644 frontend/.env.docker diff --git a/Dockerfile b/Dockerfile index a8d4f19..1e8906c 100644 --- a/Dockerfile +++ b/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 diff --git a/Dockerfile.infra b/Dockerfile.infra index aa7cbcf..8e55218 100644 --- a/Dockerfile.infra +++ b/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 diff --git a/README.md b/README.md index 70e561b..0773355 100644 --- a/README.md +++ b/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: diff --git a/frontend/.env b/frontend/.env index 6ed7495..239c57b 100644 --- a/frontend/.env +++ b/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 diff --git a/frontend/.env.docker b/frontend/.env.docker new file mode 100644 index 0000000..a6d90ce --- /dev/null +++ b/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 diff --git a/frontend/Dockerfile b/frontend/Dockerfile index a568960..3d69ff4 100644 --- a/frontend/Dockerfile +++ b/frontend/Dockerfile @@ -19,4 +19,4 @@ COPY . . EXPOSE 3000 # Finally runs the application -CMD [ "npm", "start" ] +CMD [ "npm", "run", "start:docker" ] diff --git a/frontend/package-lock.json b/frontend/package-lock.json index 3dddc77..413cb81 100644 --- a/frontend/package-lock.json +++ b/frontend/package-lock.json @@ -5428,6 +5428,58 @@ "resolved": "https://registry.npmjs.org/entities/-/entities-2.0.3.tgz", "integrity": "sha512-MyoZ0jgnLvB2X3Lg5HqpFmn1kybDiIfEQmKzTb5apr51Rb+T3KdmMiqa70T+bhGnyv7bQ6WMj2QMHpGMmlrUYQ==" }, + "env-cmd": { + "version": "10.1.0", + "resolved": "https://registry.npmjs.org/env-cmd/-/env-cmd-10.1.0.tgz", + "integrity": "sha512-mMdWTT9XKN7yNth/6N6g2GuKuJTsKMDHlQFUDacb/heQRRWOTIZ42t1rMHnQu4jYxU1ajdTeJM+9eEETlqToMA==", + "requires": { + "commander": "^4.0.0", + "cross-spawn": "^7.0.0" + }, + "dependencies": { + "commander": { + "version": "4.1.1", + "resolved": "https://registry.npmjs.org/commander/-/commander-4.1.1.tgz", + "integrity": "sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==" + }, + "cross-spawn": { + "version": "7.0.3", + "resolved": "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz", + "integrity": "sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==", + "requires": { + "path-key": "^3.1.0", + "shebang-command": "^2.0.0", + "which": "^2.0.1" + } + }, + "path-key": { + "version": "3.1.1", + "resolved": "https://registry.npmjs.org/path-key/-/path-key-3.1.1.tgz", + "integrity": "sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==" + }, + "shebang-command": { + "version": "2.0.0", + "resolved": "https://registry.npmjs.org/shebang-command/-/shebang-command-2.0.0.tgz", + "integrity": "sha512-kHxr2zZpYtdmrN1qDjrrX/Z1rR1kG8Dx+gkpK1G4eXmvXswmcE1hTWBWYUzlraYw1/yZp6YuDY77YtvbN0dmDA==", + "requires": { + "shebang-regex": "^3.0.0" + } + }, + "shebang-regex": { + "version": "3.0.0", + "resolved": "https://registry.npmjs.org/shebang-regex/-/shebang-regex-3.0.0.tgz", + "integrity": "sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==" + }, + "which": { + "version": "2.0.2", + "resolved": "https://registry.npmjs.org/which/-/which-2.0.2.tgz", + "integrity": "sha512-BLI3Tl1TW3Pvl70l3yq3Y64i+awpwXqsGBYWkkqMtnbXgrMD+yj7rhW0kuEDxzJaYXGjEW5ogapKNMEKNMjibA==", + "requires": { + "isexe": "^2.0.0" + } + } + } + }, "errno": { "version": "0.1.7", "resolved": "https://registry.npmjs.org/errno/-/errno-0.1.7.tgz", diff --git a/frontend/package.json b/frontend/package.json index 296c52b..4bf47c0 100644 --- a/frontend/package.json +++ b/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" }, diff --git a/frontend/src/components/CommunityConfiguration/communityConfigLayout.js b/frontend/src/components/CommunityConfiguration/communityConfigLayout.js index f4efc28..293e7ff 100644 --- a/frontend/src/components/CommunityConfiguration/communityConfigLayout.js +++ b/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}) } diff --git a/frontend/src/components/CommunityConfiguration/configurationCard.js b/frontend/src/components/CommunityConfiguration/configurationCard.js index b20596f..7bfc7ae 100644 --- a/frontend/src/components/CommunityConfiguration/configurationCard.js +++ b/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(
diff --git a/frontend/src/components/PackageGeneration/Editor.js b/frontend/src/components/PackageGeneration/Editor.js index 6302654..df6379a 100644 --- a/frontend/src/components/PackageGeneration/Editor.js +++ b/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,7 +86,7 @@ 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'); @@ -79,6 +94,8 @@ class editor extends React.Component { xhr.send(localStorage.getItem("packageConfigYAML")); } + + render() { const packageJSON = JSON.parse(localStorage.getItem("packageConfigJSON")) diff --git a/frontend/src/components/layouts/CardLayout.js b/frontend/src/components/layouts/CardLayout.js index f58d415..081657a 100644 --- a/frontend/src/components/layouts/CardLayout.js +++ b/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}); diff --git a/frontend/src/components/modal.js b/frontend/src/components/modal.js index f48bbb5..f06ffc8 100644 --- a/frontend/src/components/modal.js +++ b/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: {