#20 - Set environment variables to use the dev or prod server

Author: caduribas

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 package-lock.json
 .idea*
+.env

dist/RNAcentral-sequence-search.js

@@ -45,6 +45,7 @@
   "homepage": "https://github.com/RNAcentral/rnacentral-sequence-search-embed#readme",
   "dependencies": {
     "animate.css": "^3.5.2",
+    "dotenv": "^8.2.0",
     "foundation-sites": "^6.5.0-rc.4",
     "jquery": "^3.3.1",
     "md5": "^2.2.1",

dist/RNAcentral-sequence-search.js.map

@@ -1,5 +1,5 @@
-// let server = 'https://search.rnacentral.org';
-let server = 'http://51.179.208.74:8002';
+let server = process.env.REACT_APP_BRANCH === 'dev' ? 'http://51.179.208.74:8002' : 'https://search.rnacentral.org';
+let ebiDevOrProd = process.env.REACT_APP_BRANCH === 'dev' ? 'wwwdev' : 'www';
 
 module.exports = {
   rnacentralDatabases: () => `${server}/api/rnacentral-databases`,
@@ -12,5 +12,5 @@ module.exports = {
   consumersStatuses:   () => `${server}/api/consumers-statuses`,
   infernalJobStatus:   (jobId) => `${server}/api/infernal-status/${jobId}`,
   infernalJobResult:   (resultId) => `${server}/api/infernal-result/${resultId}`,
-  searchEndpoint:      (query) => `https://wwwdev.ebi.ac.uk/ebisearch/ws/rest/rnacentral?query=${query}&fields=description,url&format=json&sort=boost:descending`,
+  searchEndpoint:      (query) => `https://${ebiDevOrProd}.ebi.ac.uk/ebisearch/ws/rest/rnacentral?query=${query}&fields=description,url&format=json&sort=boost:descending`,
 };

package-lock.json

@@ -1,5 +1,6 @@
 const path = require('path');
 const webpack = require('webpack');
+const dotenv = require('dotenv');
 
 const HtmlWebpackPlugin = require('html-webpack-plugin');
 const ExtractTextPlugin = require('extract-text-webpack-plugin');
@@ -12,6 +13,15 @@ module.exports = function(env) {
   if (env && env.prod) environment = 'production';
   else environment = 'development';
 
+  // call dotenv and it will return an Object with a parsed key
+  const branch = dotenv.config().parsed;
+
+  // reduce it to a nice object
+  const envKeys = Object.keys(branch).reduce((prev, next) => {
+    prev[`process.env.${next}`] = JSON.stringify(branch[next]);
+    return prev;
+  }, {});
+
   return {
     target: 'web',
     entry: path.join(__dirname, 'src', 'app.jsx'),
@@ -31,7 +41,8 @@ module.exports = function(env) {
         template: "src/index.html",
         filename: environment === 'production' ? path.join(__dirname, "index.html") : "index.html"
       }),
-      new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', jquery: 'jquery' })
+      new webpack.ProvidePlugin({ $: 'jquery', jQuery: 'jquery', jquery: 'jquery' }),
+      new webpack.DefinePlugin(envKeys)
     ],
     module: {
       rules: [